From 27f7c8123777d8299f9bc8b253e4f4977d83fdd0 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Sat, 30 Dec 2023 22:50:05 +0100 Subject: [PATCH] feat(leaflet-js-intg): add layer control according to https://leafletjs.com/examples/layers-control/ --- .../app/components/map-1k-circle-fixed.jsx | 24 +++++---- leaflet-js-intg/app/components/map-array.jsx | 50 +++++++++++++------ leaflet-js-intg/app/components/map-next.jsx | 22 +++++++- 3 files changed, 69 insertions(+), 27 deletions(-) diff --git a/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx b/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx index e4d1253..4333def 100644 --- a/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx +++ b/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx @@ -8,35 +8,39 @@ export default function Map1kCircleFixed() { useEffect(() => { - //layer - const layerOsm = L.tileLayer( + //base layer + const baseLayerOsm = L.tileLayer( "http://{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors', maxZoom: 18, scrollWheelZoom: false, }); - var layerOsmHot = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { + const baseLayerOsmHot = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'}); - var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'), + + //overlay + const littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'), denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'), aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'), - golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.'); - var layerCities = L.layerGroup([littleton, denver, aurora, golden]); + golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.'); + const overlayCity = L.layerGroup([littleton, denver, aurora, golden]); //map const map = L.map( mapRef.current, {attributionControl: true, - layers: [layerOsm, layerCities]} + layers: [baseLayerOsm, overlayCity]} ).setView( [42.69751, 23.32415], 13 ); + + //layer control var baseMaps = { - "OpenStreetMap": layerOsm, - "OpenStreetMap.HOT": layerOsmHot + "OpenStreetMap": baseLayerOsm, + "OpenStreetMap.HOT": baseLayerOsmHot }; var overlayMaps = { - "Cities": layerCities + "Cities": overlayCity }; var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map); diff --git a/leaflet-js-intg/app/components/map-array.jsx b/leaflet-js-intg/app/components/map-array.jsx index 6e0d388..83c970b 100644 --- a/leaflet-js-intg/app/components/map-array.jsx +++ b/leaflet-js-intg/app/components/map-array.jsx @@ -20,34 +20,54 @@ export default function MapArray( { array } ) { useEffect(() => { - const map = L.map( - mapRef.current, - {attributionControl: true} - ).setView( - mapCenter, - 6 - ); - - L.tileLayer( + //base layer + const baseLayerOsm = L.tileLayer( "http://{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors', maxZoom: 18, scrollWheelZoom: false, - }).addTo(map); + } + ); - array.map( function( value, key ) { + //marker array + const rryMrkr = array.map( function( value, key ) { - console.log('map-array:MapArray:map() value: ' +JSON.stringify(value)); + //console.log('map-array:MapArray:map() value: ' +JSON.stringify(value)); L.Marker.prototype.options.icon = DefaultIcon; - var marker = L.marker( + const marker = L.marker( [value.lat, value.lon], - {alt: 'popup marker name: ' + value.name} - ).addTo(map); + {alt: 'marker name: ' + value.name} + ); const popupText ='name: ' + value.name + '
lat: ' + value.lat + '
lon: ' + value.lon; + //console.log('popupText: ' + popupText); marker.bindPopup(popupText); + return marker }); + console.log('rryMrkr: ' + rryMrkr.length); + + //layer group + const overlayMrkr = L.layerGroup(rryMrkr); + + //map + const map = L.map( + mapRef.current, + {attributionControl: true, + layers : [baseLayerOsm, overlayMrkr]} + ).setView( + mapCenter, + 3 + ); + + //layout control + var baseMaps = { + "OpenStreetMap": baseLayerOsm + }; + var overlayMaps = { + 'Markers' : overlayMrkr + }; + const layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map); // unmount map function //You should unmount the function in react.js to remove the existing map. diff --git a/leaflet-js-intg/app/components/map-next.jsx b/leaflet-js-intg/app/components/map-next.jsx index eeeb7c3..fc9efa8 100644 --- a/leaflet-js-intg/app/components/map-next.jsx +++ b/leaflet-js-intg/app/components/map-next.jsx @@ -26,7 +26,8 @@ export default function MapNxt() { var map = L.map("map").setView([51.505, -0.09], 13); - L.tileLayer( + //base layer + const baseLayerMapBox = L.tileLayer( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", { attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox', @@ -36,12 +37,29 @@ export default function MapNxt() { zoomOffset: -1, accessToken: "pk.eyJ1IjoidGFyLWhlbCIsImEiOiJjbDJnYWRieGMwMTlrM2luenIzMzZwbGJ2In0.RQRMAJqClc4qoNwROT8Umg", scrollWheelZoom: false, - }).addTo(map); + }); + + //overlay + const littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'), + denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'), + aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'), + golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.'); + const overlayCity = L.layerGroup([littleton, denver, aurora, golden]); //TODO: Why is 'scrollWheelZoom: false,' above not working? //TODO: Why the following line instead? map.scrollWheelZoom.disable() + //layer control + var baseMaps = { + "MapBox": baseLayerMapBox, + }; + var overlayMaps = { + "Cities": overlayCity + }; + var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map); + + //marker L.Marker.prototype.options.icon = DefaultIcon; var marker = L.marker( [51.5, -0.09],