added switching functionality between maps in mapeditor
This commit is contained in:
parent
ef8ad69506
commit
0bb31cbe14
@ -1,4 +1,5 @@
|
||||
#map {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -7,6 +8,27 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gmap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#mapSelection img {
|
||||
display: inline;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
#mapSelection img svg {
|
||||
fill: #28a745;
|
||||
}
|
||||
|
||||
/* modify the cursor for the Leaflet map */
|
||||
.leaflet-container {
|
||||
cursor: crosshair;
|
||||
|
||||
4
public/static/img/map.svg
Normal file
4
public/static/img/map.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 530 B |
@ -305,6 +305,13 @@
|
||||
var tempId = addedPlaces[i].tempId;
|
||||
var placeId = addedPlaces[i].id;
|
||||
places[tempId].id = placeId;
|
||||
|
||||
places[placeId] = places[tempId];
|
||||
if(MapEditor.selectedMarker && MapEditor.selectedMarker.placeId === tempId) {
|
||||
MapEditor.selectedMarker.placeId = placeId;
|
||||
}
|
||||
delete places[tempId];
|
||||
MapEditor.map.loadMarkers(places);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -350,6 +357,8 @@
|
||||
var LMapWrapper = {
|
||||
map: null,
|
||||
markers: null,
|
||||
divId: null,
|
||||
loaded: false,
|
||||
iconCollection: {
|
||||
iconGreen: L.icon({
|
||||
iconUrl: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
|
||||
@ -369,36 +378,53 @@
|
||||
},
|
||||
|
||||
init: function (divId, places) {
|
||||
LMapWrapper.map = L.map('map', {
|
||||
zoomControl: false
|
||||
});
|
||||
document.getElementById(divId).style.display = "block";
|
||||
|
||||
LMapWrapper.map.on('click', function (e) {
|
||||
LMapWrapper.placeMarker(e.latlng);
|
||||
});
|
||||
if(LMapWrapper.loaded === true) {
|
||||
LMapWrapper.invalidateSize(true);
|
||||
} else {
|
||||
LMapWrapper.divId = divId;
|
||||
LMapWrapper.map = L.map(LMapWrapper.divId, {
|
||||
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(LMapWrapper.map);
|
||||
var highResData = Util.getHighResData();
|
||||
|
||||
LMapWrapper.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);
|
||||
|
||||
LMapWrapper.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
|
||||
}
|
||||
|
||||
LMapWrapper.loadMarkers(places);
|
||||
|
||||
LMapWrapper.loaded = true;
|
||||
},
|
||||
|
||||
destruct: function() {
|
||||
document.getElementById(LMapWrapper.divId).style.display = 'none';
|
||||
// LMapWrapper.divId = null;
|
||||
},
|
||||
|
||||
loadMarkers: function (places) {
|
||||
|
||||
LMapWrapper.markers = L.markerClusterGroup({
|
||||
maxClusterRadius: 50
|
||||
});
|
||||
if(!LMapWrapper.markers) {
|
||||
LMapWrapper.markers = L.markerClusterGroup({
|
||||
maxClusterRadius: 50
|
||||
});
|
||||
} else {
|
||||
LMapWrapper.markers.clearLayers();
|
||||
}
|
||||
|
||||
for (var placeId in places) {
|
||||
if (!places.hasOwnProperty(placeId)) {
|
||||
@ -410,9 +436,9 @@
|
||||
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 () {
|
||||
});
|
||||
marker.addTo(LMapWrapper.markers)
|
||||
marker.on('click', function () {
|
||||
MapEditor.select(this);
|
||||
});
|
||||
|
||||
@ -446,8 +472,8 @@
|
||||
},
|
||||
|
||||
changeMarkerIcon: function (marker, icon) {
|
||||
LMapWrapper.markers.removeLayer(marker);
|
||||
LMapWrapper.map.addLayer(marker);
|
||||
//LMapWrapper.markers.removeLayer(marker);
|
||||
//LMapWrapper.map.addLayer(marker);
|
||||
marker.setIcon(icon);
|
||||
marker.setZIndexOffset(2000);
|
||||
},
|
||||
@ -460,6 +486,8 @@
|
||||
var GMapWrapper = {
|
||||
map: null,
|
||||
markers: null,
|
||||
divId: null,
|
||||
loaded: false,
|
||||
iconCollection: {
|
||||
iconGreen: {
|
||||
url: STATIC_ROOT + '/img/markers/marker-green.svg?rev' + REVISION,
|
||||
@ -482,37 +510,58 @@
|
||||
},
|
||||
|
||||
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'
|
||||
});
|
||||
document.getElementById(divId).style.display = "block";
|
||||
|
||||
GMapWrapper.map.addListener('click', function (mapsMouseEvent) {
|
||||
GMapWrapper.placeMarker({
|
||||
lat: mapsMouseEvent.latLng.lat(),
|
||||
lng: mapsMouseEvent.latLng.lng()
|
||||
if(GMapWrapper.loaded) {
|
||||
GMapWrapper.invalidateSize();
|
||||
} else {
|
||||
GMapWrapper.divId = divId;
|
||||
GMapWrapper.map = new google.maps.Map(document.getElementById(GMapWrapper.divId), {
|
||||
center: { lat: 0., lng: 0. },
|
||||
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);
|
||||
|
||||
GMapWrapper.loaded = true;
|
||||
},
|
||||
|
||||
destruct: function() {
|
||||
// GMapWrapper.map = null;
|
||||
// GMapWrapper.markers = null;
|
||||
document.getElementById(GMapWrapper.divId).style.display = 'none';
|
||||
// GMapWrapper.divId = null;
|
||||
},
|
||||
|
||||
loadMarkers: function (places) {
|
||||
GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], {
|
||||
imagePath: STATIC_ROOT + '/img/markers/m',
|
||||
imageExtension: 'png?rev' + REVISION
|
||||
});
|
||||
|
||||
if(!GMapWrapper.markers) {
|
||||
GMapWrapper.markers = new MarkerClusterer(GMapWrapper.map, [], {
|
||||
imagePath: STATIC_ROOT + '/img/markers/m',
|
||||
imageExtension: 'png?rev' + REVISION
|
||||
});
|
||||
} else {
|
||||
GMapWrapper.markers.clearMarkers();
|
||||
}
|
||||
|
||||
for (var placeId in places) {
|
||||
if (!places.hasOwnProperty(placeId)) {
|
||||
continue;
|
||||
@ -583,7 +632,7 @@
|
||||
|
||||
// MapEditor.map = LMapWrapper;
|
||||
MapEditor.map = GMapWrapper;
|
||||
MapEditor.map.init('map', places);
|
||||
MapEditor.map.init('gmap', places);
|
||||
|
||||
MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
|
||||
// switch off fullscreenControl because positioning doesn't work
|
||||
@ -653,4 +702,19 @@
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('mapSelector').onclick = function() {
|
||||
MapEditor.closePlace();
|
||||
MapEditor.map.destruct();
|
||||
|
||||
if(MapEditor.map === GMapWrapper) {
|
||||
MapEditor.map = LMapWrapper;
|
||||
MapEditor.map.init('map', places);
|
||||
} else {
|
||||
MapEditor.map = GMapWrapper;
|
||||
MapEditor.map.init('gmap', places);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@ -13,6 +13,11 @@
|
||||
|
||||
@section(subheader)
|
||||
<span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
|
||||
--><span class="inline" id="mapSelection">
|
||||
<button id="mapSelector">
|
||||
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" />
|
||||
</button>
|
||||
</span><!--
|
||||
--><span>
|
||||
<input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
|
||||
<button id="jumpButton" disabled >Jump</button>
|
||||
@ -59,6 +64,7 @@
|
||||
|
||||
@section(main)
|
||||
<div id="map"></div>
|
||||
<div id="gmap"></div>
|
||||
<div id="panorama"></div>
|
||||
<div id="noPano">
|
||||
<p class="bold">No panorama is available for this location.</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user