/* Template Name: Grenviro Monitoring Author: Themesbrand Website: https://Themesbrand.com/ Contact: Themesbrand@gmail.com File: Leaflet init js */ // leaflet-map var mymap = L.map('leaflet-map').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); // leaflet-map-marker var markermap = L.map('leaflet-map-marker').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(markermap); L.marker([51.5, -0.09]).addTo(markermap); L.circle([51.508, -0.11], { color: '#0ab39c', fillColor: '#0ab39c', fillOpacity: 0.5, radius: 500 }).addTo(markermap); L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ], { color: '#405189', fillColor: '#405189', }).addTo(markermap); // Working with popups var popupmap = L.map('leaflet-map-popup').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(popupmap); L.marker([51.5, -0.09]).addTo(popupmap) .bindPopup("Hello world!
I am a popup.").openPopup(); L.circle([51.508, -0.11], 500, { color: '#f06548', fillColor: '#f06548', fillOpacity: 0.5 }).addTo(popupmap).bindPopup("I am a circle."); L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ], { color: '#405189', fillColor: '#405189', }).addTo(popupmap).bindPopup("I am a polygon."); var popup = L.popup(); // leaflet-map-custom-icons var customiconsmap = L.map('leaflet-map-custom-icons').setView([51.5, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(customiconsmap); var LeafIcon = L.Icon.extend({ options: { iconSize: [45, 45], iconAnchor: [22, 94], popupAnchor: [-3, -76] } }); var greenIcon = new LeafIcon({ iconUrl: 'build/images/logo-sm.png' }); L.marker([51.5, -0.09], { icon: greenIcon }).addTo(customiconsmap); // Interactive Choropleth Map var interactivemap = L.map('leaflet-map-interactive-map').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(interactivemap); // get color depending on population density value function getColor(d) { return d > 1000 ? '#405189' : d > 500 ? '#516194' : d > 200 ? '#63719E' : d > 100 ? '#7480A9' : d > 50 ? '#8590B4' : d > 20 ? '#97A0BF' : d > 10 ? '#A8B0C9' : '#A8B0C9'; } function style(feature) { return { weight: 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7, fillColor: getColor(feature.properties.density) }; } var geojson = L.geoJson(statesData, { style: style, }).addTo(interactivemap); // leaflet-map-group-control var cities = L.layerGroup(); L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities), L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities), L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities), L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities); var mbAttr = 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; var grayscale = L.tileLayer(mbUrl, { id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr }), streets = L.tileLayer(mbUrl, { id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr }); var layergroupcontrolmap = L.map('leaflet-map-group-control', { center: [39.73, -104.99], zoom: 7, layers: [streets, cities] }); var baseLayers = { "Grayscale": grayscale, "Streets": streets }; var overlays = { "Cities": cities }; L.control.layers(baseLayers, overlays).addTo(layergroupcontrolmap);