Add alternate 2D map mode with Leaflet, improve settings page
parent
b3e3ad4660
commit
b1552857c0
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,160 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
function leafletMap() {
|
||||
var map = L.map('mapbox', {
|
||||
zoomSnap: 0.25,
|
||||
zoomControl: false,
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
map.placelayer = L.layerGroup();
|
||||
|
||||
map.placelayer.addTo(map);
|
||||
|
||||
$("#mapbox").css("background-color", "#6cdc9b");
|
||||
$("#mapbox").css("background-image", "url(img/map/ground.png)");
|
||||
// Prevent roads and stuff from appearing above UI
|
||||
$("#mapbox").css("z-index", "-9999");
|
||||
|
||||
var openmaptilesUrl = SETTINGS['map_pbf_url'];
|
||||
|
||||
var vectorTileStyling = {
|
||||
water: {
|
||||
fill: true,
|
||||
weight: 1,
|
||||
fillColor: '#76FFFF',
|
||||
color: '#76FFFF',
|
||||
fillOpacity: 1,
|
||||
opacity: 1
|
||||
},
|
||||
admin: [],
|
||||
waterway: {
|
||||
weight: 1,
|
||||
fillColor: '#76FFFF',
|
||||
color: '#76FFFF',
|
||||
fillOpacity: 1,
|
||||
opacity: 1
|
||||
},
|
||||
landcover: {
|
||||
fill: true,
|
||||
weight: 1,
|
||||
fillColor: '#62CF80',
|
||||
color: '#62CF80',
|
||||
fillOpacity: 0.5,
|
||||
opacity: 0.5,
|
||||
},
|
||||
landuse: [],
|
||||
park: {
|
||||
fill: true,
|
||||
weight: 1,
|
||||
fillColor: '#62CF80',
|
||||
color: '#62CF80',
|
||||
fillOpacity: 0.5,
|
||||
opacity: 0.5
|
||||
},
|
||||
boundary: [],
|
||||
aeroway: [],
|
||||
transportation: {
|
||||
weight: 2,
|
||||
fillColor: '#FEC481',
|
||||
color: '#FEC481',
|
||||
fillOpacity: 1,
|
||||
opacity: 1,
|
||||
},
|
||||
building: {
|
||||
fill: true,
|
||||
weight: 1,
|
||||
fillColor: '#c0e3e9',
|
||||
color: '#c0e3e9',
|
||||
fillOpacity: 0.5,
|
||||
opacity: 0.5
|
||||
},
|
||||
water_name: [],
|
||||
transportation_name: [],
|
||||
place: [],
|
||||
housenumber: [],
|
||||
poi: [],
|
||||
country_name: [],
|
||||
marine_name: [],
|
||||
state_name: [],
|
||||
place_name: [],
|
||||
waterway_name: [],
|
||||
poi_name: [],
|
||||
road_name: [],
|
||||
housenum_name: []
|
||||
};
|
||||
|
||||
var openmaptilesVectorTileOptions = {
|
||||
rendererFactory: L.svg.tile,
|
||||
attribution: '',
|
||||
vectorTileLayerStyles: vectorTileStyling,
|
||||
maxNativeZoom: 14,
|
||||
maxZoom: 20
|
||||
};
|
||||
|
||||
var openmaptilesPbfLayer = L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions).addTo(map);
|
||||
|
||||
map.setView({lat: 0, lng: 0}, 1);
|
||||
|
||||
map.setMapHeading = function (heading) {
|
||||
|
||||
}
|
||||
|
||||
map.setMapLocation = function (latitude, longitude) {
|
||||
map.setView({
|
||||
lng: longitude,
|
||||
lat: latitude
|
||||
});
|
||||
}
|
||||
|
||||
map.updatePlaceLayer = function (data) {
|
||||
map.placelayer.clearLayers();
|
||||
|
||||
data.features.forEach(function (place) {
|
||||
var color = "white";
|
||||
if (place.properties.teamid != null && place.properties.teamid > 0) {
|
||||
color = SETTINGS["teams"][place.properties.teamid]["color"];
|
||||
}
|
||||
|
||||
var icon = L.icon({
|
||||
iconUrl: "img/place/" + color + ".png",
|
||||
iconSize: [50, 50],
|
||||
iconAnchor: [25, 10]
|
||||
});
|
||||
|
||||
L.marker(
|
||||
[
|
||||
place.geometry.coordinates[1],
|
||||
place.geometry.coordinates[0]
|
||||
],
|
||||
{
|
||||
icon: icon
|
||||
})
|
||||
.on('click', function () {
|
||||
openPlace(place.properties.id, place.properties.name);
|
||||
})
|
||||
.addTo(map.placelayer);
|
||||
});
|
||||
}
|
||||
|
||||
map.animateMapIn = function (latitude, longitude, zoom, heading) {
|
||||
if (typeof zoom == 'undefined') {
|
||||
zoom = 17;
|
||||
}
|
||||
if (typeof heading == 'undefined') {
|
||||
heading = 0;
|
||||
}
|
||||
map.flyTo([latitude, longitude], zoom);
|
||||
// Set min zoom after some time to fly in
|
||||
setTimeout(function () {
|
||||
map.setMinZoom(14);
|
||||
map.setZoom(zoom);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return map;
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
/*
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
function mapboxMap() {
|
||||
mapboxgl.accessToken = '';
|
||||
var map = new mapboxgl.Map({
|
||||
container: 'mapbox',
|
||||
style: SETTINGS['map_style_json'],
|
||||
attributionControl: false,
|
||||
dragPan: false,
|
||||
pitch: 0,
|
||||
zoom: 0,
|
||||
maxZoom: 20
|
||||
});
|
||||
|
||||
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.updatePlaceLayer = 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 += " place-color-" + SETTINGS["teams"][place.properties.teamid]["color"];
|
||||
}
|
||||
|
||||
el.addEventListener('click', function () {
|
||||
openPlace(place.properties.id, place.properties.name);
|
||||
});
|
||||
|
||||
new mapboxgl.Marker(el)
|
||||
.setLngLat(place.geometry.coordinates)
|
||||
.addTo(map);
|
||||
});
|
||||
}
|
||||
|
||||
map.animateMapIn = function (latitude, longitude, zoom, heading) {
|
||||
if (typeof zoom == 'undefined') {
|
||||
zoom = 17;
|
||||
}
|
||||
if (typeof heading == 'undefined') {
|
||||
heading = 0;
|
||||
}
|
||||
map.flyTo({
|
||||
center: [
|
||||
longitude,
|
||||
latitude
|
||||
],
|
||||
speed: 0.7,
|
||||
zoom: zoom,
|
||||
heading: heading,
|
||||
pitch: 45
|
||||
});
|
||||
// Set min zoom after some time to fly in
|
||||
setTimeout(function () {
|
||||
map.setMinZoom(15);
|
||||
map.setPitch(45);
|
||||
map.setZoom(zoom);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
var dpPoint = null;
|
||||
var dpPitch = null;
|
||||
|
||||
map.on('touchstart', function (data) {
|
||||
if (data.points.length == 2) {
|
||||
var diff = Math.abs(data.points[0].y - data.points[1].y);
|
||||
if (diff <= 50) {
|
||||
dpPoint = data.point;
|
||||
map.touchZoomRotate.disable();
|
||||
dpPitch = map.getPitch();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
map.on('touchmove', function (data) {
|
||||
if (dpPoint) {
|
||||
data.preventDefault();
|
||||
var pitchdiff = (dpPoint.y - data.point.y) * 0.5;
|
||||
map.setPitch(dpPitch + pitchdiff);
|
||||
}
|
||||
});
|
||||
|
||||
map.on('touchend', function (data) {
|
||||
if (dpPoint) {
|
||||
map.touchZoomRotate.enable();
|
||||
}
|
||||
dpPoint = null;
|
||||
dpPitch = null;
|
||||
});
|
||||
|
||||
map.on('touchcancel', function (data) {
|
||||
if (dpPoint) {
|
||||
map.touchZoomRotate.enable();
|
||||
}
|
||||
dpPoint = null;
|
||||
dpPitch = null;
|
||||
});
|
||||
|
||||
return map;
|
||||
}
|
||||
Loading…
Reference in New Issue