Skip to content

Instantly share code, notes, and snippets.

@geospatialem

geospatialem/LeafletPointSymbologyExample.html

Last active October 7, 2021 08:28
Show Gist options
  • Save geospatialem/0e81d4f82aa5021613a5 to your computer and use it in GitHub Desktop.
Save geospatialem/0e81d4f82aa5021613a5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
LeafletPointSymbologyExample.html
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<div id="map" style="width: 600px; height: 400px"></div>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var geojson = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "id": 3, "properties": { "NAME": "Duluth Entertainment Convention Center (DECC)" }, "geometry": { "type": "Point", "coordinates": [ -92.097675, 46.781194 ] } }
]
};
var map = L.map('map').setView([46.7830, -92.1005], 15);
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
geojsonLayer = L.geoJson(geojson, {
style: function(feature) {
return {color: "green"};
},
pointToLayer: function(feature, latlng) {
return new L.CircleMarker(latlng, {radius: 10, fillOpacity: 0.85});
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.NAME);
}
});
map.addLayer(geojsonLayer);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment