You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
4.2 KiB
JavaScript
160 lines
4.2 KiB
JavaScript
5 years ago
|
/*
|
||
|
* 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;
|
||
|
}
|