From ef8ad69506019218184b9a7c77166ec8243cf37f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Sun, 2 May 2021 12:23:37 +0200 Subject: [PATCH 1/9] organised Leaflet map and Google Maps into wrappers --- public/static/img/markers/m1.png | 3 + public/static/img/markers/m2.png | 3 + public/static/img/markers/m3.png | 3 + public/static/img/markers/m4.png | 3 + public/static/img/markers/m5.png | 3 + public/static/js/map_editor.js | 310 +++++++++++++++++++++++-------- views/admin/map_editor.php | 1 + 7 files changed, 248 insertions(+), 78 deletions(-) create mode 100644 public/static/img/markers/m1.png create mode 100644 public/static/img/markers/m2.png create mode 100644 public/static/img/markers/m3.png create mode 100644 public/static/img/markers/m4.png create mode 100644 public/static/img/markers/m5.png diff --git a/public/static/img/markers/m1.png b/public/static/img/markers/m1.png new file mode 100644 index 0000000..82878cb --- /dev/null +++ b/public/static/img/markers/m1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5118720be739d6eaaa6c5e9dfce3c6ba3f15838ba5aa5dfec6687bc24bc4413e +size 3003 diff --git a/public/static/img/markers/m2.png b/public/static/img/markers/m2.png new file mode 100644 index 0000000..496bb3a --- /dev/null +++ b/public/static/img/markers/m2.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1ce96fbdfb658c7f14701d93e70b8c7f46cdf10ea8e797b016234fffccbc0171 +size 3259 diff --git a/public/static/img/markers/m3.png b/public/static/img/markers/m3.png new file mode 100644 index 0000000..2ff0fe7 --- /dev/null +++ b/public/static/img/markers/m3.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c96a9b48cf0552997f5441b091c62a4389169af4d73f986b3d59c3d938e7a787 +size 3956 diff --git a/public/static/img/markers/m4.png b/public/static/img/markers/m4.png new file mode 100644 index 0000000..af756d0 --- /dev/null +++ b/public/static/img/markers/m4.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5c01ee5f7e1f833c80f2404f95b90840a702f12db8ae7fa8e8dbb0dec7e73a42 +size 5705 diff --git a/public/static/img/markers/m5.png b/public/static/img/markers/m5.png new file mode 100644 index 0000000..af50f44 --- /dev/null +++ b/public/static/img/markers/m5.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:67835702e2a302a178bb6de042ae860e30df5bb41d6f6853902d879ad8bd4ac6 +size 6839 diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js index 097b0d8..e966b73 100644 --- a/public/static/js/map_editor.js +++ b/public/static/js/map_editor.js @@ -7,7 +7,6 @@ description: null }, map: null, - markers: null, panorama: null, selectedMarker: null, added: {}, @@ -124,10 +123,7 @@ MapEditor.panorama.setVisible(false); if (marker.placeId) { - MapEditor.markers.removeLayer(MapEditor.selectedMarker); - MapEditor.map.addLayer(MapEditor.selectedMarker); - marker.setIcon(IconCollection.iconBlue); - marker.setZIndexOffset(2000); + MapEditor.map.changeMarkerIcon(marker, MapEditor.map.iconCollection.iconBlue); document.getElementById('deleteButton').style.display = 'block'; @@ -165,13 +161,13 @@ var placeId = MapEditor.selectedMarker.placeId if (places[placeId].id && !del) { - MapEditor.map.removeLayer(MapEditor.selectedMarker); - MapEditor.markers.addLayer(MapEditor.selectedMarker); - MapEditor.selectedMarker.setIcon(places[placeId].noPano ? IconCollection.iconRed : IconCollection.iconGreen); - MapEditor.selectedMarker.setZIndexOffset(1000); + MapEditor.map.changeMarkerIcon( + MapEditor.selectedMarker, + places[placeId].noPano ? MapEditor.map.iconCollection.iconRed : MapEditor.map.iconCollection.iconGreen + ); } else { delete places[placeId]; - MapEditor.map.removeLayer(MapEditor.selectedMarker); + MapEditor.map.removeMarker(MapEditor.selectedMarker); } document.getElementById('deleteButton').style.display = 'none'; @@ -310,42 +306,9 @@ var placeId = addedPlaces[i].id; places[tempId].id = placeId; } - }, - - // TODO: check whether marker is already existing on the map for the coordinates - // or alternatively block saving for matching coordinates - placeMarker: function (latlng) { - var marker = L.marker(latlng, { - icon: IconCollection.iconBlue, - zIndexOffset: 2000 - }) - .addTo(MapEditor.map) - .on('click', function () { - MapEditor.select(this); - }); - - MapEditor.select(marker); } }; - var IconCollection = { - iconGreen: L.icon({ - iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION, - iconSize: [24, 32], - iconAnchor: [12, 32] - }), - iconRed: L.icon({ - iconUrl: STATIC_ROOT + '/img/markers/marker-red.svg?rev=' + REVISION, - iconSize: [24, 32], - iconAnchor: [12, 32] - }), - iconBlue: L.icon({ - iconUrl: STATIC_ROOT + '/img/markers/marker-blue.svg?rev=' + REVISION, - iconSize: [24, 32], - iconAnchor: [12, 32] - }), - }; - var Util = { getHighResData: function () { if (window.devicePixelRatio >= 4) { @@ -384,52 +347,243 @@ } }; - MapEditor.map = L.map('map', { - zoomControl: false - }); + var LMapWrapper = { + map: null, + markers: null, + iconCollection: { + iconGreen: L.icon({ + iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION, + iconSize: [24, 32], + iconAnchor: [12, 32] + }), + iconRed: L.icon({ + iconUrl: STATIC_ROOT + '/img/markers/marker-red.svg?rev=' + REVISION, + iconSize: [24, 32], + iconAnchor: [12, 32] + }), + iconBlue: L.icon({ + iconUrl: STATIC_ROOT + '/img/markers/marker-blue.svg?rev=' + REVISION, + iconSize: [24, 32], + iconAnchor: [12, 32] + }) + }, - MapEditor.map.on('click', function (e) { - MapEditor.placeMarker(e.latlng); - }); + init: function (divId, places) { + LMapWrapper.map = L.map('map', { + zoomControl: false + }); - var highResData = Util.getHighResData(); + LMapWrapper.map.on('click', function (e) { + LMapWrapper.placeMarker(e.latlng); + }); - L.tileLayer(tileUrl, { - attribution: tileAttribution, - subdomains: '1234', - ppi: highResData.ppi, - tileSize: highResData.tileSize, - zoomOffset: highResData.zoomOffset, - minZoom: highResData.minZoom, - maxZoom: highResData.maxZoom - }).addTo(MapEditor.map); + var highResData = Util.getHighResData(); - MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east })); + L.tileLayer(tileUrl, { + attribution: tileAttribution, + subdomains: '1234', + ppi: highResData.ppi, + tileSize: highResData.tileSize, + zoomOffset: highResData.zoomOffset, + minZoom: highResData.minZoom, + maxZoom: highResData.maxZoom + }).addTo(LMapWrapper.map); - MapEditor.markers = L.markerClusterGroup({ - maxClusterRadius: 50 - }); + LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east })); - for (var placeId in places) { - if (!places.hasOwnProperty(placeId)) { - continue; + LMapWrapper.loadMarkers(places); + }, + + loadMarkers: function (places) { + + LMapWrapper.markers = L.markerClusterGroup({ + maxClusterRadius: 50 + }); + + for (var placeId in places) { + if (!places.hasOwnProperty(placeId)) { + continue; + } + + var place = places[placeId]; + + var marker = L.marker({ lat: place.lat, lng: place.lng }, { + icon: place.noPano ? LMapWrapper.iconCollection.iconRed : LMapWrapper.iconCollection.iconGreen, + zIndexOffset: 1000 + }) + .addTo(LMapWrapper.markers) + .on('click', function () { + MapEditor.select(this); + }); + + marker.placeId = place.id; + } + + LMapWrapper.map.addLayer(LMapWrapper.markers); + }, + + // TODO: check whether marker is already existing on the map for the coordinates + // or alternatively block saving for matching coordinates + placeMarker: function (latLng) { + var marker = L.marker(latLng, { + icon: LMapWrapper.iconCollection.iconBlue, + zIndexOffset: 2000 + }) + .addTo(LMapWrapper.map) + .on('click', function () { + MapEditor.select(this); + }); + + MapEditor.select(marker); + }, + + panTo: function (latLng) { + LMapWrapper.map.panTo(latLng); + }, + + invalidateSize: function (invalid) { + LMapWrapper.map.invalidateSize(invalid); + }, + + changeMarkerIcon: function (marker, icon) { + LMapWrapper.markers.removeLayer(marker); + LMapWrapper.map.addLayer(marker); + marker.setIcon(icon); + marker.setZIndexOffset(2000); + }, + + removeMarker: function (marker) { + LMapWrapper.map.removeLayer(marker); } + }; - var place = places[placeId]; + var GMapWrapper = { + map: null, + markers: null, + iconCollection: { + iconGreen: { + url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION, + scaledSize: new google.maps.Size(24, 32), // scaled size + origin: new google.maps.Point(0, 0), // origin + anchor: new google.maps.Point(12, 32) // anchor + }, + iconRed: { + url: STATIC_ROOT + '/img/markers/marker-red.svg?rev' + REVISION, + scaledSize: new google.maps.Size(24, 32), // scaled size + origin: new google.maps.Point(0, 0), // origin + anchor: new google.maps.Point(12, 32) // anchor + }, + iconBlue: { + url: STATIC_ROOT + '/img/markers/marker-blue.svg?rev' + REVISION, + scaledSize: new google.maps.Size(24, 32), // scaled size + origin: new google.maps.Point(0, 0), // origin + anchor: new google.maps.Point(12, 32) // anchor + } + }, - var marker = L.marker({ lat: place.lat, lng: place.lng }, { - icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen, - zIndexOffset: 1000 - }) - .addTo(MapEditor.markers) - .on('click', function () { + init: function (divId, places) { + GMapWrapper.map = new google.maps.Map(document.getElementById(divId), { + center: { lat: 48.2207779, lng: 16.3098489 }, + zoom: 2, + fullscreenControl: false, + zoomControl: true, + zoomControlOptions: { + position: google.maps.ControlPosition.LEFT_BOTTOM + }, + streetViewControl: true, + streetViewControlOptions: { + position: google.maps.ControlPosition.LEFT_BOTTOM + }, + draggableCursor: 'crosshair' + }); + + GMapWrapper.map.addListener('click', function (mapsMouseEvent) { + GMapWrapper.placeMarker({ + lat: mapsMouseEvent.latLng.lat(), + lng: mapsMouseEvent.latLng.lng() + }); + }); + + GMapWrapper.loadMarkers(places); + }, + + loadMarkers: function (places) { + GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], { + imagePath: STATIC_ROOT + '/img/markers/m', + imageExtension: 'png?rev' + REVISION + }); + + for (var placeId in places) { + if (!places.hasOwnProperty(placeId)) { + continue; + } + + var place = places[placeId]; + + var marker = new google.maps.Marker({ + position: { + lat: place.lat, + lng: place.lng + }, + icon: place.noPano ? GMapWrapper.iconCollection.iconRed : GMapWrapper.iconCollection.iconGreen + }); + + marker.getLatLng = function () { return { lat: this.getPosition().lat(), lng: this.getPosition().lng() } }; + marker.setLatLng = function (coords) { this.setPosition(coords) }; + + marker.addListener('click', function () { + MapEditor.select(this); + }); + + marker.placeId = place.id; + + GMapWrapper.markers.addMarker(marker); + } + }, + + // TODO: check whether marker is already existing on the map for the coordinates + // or alternatively block saving for matching coordinates + placeMarker: function (latLng) { + var marker = new google.maps.Marker({ + map: GMapWrapper.map, + position: latLng, + icon: GMapWrapper.iconCollection.iconBlue, + }); + + marker.getLatLng = function () { return { lat: this.getPosition().lat(), lng: this.getPosition().lng() } }; + marker.setLatLng = function (coords) { this.setPosition(coords) }; + + marker.addListener('click', function () { MapEditor.select(this); }); - marker.placeId = place.id; - } + GMapWrapper.markers.addMarker(marker); - MapEditor.map.addLayer(MapEditor.markers); + MapEditor.select(marker); + }, + + panTo: function (latLng) { + GMapWrapper.map.panTo(latLng); + }, + + invalidateSize: function (invalid) { + if (invalid) { + google.maps.event.trigger(GMapWrapper.map, 'resize'); + } + }, + + changeMarkerIcon: function (marker, icon) { + marker.setIcon(icon); + }, + + removeMarker: function (marker) { + GMapWrapper.markers.removeMarker(marker); + } + }; + + // MapEditor.map = LMapWrapper; + MapEditor.map = GMapWrapper; + MapEditor.map.init('map', places); MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { // switch off fullscreenControl because positioning doesn't work @@ -478,7 +632,7 @@ var coordinates = Util.extractCoordinates(coordinatesStr); if (coordinates.valid) { - MapEditor.placeMarker(coordinates.latlng); + MapEditor.map.placeMarker(coordinates.latlng); } }; @@ -491,7 +645,7 @@ jumpButton.disabled = false; if (e.key == 'Enter') { - MapEditor.placeMarker(coordinates.latlng); + MapEditor.map.placeMarker(coordinates.latlng); } } else { diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php index c6de87b..4a42eee 100644 --- a/views/admin/map_editor.php +++ b/views/admin/map_editor.php @@ -6,6 +6,7 @@ @js(node_modules/leaflet/dist/leaflet.js) @js(node_modules/leaflet.markercluster/dist/leaflet.markercluster.js) @js(https://maps.googleapis.com/maps/api/js?key=) +@js(https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js) @js(js/map_editor.js) @extends(templates/layout_full) From 0bb31cbe14d86eed548632ed2d7f10dd6ba63296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Sat, 1 May 2021 12:16:10 +0200 Subject: [PATCH 2/9] added switching functionality between maps in mapeditor --- public/static/css/map_editor.css | 22 ++++ public/static/img/map.svg | 4 + public/static/js/map_editor.js | 166 +++++++++++++++++++++---------- views/admin/map_editor.php | 6 ++ 4 files changed, 147 insertions(+), 51 deletions(-) create mode 100644 public/static/img/map.svg diff --git a/public/static/css/map_editor.css b/public/static/css/map_editor.css index 59f2315..87a0429 100644 --- a/public/static/css/map_editor.css +++ b/public/static/css/map_editor.css @@ -1,4 +1,5 @@ #map { + display: none; position: absolute; top: 0; left: 0; @@ -7,6 +8,27 @@ z-index: 1; } +#gmap { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; +} + +#mapSelection img { + display: inline; + width: 1em; + height: 1em; + vertical-align: -0.15em; + fill: #ffffff; +} + +#mapSelection img svg { + fill: #28a745; +} + /* modify the cursor for the Leaflet map */ .leaflet-container { cursor: crosshair; diff --git a/public/static/img/map.svg b/public/static/img/map.svg new file mode 100644 index 0000000..c4edd4f --- /dev/null +++ b/public/static/img/map.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js index e966b73..78f512c 100644 --- a/public/static/js/map_editor.js +++ b/public/static/js/map_editor.js @@ -305,6 +305,13 @@ var tempId = addedPlaces[i].tempId; var placeId = addedPlaces[i].id; places[tempId].id = placeId; + + places[placeId] = places[tempId]; + if(MapEditor.selectedMarker && MapEditor.selectedMarker.placeId === tempId) { + MapEditor.selectedMarker.placeId = placeId; + } + delete places[tempId]; + MapEditor.map.loadMarkers(places); } } }; @@ -350,6 +357,8 @@ var LMapWrapper = { map: null, markers: null, + divId: null, + loaded: false, iconCollection: { iconGreen: L.icon({ iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION, @@ -369,36 +378,53 @@ }, init: function (divId, places) { - LMapWrapper.map = L.map('map', { - zoomControl: false - }); + document.getElementById(divId).style.display = "block"; - LMapWrapper.map.on('click', function (e) { - LMapWrapper.placeMarker(e.latlng); - }); + if(LMapWrapper.loaded === true) { + LMapWrapper.invalidateSize(true); + } else { + LMapWrapper.divId = divId; + LMapWrapper.map = L.map(LMapWrapper.divId, { + zoomControl: false + }); - var highResData = Util.getHighResData(); + LMapWrapper.map.on('click', function (e) { + LMapWrapper.placeMarker(e.latlng); + }); - L.tileLayer(tileUrl, { - attribution: tileAttribution, - subdomains: '1234', - ppi: highResData.ppi, - tileSize: highResData.tileSize, - zoomOffset: highResData.zoomOffset, - minZoom: highResData.minZoom, - maxZoom: highResData.maxZoom - }).addTo(LMapWrapper.map); + var highResData = Util.getHighResData(); - LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east })); + L.tileLayer(tileUrl, { + attribution: tileAttribution, + subdomains: '1234', + ppi: highResData.ppi, + tileSize: highResData.tileSize, + zoomOffset: highResData.zoomOffset, + minZoom: highResData.minZoom, + maxZoom: highResData.maxZoom + }).addTo(LMapWrapper.map); + + LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east })); + } LMapWrapper.loadMarkers(places); + + LMapWrapper.loaded = true; + }, + + destruct: function() { + document.getElementById(LMapWrapper.divId).style.display = 'none'; + // LMapWrapper.divId = null; }, loadMarkers: function (places) { - - LMapWrapper.markers = L.markerClusterGroup({ - maxClusterRadius: 50 - }); + if(!LMapWrapper.markers) { + LMapWrapper.markers = L.markerClusterGroup({ + maxClusterRadius: 50 + }); + } else { + LMapWrapper.markers.clearLayers(); + } for (var placeId in places) { if (!places.hasOwnProperty(placeId)) { @@ -410,9 +436,9 @@ var marker = L.marker({ lat: place.lat, lng: place.lng }, { icon: place.noPano ? LMapWrapper.iconCollection.iconRed : LMapWrapper.iconCollection.iconGreen, zIndexOffset: 1000 - }) - .addTo(LMapWrapper.markers) - .on('click', function () { + }); + marker.addTo(LMapWrapper.markers) + marker.on('click', function () { MapEditor.select(this); }); @@ -446,8 +472,8 @@ }, changeMarkerIcon: function (marker, icon) { - LMapWrapper.markers.removeLayer(marker); - LMapWrapper.map.addLayer(marker); + //LMapWrapper.markers.removeLayer(marker); + //LMapWrapper.map.addLayer(marker); marker.setIcon(icon); marker.setZIndexOffset(2000); }, @@ -460,6 +486,8 @@ var GMapWrapper = { map: null, markers: null, + divId: null, + loaded: false, iconCollection: { iconGreen: { url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION, @@ -482,37 +510,58 @@ }, init: function (divId, places) { - GMapWrapper.map = new google.maps.Map(document.getElementById(divId), { - center: { lat: 48.2207779, lng: 16.3098489 }, - zoom: 2, - fullscreenControl: false, - zoomControl: true, - zoomControlOptions: { - position: google.maps.ControlPosition.LEFT_BOTTOM - }, - streetViewControl: true, - streetViewControlOptions: { - position: google.maps.ControlPosition.LEFT_BOTTOM - }, - draggableCursor: 'crosshair' - }); + document.getElementById(divId).style.display = "block"; - GMapWrapper.map.addListener('click', function (mapsMouseEvent) { - GMapWrapper.placeMarker({ - lat: mapsMouseEvent.latLng.lat(), - lng: mapsMouseEvent.latLng.lng() + if(GMapWrapper.loaded) { + GMapWrapper.invalidateSize(); + } else { + GMapWrapper.divId = divId; + GMapWrapper.map = new google.maps.Map(document.getElementById(GMapWrapper.divId), { + center: { lat: 0., lng: 0. }, + zoom: 2, + fullscreenControl: false, + zoomControl: true, + zoomControlOptions: { + position: google.maps.ControlPosition.LEFT_BOTTOM + }, + streetViewControl: true, + streetViewControlOptions: { + position: google.maps.ControlPosition.LEFT_BOTTOM + }, + draggableCursor: 'crosshair' }); - }); + + GMapWrapper.map.addListener('click', function (mapsMouseEvent) { + GMapWrapper.placeMarker({ + lat: mapsMouseEvent.latLng.lat(), + lng: mapsMouseEvent.latLng.lng() + }); + }); + + } GMapWrapper.loadMarkers(places); + + GMapWrapper.loaded = true; + }, + + destruct: function() { + // GMapWrapper.map = null; + // GMapWrapper.markers = null; + document.getElementById(GMapWrapper.divId).style.display = 'none'; + // GMapWrapper.divId = null; }, loadMarkers: function (places) { - GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], { - imagePath: STATIC_ROOT + '/img/markers/m', - imageExtension: 'png?rev' + REVISION - }); - + if(!GMapWrapper.markers) { + GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], { + imagePath: STATIC_ROOT + '/img/markers/m', + imageExtension: 'png?rev' + REVISION + }); + } else { + GMapWrapper.markers.clearMarkers(); + } + for (var placeId in places) { if (!places.hasOwnProperty(placeId)) { continue; @@ -583,7 +632,7 @@ // MapEditor.map = LMapWrapper; MapEditor.map = GMapWrapper; - MapEditor.map.init('map', places); + MapEditor.map.init('gmap', places); MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { // switch off fullscreenControl because positioning doesn't work @@ -653,4 +702,19 @@ } }; + document.getElementById('mapSelector').onclick = function() { + MapEditor.closePlace(); + MapEditor.map.destruct(); + + if(MapEditor.map === GMapWrapper) { + MapEditor.map = LMapWrapper; + MapEditor.map.init('map', places); + } else { + MapEditor.map = GMapWrapper; + MapEditor.map.init('gmap', places); + } + + + } + })(); diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php index 4a42eee..804c6a5 100644 --- a/views/admin/map_editor.php +++ b/views/admin/map_editor.php @@ -13,6 +13,11 @@ @section(subheader) + + @@ -59,6 +64,7 @@ @section(main)
+

