From 7d0a7b043f80cb2649c9d5743698ae16018b7a72 Mon Sep 17 00:00:00 2001 From: TimMcCauley Date: Sun, 20 May 2018 19:06:58 -0700 Subject: [PATCH] adds leaflet control to show or hide left menu, closes #183 --- app/components/ors-map/ors-map.js | 73 +++++++++++++++++++++---------- app/index.html | 1 + app/js/app.js | 2 +- app/less/ors-leaflet.less | 10 ++++- 4 files changed, 60 insertions(+), 26 deletions(-) diff --git a/app/components/ors-map/ors-map.js b/app/components/ors-map/ors-map.js index f57fe1c7..a60156a3 100755 --- a/app/components/ors-map/ors-map.js +++ b/app/components/ors-map/ors-map.js @@ -103,6 +103,30 @@ angular.module('orsApp') position: "bottomright", mappings: mappings }); + /* FULLWIDTH CONTROLLER */ + L.FullwidthControl = L.Control.extend({ + options: { + position: 'topleft' + }, + onAdd: function(map) { + var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control', container), + link = L.DomUtil.create('a', 'leaflet-fullwidth', container); + link.href = '#'; + link.title = 'Hide/show menu'; + L.DomEvent.on(link, 'click', L.DomEvent.stop) + .on(link, 'click', function() { + let orsLeft = document.getElementsByClassName("ors-left"); + orsLeft = angular.element(orsLeft); + if (orsLeft.css('display') == 'none') { + orsLeft.show(); + } else { + orsLeft.hide(); + } + map.invalidateSize(); + }); + return container; + } + }); $scope.zoomControl = new L.Control.Zoom({ position: 'topright' }) @@ -217,6 +241,7 @@ angular.module('orsApp') const el = angular.element(document.querySelector('.js-toggle')) .empty(); $scope.mapModel.map.addControl(new L.NewPolygonControl()); + $scope.mapModel.map.addControl(new L.FullwidthControl()); const deleteShape = function(e) { if ((e.originalEvent.altKey || e.originalEvent.metaKey) && this.editEnabled()) { this.editor.deleteShapeAt(e.latlng); @@ -590,7 +615,8 @@ angular.module('orsApp') if (feature.properties['osm_tags'].name) popupContent += '' + feature.properties['osm_tags'].name + '
'; // use category_name with space instead of underscore if no name tag available else { - let noUnderscoreName = cIds[Object.keys(cIds)[0]].category_name.split('_').join(' '); + let noUnderscoreName = cIds[Object.keys(cIds)[0]].category_name.split('_') + .join(' '); popupContent += '' + noUnderscoreName + ''; feature.properties['noUnderscoreName'] = noUnderscoreName; } @@ -643,38 +669,37 @@ angular.module('orsApp') $scope.addLandmark = (actionPackage) => { const onEachFeature = (feature, layer) => { let popupContent = ''; - var type = feature.properties.type.charAt(0).toUpperCase() + feature.properties.type.replace(/_/g, ' ').slice(1); - + var type = feature.properties.type.charAt(0) + .toUpperCase() + feature.properties.type.replace(/_/g, ' ') + .slice(1); if (feature.properties.name && feature.properties.name !== 'Unknown') { popupContent = '' + feature.properties.name + ''; popupContent += '
' + type; } else { popupContent = '' + type + ''; } - popupContent += '
Source: © OpenStreetMap-Contributors'; - layer.bindPopup(popupContent, { className: 'location-popup' }); }; let geojson = L.geoJson(actionPackage.geometry, { - pointToLayer: function(feature, latlng) { - let landmarksIcon = null; - if (actionPackage.style) { - landmarksIcon = L.divIcon(actionPackage.style); - } else { - landmarksIcon = L.divIcon(lists.landmarkIcon); - } - landmarksIcon.options.html = '' + lists.landmark_icons[feature.properties.type] + ''; - //locationsIcon.options.html = lists.landmark_icons[feature.properties.type];//''; - return L.marker(latlng, { - icon: landmarksIcon, - draggable: 'false' - }); - }, - onEachFeature: onEachFeature - }) + pointToLayer: function(feature, latlng) { + let landmarksIcon = null; + if (actionPackage.style) { + landmarksIcon = L.divIcon(actionPackage.style); + } else { + landmarksIcon = L.divIcon(lists.landmarkIcon); + } + landmarksIcon.options.html = '' + lists.landmark_icons[feature.properties.type] + ''; + //locationsIcon.options.html = lists.landmark_icons[feature.properties.type];//''; + return L.marker(latlng, { + icon: landmarksIcon, + draggable: 'false' + }); + }, + onEachFeature: onEachFeature + }) .addTo($scope.mapModel.geofeatures[actionPackage.layerCode]); }; /** @@ -928,13 +953,13 @@ angular.module('orsApp') * @param {number} iso.idx - The isochrone index * @param {number} iso.opacity - The opacity of the isochrone in percent */ - $scope.$on('isoOpacityChange', function (event, iso) { + $scope.$on('isoOpacityChange', function(event, iso) { // 'isochronesPane0' for first isochrone, 'isochronesPane1' for second etc. let paneName = "isochronesPane" + iso.idx.toString(); let currentPanes = $scope.mapModel.map.getPanes(); let svg = d3.select(currentPanes[paneName]); - svg.style("opacity", iso.opacity/100); - }); + svg.style("opacity", iso.opacity / 100); + }); /** * clears layer entirely or specific layer in layer */ diff --git a/app/index.html b/app/index.html index e6b8f2fe..5e6e0095 100755 --- a/app/index.html +++ b/app/index.html @@ -78,6 +78,7 @@
+
diff --git a/app/js/app.js b/app/js/app.js index 584c73d1..2d4c6eef 100755 --- a/app/js/app.js +++ b/app/js/app.js @@ -9,7 +9,7 @@ *| http://www.giscience.uni-hd.de *|------------------------------------------------------------------------------------*/ /** - * @author: Amandus Butzer, amandus@openrouteservice.org, Timothy Ellersiek, timothy@openrouteservice.de, Hendrik Leuschner, hendrik@openrouteservice.de + * @author: Amandus Butzer, amandus@openrouteservice.org, Timothy Ellersiek, timothy@openrouteservice.org * @version: 0.2.9 */ (function() { diff --git a/app/less/ors-leaflet.less b/app/less/ors-leaflet.less index 3640353e..dd06dbbf 100755 --- a/app/less/ors-leaflet.less +++ b/app/less/ors-leaflet.less @@ -81,7 +81,7 @@ div.leaflet-control-measure.leaflet-control { box-shadow: @leafletPopupShadow; } -a.leaflet-control-layers-toggle, a.leaflet-avoid-area, div.leaflet-control-measure>a { +a.leaflet-control-layers-toggle, a.leaflet-avoid-area, a.leaflet-fullwidth, div.leaflet-control-measure>a { position: relative; text-align: center; background-image: none !important; @@ -116,6 +116,14 @@ a.leaflet-avoid-area:before { text-align: center; } +a.leaflet-fullwidth:before { + content: "\f07e"; + font-family: @fa; + display: inline-block; + cursor: pointer; + text-align: center; +} + .angular-control-leaflet { cursor: pointer; }