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

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

View File

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

View File

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

View File

@ -2,6 +2,11 @@
# 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:
version "1.6.0"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"

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'; ?>
<div class="header small">
<div class="grid">
@ -68,6 +68,7 @@
var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>;
</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="/static/js/map_editor.js"></script>
<?php require ROOT . '/views/templates/main_footer.php'; ?>