No panorama is available for this location.

From 745bda11c002a2a3308dd8ea41db045ffb243782 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Sat, 1 May 2021 20:13:13 +0200 Subject: [PATCH 3/9] refactoring and bug fixing related to the map switching --- public/static/css/map_editor.css | 12 +------- public/static/js/map_editor.js | 48 ++++++++++---------------------- views/admin/map_editor.php | 6 ++-- 3 files changed, 19 insertions(+), 47 deletions(-) diff --git a/public/static/css/map_editor.css b/public/static/css/map_editor.css index 87a0429..9a3c59c 100644 --- a/public/static/css/map_editor.css +++ b/public/static/css/map_editor.css @@ -1,14 +1,4 @@ -#map { - display: none; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 1; -} - -#gmap { +.map { position: absolute; top: 0; left: 0; diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js index 78f512c..255f73f 100644 --- a/public/static/js/map_editor.js +++ b/public/static/js/map_editor.js @@ -235,6 +235,7 @@ delete MapEditor.added[placeId]; delete MapEditor.edited[placeId]; + delete places[placeId]; document.getElementById('added').innerHTML = String(Object.keys(MapEditor.added).length); document.getElementById('edited').innerHTML = String(Object.keys(MapEditor.edited).length); @@ -305,13 +306,6 @@ var tempId = addedPlaces[i].tempId; var placeId = addedPlaces[i].id; places[tempId].id = placeId; - - places[placeId] = places[tempId]; - if(MapEditor.selectedMarker && MapEditor.selectedMarker.placeId === tempId) { - MapEditor.selectedMarker.placeId = placeId; - } - delete places[tempId]; - MapEditor.map.loadMarkers(places); } } }; @@ -358,7 +352,6 @@ map: null, markers: null, divId: null, - loaded: false, iconCollection: { iconGreen: L.icon({ iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION, @@ -380,9 +373,7 @@ init: function (divId, places) { document.getElementById(divId).style.display = "block"; - if(LMapWrapper.loaded === true) { - LMapWrapper.invalidateSize(true); - } else { + if(!LMapWrapper.map) { LMapWrapper.divId = divId; LMapWrapper.map = L.map(LMapWrapper.divId, { zoomControl: false @@ -408,13 +399,10 @@ } LMapWrapper.loadMarkers(places); - - LMapWrapper.loaded = true; }, - destruct: function() { + hide: function() { document.getElementById(LMapWrapper.divId).style.display = 'none'; - // LMapWrapper.divId = null; }, loadMarkers: function (places) { @@ -436,13 +424,13 @@ var marker = L.marker({ lat: place.lat, lng: place.lng }, { icon: place.noPano ? LMapWrapper.iconCollection.iconRed : LMapWrapper.iconCollection.iconGreen, zIndexOffset: 1000 - }); - marker.addTo(LMapWrapper.markers) - marker.on('click', function () { + }) + .addTo(LMapWrapper.markers) + .on('click', function () { MapEditor.select(this); }); - marker.placeId = place.id; + marker.placeId = placeId; } LMapWrapper.map.addLayer(LMapWrapper.markers); @@ -455,7 +443,7 @@ icon: LMapWrapper.iconCollection.iconBlue, zIndexOffset: 2000 }) - .addTo(LMapWrapper.map) + .addTo(LMapWrapper.markers) .on('click', function () { MapEditor.select(this); }); @@ -472,14 +460,12 @@ }, changeMarkerIcon: function (marker, icon) { - //LMapWrapper.markers.removeLayer(marker); - //LMapWrapper.map.addLayer(marker); marker.setIcon(icon); marker.setZIndexOffset(2000); }, removeMarker: function (marker) { - LMapWrapper.map.removeLayer(marker); + LMapWrapper.markers.removeLayer(marker); } }; @@ -487,7 +473,6 @@ map: null, markers: null, divId: null, - loaded: false, iconCollection: { iconGreen: { url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION, @@ -512,9 +497,7 @@ init: function (divId, places) { document.getElementById(divId).style.display = "block"; - if(GMapWrapper.loaded) { - GMapWrapper.invalidateSize(); - } else { + if(!GMapWrapper.map) { GMapWrapper.divId = divId; GMapWrapper.map = new google.maps.Map(document.getElementById(GMapWrapper.divId), { center: { lat: 0., lng: 0. }, @@ -545,11 +528,8 @@ GMapWrapper.loaded = true; }, - destruct: function() { - // GMapWrapper.map = null; - // GMapWrapper.markers = null; + hide: function() { document.getElementById(GMapWrapper.divId).style.display = 'none'; - // GMapWrapper.divId = null; }, loadMarkers: function (places) { @@ -584,7 +564,7 @@ MapEditor.select(this); }); - marker.placeId = place.id; + marker.placeId = placeId; GMapWrapper.markers.addMarker(marker); } @@ -704,11 +684,11 @@ document.getElementById('mapSelector').onclick = function() { MapEditor.closePlace(); - MapEditor.map.destruct(); + MapEditor.map.hide(); if(MapEditor.map === GMapWrapper) { MapEditor.map = LMapWrapper; - MapEditor.map.init('map', places); + MapEditor.map.init('lmap', places); } else { MapEditor.map = GMapWrapper; MapEditor.map.init('gmap', places); diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php index 804c6a5..9a5691f 100644 --- a/views/admin/map_editor.php +++ b/views/admin/map_editor.php @@ -63,8 +63,10 @@ @endsection @section(main) -
-
+
+
+
+

