public/static/css/map_editor.css

@@ -1,4 +1,4 @@
-.map {
+#map {
     position: absolute;
     top: 0;
     left: 0;
@@ -7,13 +7,6 @@
     z-index: 1;
 }
 
-#mapSelection img {
-    display: inline;
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.15em;
-}
-
 /* modify the cursor for the Leaflet map */
 .leaflet-container {
     cursor: crosshair;
@@ -72,9 +65,6 @@
     #placeControl {
         top: calc(50% + 10px);
     }
-    .hideOnMobile {
-        display: none;
-    }
 }
 
 @media screen and (min-width: 1000px), (max-height: 599px) {

public/static/img/map.svg

@@ -1,4 +0,0 @@
-<!-- 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

@@ -117,7 +117,7 @@
             MapEditor.resetSelected();
             MapEditor.selectedMarker = marker;
 
-            MapEditor.map.resize();
+            MapEditor.map.invalidateSize(true);
             MapEditor.map.panTo(marker.getLatLng());
 
             MapEditor.panorama.setVisible(false);
@@ -219,7 +219,7 @@
             MapEditor.resetSelected(del);
             MapEditor.selectedMarker = null;
 
-            MapEditor.map.resize();
+            MapEditor.map.invalidateSize(true);
         },
 
         deletePlace: function () {
@@ -235,7 +235,6 @@
 
             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);
@@ -351,7 +350,6 @@
     var LMapWrapper = {
         map: null,
         markers: null,
-        divId: null,
         iconCollection: {
             iconGreen: L.icon({
                 iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
@@ -371,48 +369,36 @@
         },
 
         init: function (divId, places) {
-            document.getElementById(divId).style.display = "block";
+            LMapWrapper.map = L.map('map', {
+                zoomControl: false
+            });
 
-            if (!LMapWrapper.map) {
+            LMapWrapper.map.on('click', function (e) {
-                LMapWrapper.divId = divId;
+                LMapWrapper.placeMarker(e.latlng);
-                LMapWrapper.map = L.map(LMapWrapper.divId, {
+            });
-                    zoomControl: false
-                });
 
-                LMapWrapper.map.on('click', function (e) {
+            var highResData = Util.getHighResData();
-                    LMapWrapper.placeMarker(e.latlng);
-                });
 
-                var highResData = Util.getHighResData();
+            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);
 
-                L.tileLayer(tileUrl, {
+            LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
-                    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);
         },
 
-        hide: function () {
-            document.getElementById(LMapWrapper.divId).style.display = 'none';
-        },
-
         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)) {
@@ -430,7 +416,7 @@
                         MapEditor.select(this);
                     });
 
-                marker.placeId = placeId;
+                marker.placeId = place.id;
             }
 
             LMapWrapper.map.addLayer(LMapWrapper.markers);
@@ -443,7 +429,7 @@
                 icon: LMapWrapper.iconCollection.iconBlue,
                 zIndexOffset: 2000
             })
-                .addTo(LMapWrapper.markers)
+                .addTo(LMapWrapper.map)
                 .on('click', function () {
                     MapEditor.select(this);
                 });
@@ -455,24 +441,25 @@
             LMapWrapper.map.panTo(latLng);
         },
 
-        resize: function () {
+        invalidateSize: function (invalid) {
-            LMapWrapper.map.invalidateSize(true);
+            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.markers.removeLayer(marker);
+            LMapWrapper.map.removeLayer(marker);
         }
     };
 
     var GMapWrapper = {
         map: null,
         markers: null,
-        divId: null,
         iconCollection: {
             iconGreen: {
                 url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
@@ -495,52 +482,36 @@
         },
 
         init: function (divId, places) {
-            document.getElementById(divId).style.display = "block";
+            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'
+            });
 
-            if (!GMapWrapper.map) {
+            GMapWrapper.map.addListener('click', function (mapsMouseEvent) {
-                GMapWrapper.divId = divId;
+                GMapWrapper.placeMarker({
-                GMapWrapper.map = new google.maps.Map(document.getElementById(GMapWrapper.divId), {
+                    lat: mapsMouseEvent.latLng.lat(),
-                    center: { lat: 0., lng: 0. },
+                    lng: mapsMouseEvent.latLng.lng()
-                    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;
-        },
-
-        hide: function () {
-            document.getElementById(GMapWrapper.divId).style.display = 'none';
         },
 
         loadMarkers: function (places) {
-            if (!GMapWrapper.markers) {
+            GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], { 
-                GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], {
+                imagePath: STATIC_ROOT + '/img/markers/m',
-                    imagePath: STATIC_ROOT + '/img/markers/m',
+                imageExtension: 'png?rev' + REVISION
-                    imageExtension: 'png?rev' + REVISION
+            });
-                });
-            } else {
-                GMapWrapper.markers.clearMarkers();
-            }
 
             for (var placeId in places) {
                 if (!places.hasOwnProperty(placeId)) {
@@ -564,7 +535,7 @@
                     MapEditor.select(this);
                 });
 
-                marker.placeId = placeId;
+                marker.placeId = place.id;
 
                 GMapWrapper.markers.addMarker(marker);
             }
@@ -595,8 +566,10 @@
             GMapWrapper.map.panTo(latLng);
         },
 
-        resize: function () {
+        invalidateSize: function (invalid) {
-            google.maps.event.trigger(GMapWrapper.map, 'resize');
+            if (invalid) {
+                google.maps.event.trigger(GMapWrapper.map, 'resize');
+            }
         },
 
         changeMarkerIcon: function (marker, icon) {
@@ -608,9 +581,9 @@
         }
     };
 
-    // initialize content of #map with google maps
+    // MapEditor.map = LMapWrapper;
     MapEditor.map = GMapWrapper;
-    MapEditor.map.init('gmap', places);
+    MapEditor.map.init('map', places);
 
     MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
         // switch off fullscreenControl because positioning doesn't work
@@ -680,19 +653,4 @@
         }
     };
 
-    document.getElementById('mapSelector').onclick = function () {
-        MapEditor.closePlace();
-        MapEditor.map.hide();
-
-        if (MapEditor.map === GMapWrapper) {
-            MapEditor.map = LMapWrapper;
-            MapEditor.map.init('lmap', places);
-        } else {
-            MapEditor.map = GMapWrapper;
-            MapEditor.map.init('gmap', places);
-        }
-
-
-    }
-
 })();

views/admin/map_editor.php

@@ -13,12 +13,7 @@
 
 @section(subheader) 
            <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
-        --><span class="inline hideOnMobile" id="mapSelection">
+        --><span>
-                <button id="mapSelector">
-                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" />
-                </button>
-           </span><!--
-        --><span class="inline hideOnMobile">
                <input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
                <button id="jumpButton" disabled >Jump</button>
            </span><!--
@@ -63,10 +58,7 @@
 @endsection
 
 @section(main)
-    <div id="map" class="map">
+    <div id="map"></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>