leaflet.path.drag
Version:
Allow to drag Leaflet path
52 lines (43 loc) • 1.7 kB
HTML
<html>
<head>
<title>Path.Drag.js demo</title>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
<!-- <script src="../../Leaflet/dist/leaflet-src.js"></script> -->
<script src="../src/Path.Drag.js"></script>
<style type="text/css">
.my-div-icon {
background-color: goldenrod;
text-align: center;
}
body,
html,
#map {
padding: 0;
margin: 0;
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Remember to include either the Leaflet 0.7.3 or the Leaflet 1.0.0-beta1 library
var myCenter = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: myCenter, zoom: 5});
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
var layer = L.geoJson(null, {onEachFeature: function (feature, layer) {
layer.on('add', function () {
var dragging = new L.Handler.PathDrag(layer);
dragging.enable()
})
}}).addTo(map);
fetch('https://gist.githubusercontent.com/yohanboniface/252848d504456d7853c098f7ac40a4f9/raw/70d81ec5fa7fc0a7e994138dc2bc42fbdbafb3ff/russia.geojson').then(function (response) {return response.json();}).then(function (geojson) {
layer.addData(geojson)
})
</script></body>
</html>