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,35 +8,39 @@ export default function Map1kCircleFixed() {
 
     useEffect(() => {
 
-	//layer
+	//base layer
-	const layerOsm = L.tileLayer(
+	const baseLayerOsm = 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,
 	    });
-	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.');
+	      golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
-	var layerCities = L.layerGroup([littleton, denver, aurora, golden]);
+	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": baseLayerOsm,
-	    "<span style='color: red'>OpenStreetMap.HOT</span>": layerOsmHot
+	    "<span style='color: red'>OpenStreetMap.HOT</span>": baseLayerOsmHot
 	};
 	var overlayMaps = {
-	    "Cities": layerCities
+	    "Cities": overlayCity
 	};
 	var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
 

leaflet-js-intg/app/components/map-array.jsx

@@ -20,34 +20,54 @@ export default function MapArray( { array } ) {
 
     useEffect(() => {
 
-        const map = L.map(
+	//base layer
-	    mapRef.current,
+	const baseLayerOsm = L.tileLayer(
-	    {attributionControl: true}
-	).setView(
-	    mapCenter,
-	    6
-	);
-
-	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);
+	    }
+	);
 
-	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}
+		{alt: 'marker name: ' + value.name}
-	    ).addTo(map);
+	    );
 	    const popupText ='name: <b>' + value.name + '</b><br />lat: ' + value.lat + '<br />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.

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 &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
@@ -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],