leaflet-styleeditor
Version:
Edit the style of features drawn within Leaflet.
118 lines (96 loc) • 2.65 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>Leaflet.StyleEditor with Leaflet.Draw</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css"/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="lib/leaflet/leaflet.ie.css"/>
<link rel="stylesheet" href="leaflet.draw.ie.css"/>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<script src="../dist/javascript/Leaflet.StyleEditor.js"></script>
<link rel="stylesheet" href="../dist/css/Leaflet.StyleEditor.css"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map = L.map('map').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)
let forms = {
'geometry': {
'dashArray': (elem) => {return elem instanceof L.Polygon},
'color': true,
'weight': true
}
}
//Initialize the StyleEditor
let styleEditor = L.control.styleEditor({
position: 'topleft',
useGrouping: false,
forms: forms,
})
map.addControl(styleEditor)
//Leaflet.draw
let drawnItems = new L.FeatureGroup()
map.addLayer(drawnItems)
let drawControl = new L.Control.Draw({
draw: {
position: 'topleft',
polygon: {
title: 'Draw a sexy polygon!',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
polyline: {
metric: false
},
circle: {
shapeOptions: {
color: '#662d91'
}
},
marker: {
icon: styleEditor.getDefaultIcon()
}
},
edit: {
featureGroup: drawnItems
}
})
map.addControl(drawControl)
map.on('draw:created', function (e) {
let type = e.layerType,
layer = e.layer
if (type === 'marker') {
layer.bindPopup('A popup!')
}
drawnItems.addLayer(layer)
})
</script>
</body>
</html>