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

MAPG-100 visualize in map editor if place has pano or not

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-03 23:41:08 +02:00
parent dd2905286b
commit 2d91f94f0c
1 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
panorama: null, panorama: null,
selectedMarker: null, selectedMarker: null,
getPlace: function (placeId) { getPlace: function (placeId, marker) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.onload = function () { xhr.onload = function () {
@ -12,6 +12,9 @@
if (!this.response.panoId) { if (!this.response.panoId) {
document.getElementById('noPano').style.visibility = 'visible'; document.getElementById('noPano').style.visibility = 'visible';
marker.noPano = true;
return; return;
} }
@ -41,11 +44,7 @@
MapEditor.resetSelected(); MapEditor.resetSelected();
MapEditor.selectedMarker = marker; MapEditor.selectedMarker = marker;
marker.setIcon(L.icon({ marker.setIcon(IconCollection.iconBlue);
iconUrl: '/static/img/markers/marker-blue.svg',
iconSize: [24, 32],
iconAnchor: [12, 32]
}));
marker.setZIndexOffset(2000); marker.setZIndexOffset(2000);
MapEditor.map.invalidateSize(true); MapEditor.map.invalidateSize(true);
@ -53,7 +52,7 @@
MapEditor.panorama.setVisible(false); MapEditor.panorama.setVisible(false);
MapEditor.getPlace(marker.placeId); MapEditor.getPlace(marker.placeId, marker);
}, },
resetSelected: function () { resetSelected: function () {
@ -61,15 +60,29 @@
return; return;
} }
MapEditor.selectedMarker.setIcon(L.icon({ MapEditor.selectedMarker.setIcon(MapEditor.selectedMarker.noPano ? IconCollection.iconRed : IconCollection.iconGreen);
iconUrl: '/static/img/markers/marker-green.svg',
iconSize: [24, 32],
iconAnchor: [12, 32]
}));
MapEditor.selectedMarker.setZIndexOffset(1000); MapEditor.selectedMarker.setZIndexOffset(1000);
} }
}; };
var IconCollection = {
iconGreen: L.icon({
iconUrl: '/static/img/markers/marker-green.svg',
iconSize: [24, 32],
iconAnchor: [12, 32]
}),
iconRed: L.icon({
iconUrl: '/static/img/markers/marker-red.svg',
iconSize: [24, 32],
iconAnchor: [12, 32]
}),
iconBlue: L.icon({
iconUrl: '/static/img/markers/marker-blue.svg',
iconSize: [24, 32],
iconAnchor: [12, 32]
}),
};
var Util = { var Util = {
getHighResData: function () { getHighResData: function () {
if (window.devicePixelRatio >= 4) { if (window.devicePixelRatio >= 4) {
@ -102,11 +115,7 @@
for (var i = 0; i < places.length; ++i) { for (var i = 0; i < places.length; ++i) {
var marker = L.marker({ lat: places[i].lat, lng: places[i].lng }, { var marker = L.marker({ lat: places[i].lat, lng: places[i].lng }, {
icon: L.icon({ icon: places[i].noPano ? IconCollection.iconRed : IconCollection.iconGreen,
iconUrl: '/static/img/markers/marker-green.svg',
iconSize: [24, 32],
iconAnchor: [12, 32]
}),
zIndexOffset: 1000 zIndexOffset: 1000
}) })
.addTo(MapEditor.map) .addTo(MapEditor.map)
@ -119,6 +128,7 @@
}); });
marker.placeId = places[i].id; marker.placeId = places[i].id;
marker.noPano = places[i].noPano;
} }
MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), { MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {