(function ($) { 'use strict'; // basic map var leafletBasic = function () { if ($('#map-basic').length) { var mymap = L.map('map-basic').setView([51.505, -0.09], 13); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1 }).addTo(mymap); L.marker([51.5, -0.09]).addTo(mymap) .bindPopup("Hello world!
I am a popup.").openPopup(); L.circle([51.508, -0.11], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(mymap).bindPopup("I am a circle."); L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(mymap).bindPopup("I am a polygon."); var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); } mymap.on('click', onMapClick); } } var choropleth = function () { if ($('#map-choropleth').length) { var map = L.map('map-choropleth').setView([37.8, -96], 4); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1 }).addTo(map); // control that shows state info on hover var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info.update = function (props) { this._div.innerHTML = '

US Population Density

' + (props ? '' + props.name + '
' + props.density + ' people / mi2' : 'Hover over a state'); }; info.addTo(map); // 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) { map.fitBounds(e.target.getBounds()); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } map.attributionControl.addAttribution('Population data © US Census Bureau'); var legend = L.control({ position: 'bottomright' }); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 10, 20, 50, 100, 200, 500, 1000], labels = [], from, to; for (var i = 0; i < grades.length; i++) { from = grades[i]; to = grades[i + 1]; labels.push( ' ' + from + (to ? '–' + to : '+')); } div.innerHTML = labels.join('
'); return div; }; legend.addTo(map); } } var crsBasic = function () { if ($('#map-panes').length) { var map = L.map('map-panes'); map.createPane('labels'); // This pane is above markers but below popups map.getPane('labels').style.zIndex = 650; // Layers in this pane are non-interactive and do not obscure mouse/touch events map.getPane('labels').style.pointerEvents = 'none'; var cartodbAttribution = '© OpenStreetMap contributors, © CARTO'; var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { attribution: cartodbAttribution }).addTo(map); var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', { attribution: cartodbAttribution, pane: 'labels' }).addTo(map); map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 4); } } var multiMarkColors = function () { if ($('#map-multi-marker-colors').length) { // define leaflet var leaflet = L.map('map-multi-marker-colors', { center: [47.339, 11.602], zoom: 3 }) // set leaflet tile layer L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(leaflet); // set custom SVG icon marker var markerIcon1 = L.divIcon({ html: ``, bgPos: [10, 10], iconAnchor: [20, 37], popupAnchor: [0, -37], className: 'leaflet-marker' }); var markerIcon2 = L.divIcon({ html: ``, bgPos: [10, 10], iconAnchor: [20, 37], popupAnchor: [0, -37], className: 'leaflet-marker' }); var markerIcon3 = L.divIcon({ html: ``, bgPos: [10, 10], iconAnchor: [20, 37], popupAnchor: [0, -37], className: 'leaflet-marker' }); var markerIcon4 = L.divIcon({ html: ``, bgPos: [10, 10], iconAnchor: [20, 37], popupAnchor: [0, -37], className: 'leaflet-marker' }); // bind markers with popup var marker1 = L.marker([39.3262345, -4.8380649], { icon: markerIcon1 }).addTo(leaflet); var marker2 = L.marker([41.804, 13.843], { icon: markerIcon2 }).addTo(leaflet); var marker3 = L.marker([51.11, 10.371], { icon: markerIcon3 }).addTo(leaflet); var marker4 = L.marker([46.74, 2.417], { icon: markerIcon4 }).addTo(leaflet); marker1.bindPopup("Spain", { closeButton: false }); marker2.bindPopup("Italy", { closeButton: false }); marker3.bindPopup("Germany", { closeButton: false }); marker4.bindPopup("France", { closeButton: false }); L.control.scale().addTo(leaflet); } } var interactiveMap = function () { if ($('#map-interactive').length) { var leaflet = L.map('map-interactive', { center: [40.725, -73.985], zoom: 11 }); // Init Leaflet Map L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(leaflet); // Define Marker Layer var markerLayer = L.layerGroup().addTo(leaflet); // Set Custom SVG icon marker var markerIcon = L.divIcon({ html: ``, bgPos: [10, 10], iconAnchor: [20, 37], popupAnchor: [0, -37], className: 'leaflet-marker' }); // Map onClick Action leaflet.on('click', function (e) { geocodeService.reverse().latlng(e.latlng).run(function (error, result) { if (error) { return; } markerLayer.clearLayers(); // remove this line to allow multi-markers on click L.marker(result.latlng, { icon: markerIcon }).addTo(markerLayer).bindPopup(result.address.Match_addr, { closeButton: false }).openPopup(); alert(`You've clicked on the following address: ${result.address.Match_addr}`); }); }); } } var MultiMark = function () { if ($('#map-multi-mark').length) { // add sample location data var data = [ { "location": [41.575330, 13.102411], "title": "One" }, { "location": [41.575730, 13.002411], "title": "Two" }, { "location": [41.807149, 13.162994], "title": "Three" }, { "location": [41.507149, 13.172994], "title": "Four" }, { "location": [41.847149, 14.132994], "title": "Five" }, { "location": [41.219190, 13.062145], "title": "Six" }, { "location": [41.344190, 13.242145], "title": "Seven" }, { "location": [41.679190, 13.122145], "title": "Eight" }, { "location": [41.329190, 13.192145], "title": "Nine" }, { "location": [41.379290, 13.122545], "title": "Ten" }, { "location": [41.409190, 13.362145], "title": "Elevent" }, { "location": [41.794008, 12.583884], "title": "Twelve" }, { "location": [41.805008, 12.982884], "title": "Thirteen" }, { "location": [41.536175, 13.273590], "title": "Fourteen" }, { "location": [41.516175, 13.373590], "title": "Fifteen" }, { "location": [41.507175, 13.273690], "title": "Sixteen" }, { "location": [41.836175, 13.673590], "title": "Seventeen" }, { "location": [41.796175, 13.570590], "title": "Eighteen" }, { "location": [41.436175, 13.573590], "title": "Nineteen" }, { "location": [41.336175, 13.973590], "title": "Tweenty" }, { "location": [41.236175, 13.273590], "title": "Tweenty One" }, { "location": [41.546175, 13.473590], "title": "Tweenty Two" }, { "location": [41.239290, 13.032145], "title": "Tweenty Three" } ]; // init leaflet map var leaflet = new L.Map('map-multi-mark', { zoom: 10, center: new L.latLng(data[0].location) }); leaflet.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); // add scale layer L.control.scale().addTo(leaflet); // set custom SVG icon marker var leafletIcon = L.divIcon({ html: ``, bgPos: [10, 10], iconAnchor: [20, 37], popupAnchor: [0, -37], className: 'leaflet-marker' }); // set markers data.forEach(function (item) { var marker = L.marker(item.location, { icon: leafletIcon }).addTo(leaflet); marker.bindPopup(item.title, { closeButton: false }); }) } } //Load functions $(document).ready(function () { leafletBasic(); choropleth(); crsBasic(); multiMarkColors(); MultiMark(); interactiveMap(); }); })(jQuery);