D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
skorasaurus
Full window
Github gist
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' /> </head> <body> <div id="map" style="width: 100%; height: 600px; border: 1px solid #ccc;"></div> <script> var basemap = new L.TileLayer('https://{s}.tiles.mapbox.com/v3/skorasaurus.5eb85050/{z}/{x}/{y}.png', {maxZoom: 19}); var latlng = new L.LatLng(41.500880,-81.694036); var mizzap = new L.Map('map', {center: latlng, zoom: 15, layers: [basemap]}); // https://www.mapbox.com/foundations/building-a-store-locator/ // initializes feature layer for use later: // https://github.com/maptime/maptime-bites/blob/gh-pages/00004/index.html var featLayer = L.mapbox.featureLayer().addTo(mizzap); // go through each polygon in layer, style based on property in parking= // example from: https://leafletjs.com/examples/geojson.html // featLayer.loadURL('dtparking.geojson').addTo(mizzap); featLayer.loadURL('dtparking.geojson'); featLayer.on('ready', function() { featLayer.eachLayer(function(polygon) { polygon.setStyle( {fill: '#bada55'}); }); }); // https://www.mapbox.com/mapbox.js/example/v1.0.0/choropleth/ // function getMyStyle(feature) { // return { // weight: 4, // fillOpacity: 0.08, // // fillColor: getColor(feature.properties.parking) // // color: getColor(feature.properties.density) * 0.4; // }; // } // }); //function getColor(thevalue){ // console.log(thevalue); //return { // thevalue = "multi-storey" ? '#ff0000': // thevalue = "surface" ? "#AD3535": // thevalue == "underground" ? "#FF1717": // ; // } // mizzap.legendControl.addLegend(document.getElementById('legend').innerHTML); </script> </body> </html>
https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js