Last active
September 5, 2024 11:31
-
-
Save marcellobenigno/ec9ba2086e861598775f5995e6e99ee5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var center = [-7.1990, -36.4663]; | |
| var initialZoom = 8; | |
| var osm = L.tileLayer( | |
| 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }); | |
| var googleStreets = L.tileLayer( | |
| 'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', { | |
| maxZoom: 20, | |
| subdomains:['mt0','mt1','mt2','mt3'] | |
| }); | |
| var googleSat = L.tileLayer( | |
| 'http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{ | |
| maxZoom: 20, | |
| subdomains:['mt0','mt1','mt2','mt3'] | |
| }); | |
| var estilo = { | |
| color: '#000000', // cor da linha | |
| weight: 1, // espessura da linha | |
| opacity: 0.65, // opacidade da linha | |
| fillColor: '#fafafa', // cor do polígono | |
| fillOpacity: 0.5, // opacidade do polígono | |
| }; | |
| function onEachFeature(feature, layer) { | |
| if (feature.properties) { | |
| var popUp = ` | |
| <b>Município:</b> ${feature.properties.nome}<br> | |
| <b>Mesoregião:</b> ${feature.properties.microregiao}<br> | |
| <b>Microregião:</b> ${feature.properties.mesoregiao}<br> | |
| <b>População Urbana:</b> ${feature.properties.populacao_urbana}<br> | |
| <b>População Rural:</b> ${feature.properties.populacao_rural}<br> | |
| <b>População Total:</b> ${feature.properties.populacao_total} | |
| ` | |
| layer.bindPopup(popUp); | |
| } | |
| } | |
| function onEachFeature2(feature, layer) { | |
| if (feature.properties) { | |
| var popUp = ` | |
| <b>Proprietário:</b> ${feature.properties.proprietar}<br> | |
| ` | |
| layer.bindPopup(popUp); | |
| } | |
| } | |
| var pbGeoJson = L.geoJSON(pb, { | |
| style: estilo, | |
| onEachFeature: onEachFeature | |
| }); | |
| var pocoStyle = { | |
| radius: 4, | |
| fillColor: "#2E64FE", | |
| color: "#0101DF", | |
| weight: 1, | |
| opacity: 1, | |
| fillOpacity: 0.8, | |
| }; | |
| var pocosGeoJson = L.geoJSON(pocos, { | |
| pointToLayer: function (feature, latlng) { | |
| return L.circleMarker(latlng, pocoStyle); | |
| }, | |
| onEachFeature: onEachFeature2 | |
| }); | |
| var markers = L.markerClusterGroup(); | |
| markers.addLayer(pocosGeoJson); | |
| var map = L.map('map', { | |
| center: center, | |
| zoom: initialZoom, | |
| zoomControl: false, | |
| layers: [osm, markers] | |
| }); | |
| var zoomHome = L.Control.zoomHome(); | |
| zoomHome.addTo(map); | |
| var baseMaps = { | |
| "OpenStreetMap": osm, | |
| "Google Streets": googleStreets, | |
| "Google Satélite": googleSat, | |
| }; | |
| var overlayMaps = { | |
| "Municípios": pbGeoJson, | |
| "Poços Artesianos": markers | |
| }; | |
| var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map); | |
| map.on('overlayadd', function(e) { | |
| if (e.layer === pbGeoJson) { | |
| pbGeoJson.bringToBack(); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment