leaflet-styleeditor
Version:
Edit the style of features drawn within Leaflet.
141 lines (118 loc) • 3.55 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"/>
<!-- bootstrap - optional - needed for glyphicon markers -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- L.StyleEditor source files -->
<script src="../dist/javascript/Leaflet.StyleEditor.min.js"></script>
<link rel="stylesheet" href="./css/Leaflet.StyleEditor.css"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 50%;
}
#map2 {
position: absolute;
top: 50%;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="map2"></div>
<script>
let forms = {
'geometry': {
'dashArray': (elem) => {return elem.target instanceof L.Polygon},
'color': true,
},
'marker': {
'icon': {
'boolean': () => {return false},
'formElement': L.StyleEditor.formElements.DashElement
}
}
}
const ignoreLayerTypes = ["Marker", "PolyLine"]
createMap('map', L.StyleEditor.marker.DefaultMarker, {}, [])
createMap('map2', L.StyleEditor.marker.GlyphiconMarker, forms, ignoreLayerTypes)
function createMap (mapId, markerType, forms, ignoreLayerTypes) {
let map = L.map(mapId).setView([20, -40], 3)
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
// initialize the StyleEditor
let styleEditor = L.control.styleEditor({
forms,
markerType,
ignoreLayerTypes
})
map.addControl(styleEditor);
// make visible for testing stuff
window.styleEditor = 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)
map.on('styleeditor:changed', function (element) {
console.log(element)
})
}
</script>
</body>
</html>