esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Merged in feature/MAPG-127-integrate-markerclustergroup (pull request #100)

Browse Source 
Feature/MAPG-127 integrate markerclustergroup
This commit is contained in:
Bence Pőcze 2020-06-11 21:35:49 +00:00
commit 6fb122e842
4 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/static/js/map_editor.js
View File

@ -7,6 +7,7 @@
description: null description: null
}, },
map: null, map: null,
markers: null,
panorama: null, panorama: null,
selectedMarker: null, selectedMarker: null,
added: {}, added: {},
@ -129,6 +130,8 @@
MapEditor.panorama.setVisible(false); MapEditor.panorama.setVisible(false);
if (marker.placeId) { if (marker.placeId) {
MapEditor.markers.removeLayer(MapEditor.selectedMarker);
MapEditor.map.addLayer(MapEditor.selectedMarker);
marker.setIcon(IconCollection.iconBlue); marker.setIcon(IconCollection.iconBlue);
marker.setZIndexOffset(2000); marker.setZIndexOffset(2000);
@ -168,6 +171,8 @@
var placeId = MapEditor.selectedMarker.placeId var placeId = MapEditor.selectedMarker.placeId
if (places[placeId].id && !del) { 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.setIcon(places[placeId].noPano ? IconCollection.iconRed : IconCollection.iconGreen);
MapEditor.selectedMarker.setZIndexOffset(1000); MapEditor.selectedMarker.setZIndexOffset(1000);
} else { } else {
@ -381,6 +386,10 @@
MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east })); MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
MapEditor.markers = L.markerClusterGroup({
maxClusterRadius: 50
});
for (var placeId in places) { for (var placeId in places) {
if (!places.hasOwnProperty(placeId)) { if (!places.hasOwnProperty(placeId)) {
continue; continue;
@ -392,7 +401,7 @@
icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen, icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen,
zIndexOffset: 1000 zIndexOffset: 1000
}) })
.addTo(MapEditor.map) .addTo(MapEditor.markers)
.on('click', function () { .on('click', function () {
MapEditor.select(this); MapEditor.select(this);
}); });
@ -400,6 +409,8 @@
marker.placeId = place.id; marker.placeId = place.id;
} }
MapEditor.map.addLayer(MapEditor.markers);
MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
// switch off fullscreenControl because positioning doesn't work // switch off fullscreenControl because positioning doesn't work
fullscreenControl: false, fullscreenControl: false,

3
public/static/package.json
View File

@ -1,5 +1,6 @@
{ {
"dependencies": { "dependencies": {
"leaflet": "^1.6.0" "leaflet": "^1.6.0",
"leaflet.markercluster": "^1.4.1"
} }
} }

5
public/static/yarn.lock
View File

@ -2,6 +2,11 @@
# yarn lockfile v1 # yarn lockfile v1
leaflet.markercluster@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5"
integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==
leaflet@^1.6.0: leaflet@^1.6.0:
version "1.6.0" version "1.6.0"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308" resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"

3
views/admin/map_editor.php
View File

@ -1,4 +1,4 @@
<?php $cssFiles = ['/static/node_modules/leaflet/dist/leaflet.css', '/static/css/map_editor.css']; ?> <?php $cssFiles = ['/static/node_modules/leaflet/dist/leaflet.css', '/static/css/map_editor.css', '/static/node_modules/leaflet.markercluster/dist/MarkerCluster.css', '/static/node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css']; ?>
<?php require ROOT . '/views/templates/main_header.php'; ?> <?php require ROOT . '/views/templates/main_header.php'; ?>
<div class="header small"> <div class="header small">
<div class="grid"> <div class="grid">
@ -68,6 +68,7 @@
var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>; var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>;
</script> </script>
<script src="/static/node_modules/leaflet/dist/leaflet.js"></script> <script src="/static/node_modules/leaflet/dist/leaflet.js"></script>
<script src="/static/node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script> <script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
<script src="/static/js/map_editor.js"></script> <script src="/static/js/map_editor.js"></script>
<?php require ROOT . '/views/templates/main_footer.php'; ?> <?php require ROOT . '/views/templates/main_footer.php'; ?>