From ca40836d40e5d79aec47fb3c509524cb90b09c74 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] 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.