feat(leaflet-js-intg) add layer control according to https://leafletjs.com/examples/layers-control/

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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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,
+	    "<span style='color: red'>OpenStreetMap.HOT</span>": 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){

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: <b>' + value.name + '</b><br />lat: ' + value.lat + '<br />lon: ' + value.lon;
 	    marker.bindPopup(popupText);
 	});

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());

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)

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("<b>Hello world!</b><br>I am a popup.").openPopup();
     }, []);
 

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("<b>Hello world!</b><br>I am a popup.").openPopup();
 
 	// unmount map function

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.