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

feature/google-maps-in-mapeditor-added #33

Merged
bence merged 9 commits from feature/google-maps-in-mapeditor-added into develop 2021-05-02 13:38:17 +02:00
Conversation 5 Commits 9 Files Changed 10 +248 -78
7 changed files with 248 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ef8ad69506 - Show all commits

BIN
public/static/img/markers/m1.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
public/static/img/markers/m2.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
public/static/img/markers/m3.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
public/static/img/markers/m4.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
public/static/img/markers/m5.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

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

@ -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,12 +347,34 @@
}
};
MapEditor.map = L.map('map', {
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]
})
},
init: function (divId, places) {
LMapWrapper.map = L.map('map', {
zoomControl: false
});
MapEditor.map.on('click', function (e) {
MapEditor.placeMarker(e.latlng);
LMapWrapper.map.on('click', function (e) {
LMapWrapper.placeMarker(e.latlng);
});
var highResData = Util.getHighResData();
@ -402,11 +387,16 @@
zoomOffset: highResData.zoomOffset,
minZoom: highResData.minZoom,
maxZoom: highResData.maxZoom
}).addTo(MapEditor.map);
}).addTo(LMapWrapper.map);
MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
MapEditor.markers = L.markerClusterGroup({
LMapWrapper.loadMarkers(places);
},
loadMarkers: function (places) {
LMapWrapper.markers = L.markerClusterGroup({
maxClusterRadius: 50
});
@ -418,10 +408,10 @@
var place = places[placeId];
var marker = L.marker({ lat: place.lat, lng: place.lng }, {
icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen,
icon: place.noPano ? LMapWrapper.iconCollection.iconRed : LMapWrapper.iconCollection.iconGreen,
zIndexOffset: 1000
})
.addTo(MapEditor.markers)
.addTo(LMapWrapper.markers)
.on('click', function () {
MapEditor.select(this);
});
@ -429,7 +419,171 @@
marker.placeId = place.id;
}
MapEditor.map.addLayer(MapEditor.markers);
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 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
}
},
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) {
bence marked this conversation as resolved Outdated
bence commented 2021-05-02 11:28:47 +02:00
Outdated
Review
Copy Link

I would remove this and add a permanent street view cover layer to the map so the available locations will be always shown. (This is the same how the competitor does.)

Reference: https://developers.google.com/maps/documentation/javascript/reference/street-view#StreetViewCoverageLayer

Example:

                var streetViewCover = new google.maps.StreetViewCoverageLayer();
                streetViewCover.setMap(GMapWrapper.map);

I would remove this and add a permanent street view cover layer to the map so the available locations will be always shown. (This is the same how the competitor does.) Reference: https://developers.google.com/maps/documentation/javascript/reference/street-view#StreetViewCoverageLayer Example: ```js var streetViewCover = new google.maps.StreetViewCoverageLayer(); streetViewCover.setMap(GMapWrapper.map); ``` ![](https://i.ibb.co/LPjP4rr/Bildschirmfoto-vom-2021-05-02-11-27-40.png)
balazs commented 2021-05-02 12:37:55 +02:00
Outdated
Review
Copy Link

I personally consider the permanent street view cover layer disturbing. Can we just add another switch to toggle it?

I personally consider the permanent street view cover layer disturbing. Can we just add another switch to toggle it?
bence commented 2021-05-02 12:47:35 +02:00
Outdated
Review
Copy Link

For me it's OK, then it can be done later.

For me it's OK, then it can be done later.
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);
});
GMapWrapper.markers.addMarker(marker);
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 {

1
views/admin/map_editor.php
View File

@ -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=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>)
@js(https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js)
@js(js/map_editor.js)
@extends(templates/layout_full)