diff --git a/leaflet-js-intg/app/components/map-array.jsx b/leaflet-js-intg/app/components/map-array.jsx
new file mode 100644
index 0000000..a8fc8be
--- /dev/null
+++ b/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: '© OpenStreetMap 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: ' + value.name + '
lat: ' + value.lat + '
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 (
+
MapArray loading...
+ > + ); + } + +}; +//https://github.com/azaharyan/react-leaflet-example diff --git a/leaflet-js-intg/app/pages/home.jsx b/leaflet-js-intg/app/pages/home.jsx index b13395a..b1c5d5c 100644 --- a/leaflet-js-intg/app/pages/home.jsx +++ b/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 = () => {