test(leaflet-js-intg): add app/components/map-array.jsx test component

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

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from 'react'
+import L from 'leaflet'
+import "leaflet/dist/leaflet.css";
+import icon from "leaflet/dist/images/marker-icon.png";
+import iconShadow from "leaflet/dist/images/marker-shadow.png";
+
+let DefaultIcon = L.icon({
+iconUrl: icon,
+shadowUrl: iconShadow,
+});
+
+export default function MapArray( { array } ) {
+    console.log('map-array:MapArray: array.lngth: ' + array.length);
+
+    /*center map in the middle of RVB*/
+    const mapCenter = [52.16594, 10.52673];
+
+    const mapRef = useRef();
+
+    useEffect(() => {
+
+        const map = L.map(
+	    mapRef.current,
+	    {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 ) {
+
+	    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);
+	    const popupText ='name: <b>' + value.name + '</b><br />lat: ' + value.lat + '<br />lon: ' + value.lon;
+	    marker.bindPopup(popupText);
+	});
+
+	// unmount map function
+	//You should unmount the function in react.js to remove the existing map.
+	return () => map.remove();
+    }, []);    
+
+    if ( array !== undefined && array !== null && array.length > 0 ) {
+	return (
+            <div
+	    style={{padding: 0, margin: 0, width: "75%", height: "23vh",}}
+            ref={el => mapRef.current = el}>
+            </div>
+	);
+    }else{
+	//TODO Why does mapRef have to be present?
+	return (
+            <>
+		<div
+            ref={el => mapRef.current = el}>
+		</div>
+		<p>MapArray loading...</p>
+            </>
+	);
+    }
+
+};
+//https://github.com/azaharyan/react-leaflet-example

leaflet-js-intg/app/pages/home.jsx

@@ -8,8 +8,17 @@ import MapNext from '../components/map-next';
 import MapNxt from '../components/map-nxt';
 //TODO Why is this component not working?
 //import MapNxt2 from '../components/map-nxt2';
+import MapArray from '../components/map-array';
 import '../style.css';
 
+const array = [
+    {id: '1', lat: '52.2659474', lon: '10.43949', name: 'Software Ingenieur Begerad'},
+    {id: '3', lat: '53.5836365', lon: '10.015369', name: 'WTF Kooperative eG'},
+    {id: '4', lat: '48.0143619', lon: '7.8450213', name: 'WEtell GmbH'},
+    {id: '5', lat: '53.6388387', lon: '10.014872', name: 'Hostsharing eG'},
+    {id: '6', lat: '50.8320953', lon: '6.4719321', name: 'AfB gGmbH'}
+];
+
 const Home = () => {
     return (
 	<>
@@ -17,6 +26,8 @@ const Home = () => {
 	    <h3>(React.js Lambda Function Component)</h3>
 	    <Hello msg="Hello World!" />
 	    {/**<Map />*/}
+	    <MapArray array={ array } />
+	    <br />
 	    <MapNext />
 	    <br />
 	    <MapNxt />