adds feature to add custom markers for isochrones, adds temporary cir…

…cle markers for whats here message, closes #221, closes #216
GIScience · May 21, 2018 · b1122b1 · b1122b1
1 parent 3bb4a7b
commit b1122b1
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 4 deletions.
diff --git a/app/components/ors-map/directive-templates/ors-aa-popup.html b/app/components/ors-map/directive-templates/ors-aa-popup.html
@@ -1,2 +1,4 @@
 <div class="cm-popup-option" ng-click="add(0)" ng-bind-html="('CENTER' | translate)">
+</div>
+<div class="cm-popup-option" ng-click="addMarker()" ng-bind-html="('ADD_MARKER' | translate)">
 </div>
diff --git a/app/components/ors-map/ors-map.js b/app/components/ors-map/ors-map.js
@@ -7,7 +7,7 @@ angular.module('orsApp')
                 orsMap: '='
             },
             link: (scope, element, attrs) => {},
-            controller: ['$scope', '$filter', '$compile', '$timeout', '$window', 'orsSettingsFactory', 'orsLocationsService', 'orsObjectsFactory', 'orsRequestService', 'orsUtilsService', 'orsMapFactory', 'orsCookiesFactory', 'lists', 'globals', 'mappings', 'orsNamespaces', ($scope, $filter, $compile, $timeout, $window, orsSettingsFactory, orsLocationsService, orsObjectsFactory, orsRequestService, orsUtilsService, orsMapFactory, orsCookiesFactory, lists, globals, mappings, orsNamespaces) => {
+            controller: ['$scope', '$filter', '$compile', '$timeout', '$window', 'orsSettingsFactory', 'orsLocationsService', 'orsObjectsFactory', 'orsRequestService', 'orsMessagingService', 'orsUtilsService', 'orsMapFactory', 'orsCookiesFactory', 'lists', 'globals', 'mappings', 'orsNamespaces', ($scope, $filter, $compile, $timeout, $window, orsSettingsFactory, orsLocationsService, orsObjectsFactory, orsRequestService, orsMessagingService, orsUtilsService, orsMapFactory, orsCookiesFactory, lists, globals, mappings, orsNamespaces) => {
                 $scope.translateFilter = $filter('translate');
                 const mapsurfer = L.tileLayer(orsNamespaces.layerMapSurfer.url, {
                     attribution: orsNamespaces.layerMapSurfer.attribution,
@@ -62,6 +62,7 @@ angular.module('orsApp')
                     layerRouteDrag: L.featureGroup(),
                     layerLandmarks: L.featureGroup(),
                     layerLandmarksEmph: L.featureGroup(),
+                    layerHereMarkers: L.featureGroup(),
                     layerLocations: new L.MarkerClusterGroup({
                         showCoverageOnHover: false,
                         disableClusteringAtZoom: 14,
@@ -74,7 +75,8 @@ angular.module('orsApp')
                             }, // for hiding the markers
                         }
                     }),
-                    layerTmcMarker: L.featureGroup()
+                    layerTmcMarker: L.featureGroup(),
+                    layerCustomMarkers: L.featureGroup()
                 };
                 $scope.mapModel = {
                     map: $scope.orsMap,
@@ -294,6 +296,7 @@ angular.module('orsApp')
                         }
                     });
                     $scope.mapModel.geofeatures.layerRoutePoints.addTo($scope.mapModel.map);
+                    $scope.mapModel.geofeatures.layerCustomMarkers.addTo($scope.mapModel.map);
                     $scope.mapModel.geofeatures.layerRouteLines.addTo($scope.mapModel.map);
                     $scope.mapModel.geofeatures.layerRouteNumberedMarkers.addTo($scope.mapModel.map);
                     $scope.mapModel.geofeatures.layerAvoid.addTo($scope.mapModel.map);
@@ -306,6 +309,7 @@ angular.module('orsApp')
                     $scope.mapModel.geofeatures.layerRouteDrag.addTo($scope.mapModel.map);
                     $scope.mapModel.geofeatures.layerLandmarks.addTo($scope.mapModel.map);
                     $scope.mapModel.geofeatures.layerLandmarksEmph.addTo($scope.mapModel.map);
+                    $scope.mapModel.geofeatures.layerHereMarkers.addTo($scope.mapModel.map);
                     // add layer control
                     $scope.layerControls = L.control.layers($scope.baseLayers, $scope.overlays)
                         .addTo($scope.mapModel.map);
@@ -476,15 +480,33 @@ angular.module('orsApp')
                         $scope.processMapWaypoint(idx, pos, true, fireRequest);
                     });
                 };
