Skip to content

Instantly share code, notes, and snippets.

@bnorberg

bnorberg/rootsapi_leaflet_bikecrash

Last active October 16, 2018 20:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bnorberg/4ecae7296528e6d49c0bf5670685eea5 to your computer and use it in GitHub Desktop.
Save bnorberg/4ecae7296528e6d49c0bf5670685eea5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rootsapi_leaflet_bikecrash
<html>
<head>
<style>
#mapid { height: 620px; }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="mapid"></div>
<script type="text/javascript">
var mymap = L.map('mapid').setView([36.0014258, -78.9382286], 14);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'ADD YOUR PUBLIC KEY HERE'
}).addTo(mymap);
var marker = L.marker([36.00357775, -78.9387302545133]).addTo(mymap);
marker.bindPopup("<b>Here we are!</b><br>In a popup.").openPopup();
$.getJSON("durham_bcrashes.geojson",function(data){ // add GeoJSON layer to the map once the file is loaded
var datalayer = L.geoJson(data ,{
pointToLayer: function(feature, latlng) {
var smallIcon = new L.Icon({
iconSize: [47, 47],
iconAnchor: [13, 27],
popupAnchor: [5, -14],
iconUrl: 'bike_accident_red.png'
});
return L.marker(latlng, {icon: smallIcon});
},
onEachFeature: function(feature, featureLayer) {
featureLayer.bindPopup("<b>Date of Crash</b><br>"+feature.properties.CrashDate);
}
}).addTo(mymap);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment