From 91f430c3c04e35afd22c77c5cca87798ef27c277 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Fri, 30 Apr 2021 16:20:23 +0200 Subject: [PATCH] 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)