leaflet-styleeditor
Version:
Edit the style of features drawn within Leaflet.
114 lines (94 loc) • 2.69 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css"/>
<!-- L.StyleEditor source files -->
<script src="../dist/javascript/Leaflet.StyleEditor.min.js"></script>
<link rel="stylesheet" href="../dist/css/Leaflet.StyleEditor.min.css"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#map2 {
position: absolute;
top: 50%;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map = L.map('map').setView([20, -40], 3)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
// initialize the StyleEditor
var styleEditor = L.control.styleEditor({
position: 'topleft'
})
map.addControl(styleEditor)
// some random geometries to test (marker, polygon, polyline, geoJSON)
L.marker([51.5, -0.09]).addTo(map)
L.polyline([
[0, 0],
[30, 30],
[0, 20]
]).addTo(map)
L.polygon([
[49, -100],
[60, -120],
[70, -90]
]).addTo(map)
L.polygon([
[-45, 64.92354174306496],
[-45, 70.61261423801925],
[-22.148437499999996, 70.61261423801925],
[-22.148437499999996, 64.92354174306496],
[-45, 64.92354174306496]
]).addTo(map)
L.geoJson([{
'type': 'Feature',
'properties': {'party': 'Republican'},
'geometry': {
'type': 'Polygon',
'coordinates': [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}], {
style: function (feature) {
switch (feature.properties.party) {
case 'Republican':
return {color: '#ff0000'}
}
}
}).addTo(map)
let littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.')
let cities = L.layerGroup([littleton, denver, aurora, golden]).addTo(map)
map.on('styleeditor:changed', function (element) {
console.log(element)
})
</script>
</body>
</html>