|
|
|
@ -13,9 +13,10 @@ const map = new mapboxgl.Map({
|
|
|
|
|
container: 'mapbox',
|
|
|
|
|
style: SETTINGS['map_style_json'],
|
|
|
|
|
attributionControl: false,
|
|
|
|
|
touchZoomRotate: 'center',
|
|
|
|
|
pitch: 0,
|
|
|
|
|
zoom: 0,
|
|
|
|
|
maxZoom: 18
|
|
|
|
|
maxZoom: 20
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
map.touchZoomRotate.enable({around: 'center'});
|
|
|
|
@ -30,6 +31,7 @@ gotfirstfix = false;
|
|
|
|
|
watchLocation(function (position) {
|
|
|
|
|
if (gotfirstfix) {
|
|
|
|
|
setMapLocation(position.coords.latitude, position.coords.longitude);
|
|
|
|
|
updatePlaceLayer(position.coords.latitude, position.coords.longitude);
|
|
|
|
|
} else {
|
|
|
|
|
animateMapIn(position.coords.latitude, position.coords.longitude, 16, position.coords.heading);
|
|
|
|
|
gotfirstfix = true;
|
|
|
|
@ -61,6 +63,39 @@ function setMapLocation(latitude, longitude) {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updatePlaceLayer(latitude, longitude) {
|
|
|
|
|
callAPI("nearbyplaces", {
|
|
|
|
|
username: localStorage.getItem("username"),
|
|
|
|
|
password: localStorage.getItem("password"),
|
|
|
|
|
latitude: latitude,
|
|
|
|
|
longitude: longitude,
|
|
|
|
|
radius: 5
|
|
|
|
|
}, function (data) {
|
|
|
|
|
var oldmarkers = document.getElementsByClassName("place-marker");
|
|
|
|
|
if (oldmarkers.length > 0) {
|
|
|
|
|
markerparent = oldmarkers[0].parentNode;
|
|
|
|
|
while (oldmarkers.length > 0) {
|
|
|
|
|
markerparent.removeChild(oldmarkers[0]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
data.features.forEach(function (place) {
|
|
|
|
|
var el = document.createElement("div");
|
|
|
|
|
el.className = "place-marker";
|
|
|
|
|
if (place.properties.teamid != null && place.properties.teamid > 0) {
|
|
|
|
|
el.className += " color-filter-" + SETTINGS["teams"][place.properties.teamid]["color"];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
el.addEventListener('click', function () {
|
|
|
|
|
window.alert(place.properties.name + " \n" + place.properties.id);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
new mapboxgl.Marker(el)
|
|
|
|
|
.setLngLat(place.geometry.coordinates)
|
|
|
|
|
.addTo(map);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function animateMapIn(latitude, longitude, zoom, heading) {
|
|
|
|
|
if (typeof zoom == 'undefined') {
|
|
|
|
|
zoom = 15;
|
|
|
|
|