Merge pull request #3 from sbruggmann/multiple-markers

New Features: - Multiple markers via GeoJSON - Tooltip - Popup
webexcess · Jun 7, 2019 · b9e839c · b9e839c
2 parents 2aa76e8 + 93a5d1c
commit b9e839c
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -66,7 +66,9 @@ It's best practice to include them in your custom builds and remove the default
 **Simple**
 
 	map = WebExcess.OpenStreetMap:Map.Component {
-	  address = ${'Talisker Distillery, Carbost, Scotland'}
+	  address = 'Talisker Distillery, Carbost, Scotland'
+	  tooltip = 'Talisker Distillery'
+	  popup = 'Also have a look at <a href=\\"https:\/\/unsplash.com\/search\/photos\/talisker-bay\\" target=\\"_blank\\">Talisker Bay<\/a>.'
 	}
 
 **Advanced**
@@ -82,6 +84,20 @@ It's best practice to include them in your custom builds and remove the default
 	  }
 	}
 
+**GeoJSON**
+
+inline with multiple markers..
+
+	map = WebExcess.OpenStreetMap:Map.Component {
+	  json = '[{"type":"Feature","properties":{"tooltip":"Talisker Distillery"},"geometry":{"type":"Point","coordinates":[-6.356159,57.302387]}},{"type":"Feature","properties":{"popup":"Talisker Bay<br \/>&raquo; <a href=\\"https:\/\/unsplash.com\/search\/photos\/talisker-bay\\" target=\\"_blank\\">Photos<\/a>"},"geometry":{"type":"Point","coordinates":[-6.456646,57.283313]}}]'
+	}
+
+or with an external source..
+
+	map = WebExcess.OpenStreetMap:Map.Component {
+	  json = '/talisker-geo.json'
+	}
+
 **EEL Helper**
 
 	Geocode.latLonFromAddress('Talisker Distillery, Carbost, Scotland')

diff --git a/Resources/Private/Assets/Main.js b/Resources/Private/Assets/Main.js
@@ -117,9 +117,43 @@ window.initOpenStreetMap = function() {
 
         var lat = mapContainer.getAttribute('data-lat');
         var lng = mapContainer.getAttribute('data-lon');
+        var popup = mapContainer.getAttribute('data-popup');
+        var tooltip = mapContainer.getAttribute('data-tooltip');
         if (lat && lng) {
             maps[mapId].setView(L.latLng(lat, lng), 15);
-            L.marker([lat, lng]).addTo(maps[mapId]);
+            var marker = L.marker([lat, lng]);
+            if (popup) {
+                marker.bindPopup(popup);
+            }
+            if (tooltip) {
+                marker.bindTooltip(tooltip);
+            }
+            marker.addTo(maps[mapId]);
+        }
+
+        var geoJson = mapContainer.getAttribute('data-json');
+        if (geoJson) {
+            try {
+                var geoJsonObject = {};
+                if (geoJson.indexOf('http') === 0 || geoJson.substr(0, 1) === '/') {
+
+                    var request = new XMLHttpRequest();
+                    request.open('GET', geoJson, true);
+                    request.onload = function () {
+                        if (request.status >= 200 && request.status < 400) {
+                            geoJsonObject = JSON.parse(request.responseText.trim());
+                            window.addOpenStreetMapGeoJSON(maps[mapId], geoJsonObject);
+                        }
+                    };
+                    request.send();
+
+                } else {
+                    geoJsonObject = JSON.parse(geoJson);
+                    window.addOpenStreetMapGeoJSON(maps[mapId], geoJsonObject);
+                }
+            } catch (e) {
+                console.log(e);
+            }
         }
 
         setInterval(function () {
@@ -128,4 +162,22 @@ window.initOpenStreetMap = function() {
     }
 };
 
+window.addOpenStreetMapGeoJSON = function(mapElement, geoJsonObject) {
+    var geojsonLayer = L.geoJSON(geoJsonObject, {
+        pointToLayer: function(geoJsonPoint, latlng) {
+            var marker = L.marker(latlng);
+            if (geoJsonPoint.properties.popup) {
+                marker.bindPopup(geoJsonPoint.properties.popup);
+            }
+            if (geoJsonPoint.properties.tooltip) {
+                marker.bindTooltip(geoJsonPoint.properties.tooltip);
+            }
+            return marker;
+        }
+    }).addTo(mapElement);
+    mapElement.fitBounds(geojsonLayer.getBounds(), {
+        padding: [100, 100]
+    });
+};
+
 window.addEventListener('load', initOpenStreetMap);
diff --git a/Resources/Private/Fusion/Components/Map.fusion b/Resources/Private/Fusion/Components/Map.fusion
@@ -37,6 +37,15 @@ prototype(WebExcess.OpenStreetMap:Map.Component) < prototype(Neos.Fusion:Compone
     defaultLon = ${Configuration.setting('WebExcess.OpenStreetMap.lon')}
     lonRenderer = ${this.lon ? this.lon : (this.latLonRenderer ? this.latLonRenderer.lon : this.defaultLon)}
 
+    tooltip = null
+    tooltipRenderer = ${this.tooltip ? this.tooltip : null}
+
+    popup = null
+    popupRenderer = ${this.popup ? this.popup : null}
+
+    json = null
+    jsonRenderer = ${this.json ? this.json : null}
+
     renderer = Neos.Fusion:Tag {
         attributes {
             class = 'webexcess-openstreetmap'
@@ -56,6 +65,9 @@ prototype(WebExcess.OpenStreetMap:Map.Component) < prototype(Neos.Fusion:Compone
                     data-max-zoom = ${props.maxZoomRenderer}
                     data-lat = ${props.latRenderer}
                     data-lon = ${props.lonRenderer}
+                    data-tooltip = ${props.tooltipRenderer}
+                    data-popup = ${props.popupRenderer}
+                    data-json = ${props.jsonRenderer}
                     data-map-options = ${props.mapOptionsRenderer}
                 }
             }

diff --git a/Resources/Public/Assets/Main.js b/Resources/Public/Assets/Main.js