+                // adds custom marker
+                $scope.addCustomMarker = (pos) => {
+                    let customMarkerIcon = L.divIcon(lists.customMarkerIcon);
+                    customMarkerIcon.options.html = '<i class="fa fa-map-marker"></i>';
+                    let customMarker = new L.marker(pos, {
+                        icon: customMarkerIcon
+                    });
+                    customMarker.addTo($scope.mapModel.geofeatures.layerCustomMarkers)
+                        .bindTooltip('@ ' + orsUtilsService.roundCoordinate(pos.lat) + ', ' + orsUtilsService.roundCoordinate(pos.lng), {
+                            permanent: true
+                        });
+                    console.log(customMarker)
+                    // close the popup
+                    $scope.mapModel.map.closePopup();
+                    console.log('adding', pos)
+                };
                 /** Clears the map
                  * @param {boolean} switchApp: Whether accessibility layer should be cleared
                  */
                 $scope.clearMap = (switchApp = false) => {
                     $scope.mapModel.map.closePopup();
                     $scope.mapModel.geofeatures.layerLocationMarker.clearLayers();
+                    $scope.mapModel.geofeatures.layerCustomMarkers.clearLayers();
                     $scope.mapModel.geofeatures.layerRouteLines.clearLayers();
                     $scope.mapModel.geofeatures.layerEmph.clearLayers();
                     $scope.mapModel.geofeatures.layerRouteExtras.clearLayers();
+                    $scope.mapModel.geofeatures.layerHereMarkers.clearLayers();
                     $scope.mapModel.geofeatures.layerRouteDrag.clearLayers();
                     $scope.mapModel.geofeatures.layerLandmarks.clearLayers();
                     $scope.mapModel.geofeatures.layerLandmarksEmph.clearLayers();
@@ -1015,6 +1037,7 @@ angular.module('orsApp')
                     return div;
                 };
                 $scope.showHereMessage = (pos) => {
+                    $scope.mapModel.geofeatures.layerHereMarkers.clearLayers();
                     $scope.mapModel.map.closePopup();
                     const lngLatString = orsUtilsService.parseLngLatString(pos);
                     const latLngString = orsUtilsService.parseLatLngString(pos);
@@ -1037,6 +1060,17 @@ angular.module('orsApp')
                         $scope.address.lngLat = lngLatString;
                         $scope.address.latLng = latLngString;
                         $scope.mapModel.map.addControl($scope.hereControl);
+                        // add temporary circle marker
+                        var circleMarkerOptions = {
+                            radius: 5,
+                            fillColor: "#FFF",
+                            color: "#000",
+                            weight: 2,
+                            opacity: 1,
+                            fillOpacity: 0.8
+                        };
+                        L.circleMarker(pos, circleMarkerOptions)
+                            .addTo($scope.mapModel.geofeatures.layerHereMarkers);
                     }, (response) => {
                         orsMessagingService.messageSubject.onNext(lists.errors.GEOCODE);
                     });
@@ -1473,6 +1507,10 @@ angular.module('orsApp')
                     //fourth argument to not fire a request on add waypoint
                     scope.processMapWaypoint(idx, scope.displayPos, false, false);
                 };
+                //add custom marker
+                scope.addMarker = () => {
+                    scope.addCustomMarker(scope.displayPos);
+                };
             }
         };
     }]);

diff --git a/app/constants/lists.js b/app/constants/lists.js
@@ -44,6 +44,11 @@ angular.module('orsApp')
                 className: "ors-marker-hover-drag",
             }
         },
+        customMarkerIcon: {
+            className: "ors-marker-custom",
+            iconSize: [45, 45],
+            iconAnchor: [22, 45]
+        },
         landmarkIcon: {
             className: "ors-marker-landmark",
             iconSize: [45, 45],

diff --git a/app/less/ors-leaflet.less b/app/less/ors-leaflet.less
@@ -128,7 +128,7 @@ a.leaflet-fullwidth:before {
     cursor: pointer;
 }
 
-.ors-marker-start, .ors-marker-via, .ors-marker-end, .ors-marker-location, .ors-marker-highlight, .ors-marker-hover {
+.ors-marker-start, .ors-marker-via, .ors-marker-end, .ors-marker-custom, .ors-marker-location, .ors-marker-highlight, .ors-marker-hover {
     text-align: center;
     line-height: 100%;
 }
@@ -143,7 +143,7 @@ a.leaflet-fullwidth:before {
     background: @orsColor;
 }
 
-.ors-marker-start i, .ors-marker-via i, .ors-marker-end i, .ors-marker-location i {
+.ors-marker-start i, .ors-marker-via i, .ors-marker-end i, .ors-marker-custom i, .ors-marker-location i {
     width: 100%;
     height: 100%;
     font-size: 40px;
@@ -182,6 +182,9 @@ a.leaflet-fullwidth:before {
     -webkit-text-fill-color: @markerEndColor;
 }
 
+.ors-marker-custom i {
+     -webkit-text-fill-color: @markerCustomColor;
+}
 .ors-marker-location i {
     -webkit-text-fill-color: @blueColor;
 }

diff --git a/app/less/variables.less b/app/less/variables.less
@@ -13,6 +13,7 @@
 @whiteColor: #fff;
 @blueColor: #00B5AD;
 @markerEndColor: #d83f31;
+@markerCustomColor: orange;
 @markerViaColor: orange;
 @markerStartColor: #638e26;
 @markerHighlightColor: #444;