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;

public/static/img/map.svg

@@ -0,0 +1,4 @@
+<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z"/>
+</svg>

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', {
+            document.getElementById(divId).style.display = "block";
-                zoomControl: false
-            });
 
-            LMapWrapper.map.on('click', function (e) {
+            if(LMapWrapper.loaded === true) {
-                LMapWrapper.placeMarker(e.latlng);
+                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, {
+                var highResData = Util.getHighResData();
-                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 }));
+                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) {
-
+            if(!LMapWrapper.markers) {
-            LMapWrapper.markers = L.markerClusterGroup({
+                LMapWrapper.markers = L.markerClusterGroup({
-                maxClusterRadius: 50
+                    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)
+                marker.addTo(LMapWrapper.markers)
-                    .on('click', function () {
+                marker.on('click', function () {
                         MapEditor.select(this);
                     });
 
@@ -446,8 +472,8 @@
         },
 
         changeMarkerIcon: function (marker, icon) {
-            LMapWrapper.markers.removeLayer(marker);
+            //LMapWrapper.markers.removeLayer(marker);
-            LMapWrapper.map.addLayer(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,36 +510,57 @@
         },
 
         init: function (divId, places) {
-            GMapWrapper.map = new google.maps.Map(document.getElementById(divId), {
+            document.getElementById(divId).style.display = "block";
-                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) {
+            if(GMapWrapper.loaded) {
-                GMapWrapper.placeMarker({
+                GMapWrapper.invalidateSize();
-                    lat: mapsMouseEvent.latLng.lat(),
+            } else {
-                    lng: mapsMouseEvent.latLng.lng()
+                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, [], { 
+            if(!GMapWrapper.markers) {
-                imagePath: STATIC_ROOT + '/img/markers/m',
+                GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], {
-                imageExtension: 'png?rev' + REVISION
+                    imagePath: STATIC_ROOT + '/img/markers/m',
-            });
+                    imageExtension: 'png?rev' + REVISION
+                });
+            } else {
+                GMapWrapper.markers.clearMarkers();
+            }
             
             for (var placeId in places) {
                 if (!places.hasOwnProperty(placeId)) {
@@ -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);
+        }
+
+        
+    }
+
 })();

views/admin/map_editor.php

@@ -13,6 +13,11 @@
 
 @section(subheader) 
            <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
+        --><span class="inline" id="mapSelection">
+                <button id="mapSelector">
+                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" />
+                </button>
+           </span><!--
         --><span>
                <input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
                <button id="jumpButton" disabled >Jump</button>
@@ -59,6 +64,7 @@
 
 @section(main)
     <div id="map"></div>
+    <div id="gmap"></div>
     <div id="panorama"></div>
     <div id="noPano">
         <p class="bold">No panorama is available for this location.</p>