No panorama is available for this location.

From e1eb0077b16de228016df0212a923041768d4e1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Sat, 1 May 2021 20:20:39 +0200 Subject: [PATCH 4/9] hide the map selection and jump to location elements on mobile view --- public/static/css/map_editor.css | 3 +++ views/admin/map_editor.php | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/public/static/css/map_editor.css b/public/static/css/map_editor.css index 9a3c59c..3336e50 100644 --- a/public/static/css/map_editor.css +++ b/public/static/css/map_editor.css @@ -77,6 +77,9 @@ #placeControl { top: calc(50% + 10px); } + .hideOnMobile { + display: none; + } } @media screen and (min-width: 1000px), (max-height: 599px) { diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php index 9a5691f..a7234c2 100644 --- a/views/admin/map_editor.php +++ b/views/admin/map_editor.php @@ -13,12 +13,12 @@ @section(subheader) + --> + --> + + + + diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js index a96eb7e..b2dab91 100644 --- a/public/static/js/map_editor.js +++ b/public/static/js/map_editor.js @@ -399,6 +399,8 @@ } LMapWrapper.loadMarkers(places); + + document.getElementById('streetViewCoverSelector').disabled = true; }, hide: function () { @@ -466,13 +468,17 @@ removeMarker: function (marker) { LMapWrapper.markers.removeLayer(marker); - } + }, + + toggleStreetViewCover: function () { } }; var GMapWrapper = { map: null, markers: null, divId: null, + streetViewCover: null, + streetViewCoverOn: false, iconCollection: { iconGreen: { url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION, @@ -514,6 +520,8 @@ draggableCursor: 'crosshair' }); + GMapWrapper.streetViewCover = new google.maps.StreetViewCoverageLayer(); + GMapWrapper.map.addListener('click', function (mapsMouseEvent) { GMapWrapper.placeMarker({ lat: mapsMouseEvent.latLng.lat(), @@ -525,7 +533,7 @@ GMapWrapper.loadMarkers(places); - GMapWrapper.loaded = true; + document.getElementById('streetViewCoverSelector').disabled = false; }, hide: function () { @@ -605,6 +613,16 @@ removeMarker: function (marker) { GMapWrapper.markers.removeMarker(marker); + }, + + toggleStreetViewCover: function () { + if (GMapWrapper.streetViewCoverOn) { + GMapWrapper.streetViewCover.setMap(null); + GMapWrapper.streetViewCoverOn = false; + } else { + GMapWrapper.streetViewCover.setMap(GMapWrapper.map); + GMapWrapper.streetViewCoverOn = true; + } } }; @@ -691,8 +709,10 @@ MapEditor.map = GMapWrapper; MapEditor.map.init('gmap', places); } + } - + document.getElementById('streetViewCoverSelector').onclick = function () { + MapEditor.map.toggleStreetViewCover(); } })(); diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php index a7234c2..1510b6d 100644 --- a/views/admin/map_editor.php +++ b/views/admin/map_editor.php @@ -18,6 +18,11 @@ Map Selector + + From 3045d8acbbf830f1fcf5c1fbc23bbc7cc6267d54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Sun, 2 May 2021 13:13:11 +0200 Subject: [PATCH 8/9] remove builtin streetViewControl from google map --- public/static/js/map_editor.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js index b2dab91..c72a638 100644 --- a/public/static/js/map_editor.js +++ b/public/static/js/map_editor.js @@ -399,7 +399,7 @@ } LMapWrapper.loadMarkers(places); - + document.getElementById('streetViewCoverSelector').disabled = true; }, @@ -513,10 +513,6 @@ zoomControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM }, - streetViewControl: true, - streetViewControlOptions: { - position: google.maps.ControlPosition.LEFT_BOTTOM - }, draggableCursor: 'crosshair' }); From 6ef04fcd4e9146aa25bbff4b2f7a21edcd577496 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Sun, 2 May 2021 13:29:48 +0200 Subject: [PATCH 9/9] fit both google and leaflet map to bounds if map already exists --- public/static/js/map_editor.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js index c72a638..f2cfa04 100644 --- a/public/static/js/map_editor.js +++ b/public/static/js/map_editor.js @@ -376,6 +376,8 @@ if (!LMapWrapper.map) { LMapWrapper.divId = divId; LMapWrapper.map = L.map(LMapWrapper.divId, { + center: { lat: 0., lng: 0. }, + zoom: 2, zoomControl: false }); @@ -395,7 +397,9 @@ maxZoom: highResData.maxZoom }).addTo(LMapWrapper.map); - LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east })); + if (mapId) { + LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east })); + } } LMapWrapper.loadMarkers(places); @@ -525,6 +529,9 @@ }); }); + if (mapId) { + GMapWrapper.map.fitBounds({ south: mapBounds.south, west: mapBounds.west, north: mapBounds.north, east: mapBounds.east }); + } } GMapWrapper.loadMarkers(places);