From 3983ccb13ad3f8d220af5257db4047e7a6aa68ef Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Sat, 30 Dec 2023 18:27:44 +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 | 51 +++++++++++++++---- leaflet-js-intg/app/components/map-array.jsx | 5 +- .../app/components/map-circle-fixed.jsx | 3 +- .../app/components/map-geo-json.jsx | 6 ++- leaflet-js-intg/app/components/map-next.jsx | 5 +- leaflet-js-intg/app/components/map-nxt.jsx | 5 +- leaflet-js-intg/app/components/map.jsx | 6 ++- 7 files changed, 65 insertions(+), 16 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 3f0651b..e4d1253 100644 --- a/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx +++ b/leaflet-js-intg/app/components/map-1k-circle-fixed.jsx @@ -8,25 +8,56 @@ export default function Map1kCircleFixed() { useEffect(() => { - const map = L.map( - mapRef.current, - {attributionControl: true} - ).setView( [42.69751, 23.32415], 13 ); - - //add layer - L.tileLayer( + //layer + const layerOsm = L.tileLayer( "http://{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors', maxZoom: 18, scrollWheelZoom: false, - }).addTo(map); + }); + var layerOsmHot = 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.'), + 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]); - //add circle with a radius of 500 m + //map + const map = L.map( + mapRef.current, + {attributionControl: true, + layers: [layerOsm, layerCities]} + ).setView( [42.69751, 23.32415], 13 ); + var baseMaps = { + "OpenStreetMap": layerOsm, + "OpenStreetMap.HOT": layerOsmHot + }; + var overlayMaps = { + "Cities": layerCities + }; + var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map); + + //dynamic adding of base and overlay layers + var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'), + rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.'); + var parks = L.layerGroup([crownHill, rubyHill]); + var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)' + }); + layerControl.addBaseLayer(openTopoMap, "OpenTopoMap"); + layerControl.addOverlay(parks, "Parks"); + + //add circle with a radius of X m //https://leafletjs.com/reference.html#circle var circle = L.circle(map.getCenter(), { radius: 500 - }).addTo(map); + }); + var layerCircles = L.layerGroup([circle]); + layerControl.addOverlay(layerCircles, "Circles"); //https://jsfiddle.net/falkedesign/q2mdow5c/ map.on('move', function(e){ diff --git a/leaflet-js-intg/app/components/map-array.jsx b/leaflet-js-intg/app/components/map-array.jsx index e22a1b5..6e0d388 100644 --- a/leaflet-js-intg/app/components/map-array.jsx +++ b/leaflet-js-intg/app/components/map-array.jsx @@ -41,7 +41,10 @@ export default function MapArray( { array } ) { console.log('map-array:MapArray:map() value: ' +JSON.stringify(value)); L.Marker.prototype.options.icon = DefaultIcon; - var marker = L.marker([value.lat, value.lon]).addTo(map); + var marker = L.marker( + [value.lat, value.lon], + {alt: 'popup marker name: ' + value.name} + ).addTo(map); const popupText ='name: ' + value.name + '
lat: ' + value.lat + '
lon: ' + value.lon; marker.bindPopup(popupText); }); diff --git a/leaflet-js-intg/app/components/map-circle-fixed.jsx b/leaflet-js-intg/app/components/map-circle-fixed.jsx index b2f179c..755dd01 100644 --- a/leaflet-js-intg/app/components/map-circle-fixed.jsx +++ b/leaflet-js-intg/app/components/map-circle-fixed.jsx @@ -27,7 +27,8 @@ export default function MapCircleFixed() { radius: 50, color: 'red', fillOpacity: 0.2, - }).addTo(map); + alt: 'popup marker name: ' + 'circle fixed to center'} + ).addTo(map); map.on('move', function(e){ circle.setLatLng(map.getCenter()); diff --git a/leaflet-js-intg/app/components/map-geo-json.jsx b/leaflet-js-intg/app/components/map-geo-json.jsx index d076073..81e8ac7 100644 --- a/leaflet-js-intg/app/components/map-geo-json.jsx +++ b/leaflet-js-intg/app/components/map-geo-json.jsx @@ -34,7 +34,11 @@ function MapGeoJSON() { if(markerRef.current) markerRef.current.setLatLng(markerPosition) else - markerRef.current = L.marker(markerPosition, {icon:customIcon }).addTo(mapRef.current).bindPopup('Business Center Andromeda') + markerRef.current = L.marker( + markerPosition, + {icon:customIcon, + alt: 'popup marker name: ' + 'Business Center Andromeda'} + ).addTo(mapRef.current).bindPopup('Business Center Andromeda') }, [markerPosition, customIcon]) const geoJsonRef = useRef(null) diff --git a/leaflet-js-intg/app/components/map-next.jsx b/leaflet-js-intg/app/components/map-next.jsx index 5e4c0a1..eeeb7c3 100644 --- a/leaflet-js-intg/app/components/map-next.jsx +++ b/leaflet-js-intg/app/components/map-next.jsx @@ -43,7 +43,10 @@ export default function MapNxt() { map.scrollWheelZoom.disable() L.Marker.prototype.options.icon = DefaultIcon; - var marker = L.marker([51.5, -0.09]).addTo(map); + var marker = L.marker( + [51.5, -0.09], + {alt: 'popup marker name: ' + "Hello world! I am a popup."} + ).addTo(map); marker.bindPopup("Hello world!
I am a popup.").openPopup(); }, []); diff --git a/leaflet-js-intg/app/components/map-nxt.jsx b/leaflet-js-intg/app/components/map-nxt.jsx index e7baafa..e153175 100644 --- a/leaflet-js-intg/app/components/map-nxt.jsx +++ b/leaflet-js-intg/app/components/map-nxt.jsx @@ -41,7 +41,10 @@ export default function Map() { map.scrollWheelZoom.disable() L.Marker.prototype.options.icon = DefaultIcon; - var marker = L.marker([51.5, -0.09]).addTo(map); + var marker = L.marker( + [51.5, -0.09], + {alt: 'popup marker name: ' + "Hello world! I am a popup."} + ).addTo(map); marker.bindPopup("Hello world!
I am a popup.").openPopup(); // unmount map function diff --git a/leaflet-js-intg/app/components/map.jsx b/leaflet-js-intg/app/components/map.jsx index 39c3b82..65d4a37 100644 --- a/leaflet-js-intg/app/components/map.jsx +++ b/leaflet-js-intg/app/components/map.jsx @@ -68,7 +68,11 @@ export default function Map() { if(markerRef.current) { markerRef.current.setLatLng(markerPosition) } else { - markerRef.current = L.marker(markerPosition, {icon:customIcon }).addTo(mapRef.current).bindPopup('Business Center Andromeda') + markerRef.current = L.marker( + markerPosition, + {icon:customIcon, + alt: 'popup marker name: ' + 'Business Center Andromeda'} + ).addTo(mapRef.current).bindPopup('Business Center Andromeda') } // unmount map function //You should unmount the function in react.js to remove the existing map.