Add markers POI layer

nrenner · Aug 19, 2019 · 66de1eb · 66de1eb
1 parent 11ccf51
commit 66de1eb
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 8 deletions.
diff --git a/js/index.js b/js/index.js
@@ -32,7 +32,7 @@
             sidebar,
             drawButton,
             deleteRouteButton,
-            drawToolbar,
+            poi,
             urlHash,
             saveWarningShown = false;
 
@@ -233,11 +233,18 @@
             trackMessages.update(track, segments);
 
             exportRoute.update(latLngs);
+
+            console.log('markers are', poi.getPoiMarkers());
         }
 
         routing.addTo(map);
         elevation.addBelow(map);
 
+        poi = new BR.poiMarkers({
+            layersControl: layersControl,
+            routing: routing
+        }).addTo(map);
+
         sidebar = BR.sidebar({
             defaultTabId: BR.conf.transit ? 'tab_itinerary' : 'tab_profile',
             listeningTabs: {
@@ -250,13 +257,7 @@
         }
 
         nogos.addTo(map);
-        L.easyBar([
-            drawButton,
-            reverseRouteButton,
-            nogos.getButton(),
-            deletePointButton,
-            deleteRouteButton
-        ]).addTo(map);
+        L.easyBar([drawButton, reverseRouteButton, nogos.getButton(), deletePointButton, deleteRouteButton]).addTo(map);
         nogos.preventRoutePointOnCreate(routing);
 
         if (BR.keys.strava) {
@@ -387,6 +388,8 @@
             });
     }
 
+    L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa';
+
     i18next
         .use(window.i18nextXHRBackend)
         .use(window.i18nextBrowserLanguageDetector)

diff --git a/js/plugin/POIMarkers.js b/js/plugin/POIMarkers.js
@@ -0,0 +1,73 @@
+BR.poiMarkers = L.Control.extend({
+    options: {
+        layersControl: null,
+        routing: null
+    },
+
+    onAdd: function(map) {
+        var thiz = this;
+
+        this.map = map;
+        this.markersLayer = L.layerGroup([]);
+
+        L.easyButton({
+            states: [
+                {
+                    stateName: 'activate-poi',
+                    icon: 'fa-hand-o-right',
+                    onClick: function(control) {
+                        control.state('deactivate-poi');
+                        map.on('click', thiz.onMapClick, thiz);
+                        thiz.options.routing.draw(false);
+                        L.DomUtil.addClass(map.getContainer(), 'routing-draw-enabled');
+                    },
+                    title: i18next.t('map.draw-poi-start')
+                },
+                {
+                    stateName: 'deactivate-poi',
+                    icon: 'fa-hand-o-right active',
+                    onClick: function(control) {
+                        control.state('activate-poi');
+                        map.off('click', thiz.onMapClick, thiz);
+                        L.DomUtil.removeClass(map.getContainer(), 'routing-draw-enabled');
+                    },
+                    title: i18next.t('map.draw-poi-stop')
+                }
+            ]
+        }).addTo(map);
+
+        this.options.layersControl.addOverlay(this.markersLayer, i18next.t('map.layer.poi-markers'));
+
+        return new L.DomUtil.create('div');
+    },
+
+    onMapClick: function(e) {
+        var markersLayer = this.markersLayer;
+        bootbox.prompt({
+            size: 'small',
+            title: i18next.t('map.enter-poi-name'),
+            callback: function(result) {
+                if (result !== null) {
+                    var icon = L.AwesomeMarkers.icon({
+                        icon: 'star',
+                        markerColor: 'red'
+                    });
+                    L.marker(e.latlng, { icon: icon })
+                        .bindPopup(result)
+                        .addTo(markersLayer);
+                }
+            }
+        });
+    },
+
+    getPoiMarkers: function() {
+        return this.markersLayer
+            .getLayers()
+            .map(it => {
+                var latlng = it._latlng;
+                var name = it._popup._content;
+                return latlng + ',' + name;
+            })
+            .join('|');
+    }
+});
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
         "leaflet-routing": "nrenner/leaflet-routing#dev",
         "leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
         "leaflet-triangle-marker": "^1.0.1",
+        "leaflet.awesome-markers": "^2.0.5",
         "leaflet.locatecontrol": "^0.60.0",
         "leaflet.snogylop": "^0.4.0",
         "leaflet.stravasegments": "2.3.2",
@@ -174,6 +175,13 @@
         "leaflet.stravasegments": {
             "main": "dist/index.js"
         },
+        "leaflet.awesome-markers": {
+            "main": [
+                "dist/leaflet.awesome-markers.js",
+                "dist/leaflet.awesome-markers.css",
+                "dist/images/*.png"
+            ]
+        },
         "font-awesome": {
             "main": [
                 "css/font-awesome.css",

diff --git a/yarn.lock b/yarn.lock
@@ -4009,6 +4009,11 @@ leaflet-triangle-marker@^1.0.1:
   resolved "https://registry.yarnpkg.com/leaflet-triangle-marker/-/leaflet-triangle-marker-1.0.1.tgz#0775ee4903c6c0b71b20023dfb295dfc026bc23d"
   integrity sha512-nK2Wtp5tUPwg9STrE78oKLQJvcDZTMU5i+4la1zhHZKZcjoTl9oVVd0f6keMx+wN70IiHsoDkHCFzIiVcCs9eQ==
 
+leaflet.awesome-markers@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/leaflet.awesome-markers/-/leaflet.awesome-markers-2.0.5.tgz#b7b0210d87e2566359bf478c1ab3ab07c7246f30"
+  integrity sha512-Ne/xDjkGyaujwNVVkv2tyXQUV0ZW7gZ0Mo0FuQY4jp2qWrvXi0hwDBvmZyF/8YOvybyMabTMM/mFWCTd1jZIQA==
+
 leaflet.locatecontrol@^0.60.0:
   version "0.60.0"
   resolved "https://registry.yarnpkg.com/leaflet.locatecontrol/-/leaflet.locatecontrol-0.60.0.tgz#fc7be657ca9b7e8b8ba7263e52b0bb902b7cd965"