refactoring and bug fixing related to the map switching

public/static/css/map_editor.css

@@ -1,14 +1,4 @@
-#map {
+.map {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 1;
-}
-
-#gmap {
     position: absolute;
     top: 0;
     left: 0;

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) {
+            if(!LMapWrapper.map) {
-                LMapWrapper.invalidateSize(true);
-            } else {
                 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)
+                    .addTo(LMapWrapper.markers)
-                marker.on('click', function () {
+                    .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) {
+            if(!GMapWrapper.map) {
-                GMapWrapper.invalidateSize();
-            } else {
                 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() {
+        hide: function() {
-            // GMapWrapper.map = null;
-            // GMapWrapper.markers = null;
             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);

views/admin/map_editor.php

@@ -63,8 +63,10 @@
 @endsection
 
 @section(main)
-    <div id="map"></div>
+    <div id="map" class="map">
-    <div id="gmap"></div>
+        <div id="lmap" class="map"></div>
+        <div id="gmap" class="map"></div>
+    </div>
     <div id="panorama"></div>
     <div id="noPano">
         <p class="bold">No panorama is available for this location.</p>