forked from Netsyms/PackageHelper
Add mapbox-gl-js map client
parent
90aeb804ae
commit
1c8c7cc2e7
@ -0,0 +1,132 @@
|
||||
/*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
// If true, we'll do a fancy zoom/pan in
|
||||
// Otherwise we'll just jump to the correct location
|
||||
var firstload = true;
|
||||
|
||||
function mapboxMap() {
|
||||
|
||||
if (localStorage.getItem("mapsource") == null) {
|
||||
localStorage.setItem("mapsource", "liberty");
|
||||
}
|
||||
|
||||
$("#mapbox").css("background-color", SETTINGS.maptileurls[localStorage.getItem("mapsource")].bgcolor);
|
||||
|
||||
mapboxgl.accessToken = '';
|
||||
var map = new mapboxgl.Map({
|
||||
container: 'mapbox',
|
||||
style: SETTINGS.maptileurls[localStorage.getItem("mapsource")].json,
|
||||
attributionControl: false,
|
||||
dragPan: true,
|
||||
pitch: 0,
|
||||
zoom: 2,
|
||||
maxZoom: 19
|
||||
});
|
||||
|
||||
map.maptype = "mapbox";
|
||||
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
|
||||
map.addControl(
|
||||
new mapboxgl.GeolocateControl({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10 * 1000
|
||||
},
|
||||
fitBoundsOptions: {
|
||||
maxZoom: 16
|
||||
},
|
||||
trackUserLocation: true
|
||||
})
|
||||
);
|
||||
|
||||
map.startLocateControl = function () {
|
||||
// stub
|
||||
}
|
||||
|
||||
map.stopLocateControl = function () {
|
||||
// stub
|
||||
}
|
||||
|
||||
map.mapEasing = function (t) {
|
||||
return t * (2 - t);
|
||||
}
|
||||
|
||||
map.setMapHeading = function (heading) {
|
||||
if (typeof heading == 'number') {
|
||||
map.easeTo({
|
||||
bearing: heading,
|
||||
easing: map.mapEasing
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
map.setMapLocation = function (latitude, longitude) {
|
||||
map.easeTo({
|
||||
center: [
|
||||
longitude,
|
||||
latitude
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
map.updatePackageLayer = function (data) {
|
||||
var oldmarkers = document.getElementsByClassName("package-marker");
|
||||
if (oldmarkers.length > 0) {
|
||||
markerparent = oldmarkers[0].parentNode;
|
||||
while (oldmarkers.length > 0) {
|
||||
markerparent.removeChild(oldmarkers[0]);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
// JavaScript variable scope and anonymous functions are dumb
|
||||
// This is necessary, otherwise all the on(click)s will fire for the last iteration
|
||||
// of the loop, or something like that
|
||||
(function (datai) {
|
||||
var iconName = getMapIconForItems(datai.items);
|
||||
console.log(iconName);
|
||||
|
||||
var el = document.createElement("div");
|
||||
el.className = "package-marker";
|
||||
|
||||
el.style = "background-image: url(assets/images/" + iconName + ".png);";
|
||||
|
||||
el.addEventListener('click', function () {
|
||||
openPackageInfoSheet(datai.id);
|
||||
});
|
||||
|
||||
new mapboxgl.Marker(el)
|
||||
.setLngLat([datai.coords[1], datai.coords[0]])
|
||||
.addTo(map);
|
||||
})(data[i]);
|
||||
}
|
||||
}
|
||||
|
||||
map.animateMapIn = function (latitude, longitude, zoom, heading) {
|
||||
if (typeof zoom == 'undefined') {
|
||||
zoom = 16;
|
||||
}
|
||||
if (typeof heading == 'undefined') {
|
||||
heading = 0;
|
||||
}
|
||||
map.flyTo({
|
||||
center: [
|
||||
longitude,
|
||||
latitude
|
||||
],
|
||||
speed: 1,
|
||||
zoom: zoom,
|
||||
heading: heading,
|
||||
pitch: 0
|
||||
});
|
||||
}
|
||||
|
||||
map.animateMapIn(userPosition.coords.latitude, userPosition.coords.longitude, 12);
|
||||
|
||||
return map;
|
||||
}
|
||||
Loading…
Reference in New Issue