Basic


/**
*
* Basic
*/
var map = L.map('basic-map').setView([51.505, -0.09], 13);
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=[MapBox_Access_Token]', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
Panes




































/**
*
* Live Location
*/
var liveLocation = L.map('live-location').fitWorld();
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=[MapBox_Access_Token]', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(liveLocation);
function onLocationFound(e) {
var radius = e.accuracy / 2;
var locationMarker = L.marker(e.latlng).addTo(liveLocation)
.bindPopup('You are within ' + radius + ' meters from this point').openPopup();
var locationCircle = L.circle(e.latlng, radius).addTo(liveLocation);
}
function onLocationError(e) {
alert(e.message);
}
liveLocation.on('locationfound', onLocationFound);
liveLocation.on('locationerror', onLocationError);
liveLocation.locate({setView: true, maxZoom: 16});
Interactive Choropleth Map
US Population Density
Hover over a state 0–10
10–20
20–50
50–100
100–200
200–500
500–1000
1000+
10–20
20–50
50–100
100–200
200–500
500–1000
1000+
Leaflet | Map data © OpenStreetMap contributors, Imagery © Mapbox, Population data © US Census Bureau
/**
*
* Interactive Choropleth Map
*/
var interactiveMap = L.map('interactive-map').setView([37.8, -96], 4);
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=[MapBox_Access_Token]', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(interactiveMap);
// control that shows state info on hover
var info = L.control();
info.onAdd = function (interactiveMap) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' : 'Hover over a state');
};
info.addTo(interactiveMap);
// get color depending on population density value
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' : '#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
interactiveMap.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
/* global statesData */
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(interactiveMap);
interactiveMap.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>');
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (interactiveMap) {
var div = L.DomUtil.create('div', 'info legend');
var grades = [0, 10, 20, 50, 100, 200, 500, 1000];
var labels = [];
var from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(interactiveMap);
Copyright © 2022 DesignReset, All rights reserved.
Coded with