Skip to content

Instantly share code, notes, and snippets.

@russbiggs

russbiggs/index.html

Created November 14, 2019 18:29
Show Gist options
  • Save russbiggs/5e8bc35c32cb0f9cd9795e0137e555e9 to your computer and use it in GitHub Desktop.
Save russbiggs/5e8bc35c32cb0f9cd9795e0137e555e9 to your computer and use it in GitHub Desktop.
Download ZIP
leaflet draw syncing
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body {
margin:0;
padding:0;
height:100vh;
width: 100vw;
}
body {
display:flex;
}
#drawmap {
flex: 1;
height:100%;
}
#map {
flex: 1;
height:100%
}
.leaflet-draw-guides{ position: absolute; height: 100%; top: 0; left: 0; right: 0; bottom:0; }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
</head>
<body>
<div id="drawmap"></div>
<div id="map"></div>
<script>
var drawmap = L.map('drawmap', {
drawControl: true,
}).setView([35.08,-106.65], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYWJxIiwiYSI6ImNpeHRxc3Y1MjAwNTQycW56d3NsMmNwYXkifQ.S9tHYTJkndcIGC5RWh_7Hw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(drawmap);
var drawnItems = new L.FeatureGroup();
drawmap.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
drawmap.addControl(drawControl);
var mymap = L.map('map', {
scrollWheelZoom: false
}).setView([35.08,-106.65], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYWJxIiwiYSI6ImNpeHRxc3Y1MjAwNTQycW56d3NsMmNwYXkifQ.S9tHYTJkndcIGC5RWh_7Hw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
drawmap.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
drawnItems.addLayer(layer);
var new_polygon = L.polygon(layer._latlngs);
new_polygon.addTo(mymap)
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment