mirror
/
osm2vectortiles
kopia lustrzana https://github.com/osm2vectortiles/osm2vectortiles
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Reduce code redundancy in maps section

pull/319/head
Manuel Roth 2016-05-17 15:11:52 +02:00
rodzic 37a9912dce
commit 10009233be
2 zmienionych plików z 27 dodań i 66 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
js/downloads.js
Wyświetl plik

@ -96,7 +96,7 @@ document.addEventListener("DOMContentLoaded", function() {
var country = document.querySelector('#country');
var city = document.querySelector('#city');
if(city && country) {
if(country && city) {
var metadataUrl = "https://s3-eu-west-1.amazonaws.com/osm2vectortiles-downloads/metadata.xml"; // https://osm2vectortiles-downloads.os.zhdk.cloud.switch.ch/?prefix=v1.0/extracts/
getBucketMetadata(metadataUrl, function(bucketMetadata) {
var template = '<div class="col12 download-item"><div class="col4 download-title" onclick="{{{ link }}}">{{ title }}</div><div class="col2" onclick="{{{ link }}}">{{ size }}</div><div class="col6 clipboard"><input id="{{ extract_name }}" class="clipboard-input" value="{{ url }}"><button class="clipboard-button hint--bottom hint--rounded" data-clipboard-target="#{{ extract_name }}" onclick="setHint(this, \'Copied!\')" onmouseout="setHint(this, \'Copy to clipboard\')"><img src="/img/clipboard-black.svg" class="clipboard-img" alt="Copy to clipboard"></button></div></div>';

91
js/maps.js
Wyświetl plik

@ -12,79 +12,24 @@ document.addEventListener("DOMContentLoaded", function() {
zoom: 11
}).addControl(new mapboxgl.Navigation());
vectorMap.scrollZoom.disable();
var selectedStyle = 0;
window.selectedStyle = 0;
}
}
if(bright) {
bright.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle('https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json');
document.querySelector("#bright").style.display = "block";
document.querySelector("#basic").style.display = "none";
document.querySelector("#streets").style.display = "none";
document.querySelector("#dark").style.display = "none";
document.querySelector("#light").style.display = "none";
selectedStyle = 0;
}
}
var basic = document.getElementById("vector-basic");
if(basic) {
basic.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle('https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/basic-v9-cdn.json');
document.querySelector("#bright").style.display = "none";
document.querySelector("#basic").style.display = "block";
document.querySelector("#streets").style.display = "none";
document.querySelector("#dark").style.display = "none";
document.querySelector("#light").style.display = "none";
selectedStyle = 1;
}
}
var streets = document.getElementById("vector-streets");
if(streets) {
streets.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle('https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/streets-v9-cdn.json');
document.querySelector("#bright").style.display = "none";
document.querySelector("#basic").style.display = "none";
document.querySelector("#streets").style.display = "block";
document.querySelector("#dark").style.display = "none";
document.querySelector("#light").style.display = "none";
selectedStyle = 2;
}
}
var dark = document.getElementById("vector-dark");
if(dark) {
dark.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle('https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/dark-v9-cdn.json');
document.querySelector("#bright").style.display = "none";
document.querySelector("#basic").style.display = "none";
document.querySelector("#streets").style.display = "none";
document.querySelector("#dark").style.display = "block";
document.querySelector("#light").style.display = "none";
selectedStyle = 3;
}
}
var light = document.getElementById("vector-light");
if(light) {
light.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle('https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/light-v9-cdn.json');
document.querySelector("#bright").style.display = "none";
document.querySelector("#basic").style.display = "none";
document.querySelector("#streets").style.display = "none";
document.querySelector("#dark").style.display = "none";
document.querySelector("#light").style.display = "block";
selectedStyle = 4;
}
if(bright && basic && streets && dark && light) {
var styles = ["#bright", "#basic", "#streets", "#dark", "#light"];
var styleUrl = "https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/";
addOnClickEventListener(bright, vectorMap, styleUrl + "bright-v9-cdn.json", 0, styles);
addOnClickEventListener(basic, vectorMap, styleUrl + "basic-v9-cdn.json", 1, styles);
addOnClickEventListener(streets, vectorMap, styleUrl + "streets-v9-cdn.json", 2, styles);
addOnClickEventListener(dark, vectorMap, styleUrl + "dark-v9-cdn.json", 3, styles);
addOnClickEventListener(light, vectorMap, styleUrl + "light-v9-cdn.json", 4, styles);
}
// instantiate map clipboard
new Clipboard('.map-clipboard-button', {
text: function(trigger) {
@ -93,6 +38,22 @@ document.addEventListener("DOMContentLoaded", function() {
});
});
function addOnClickEventListener(element, vectorMap, styleUrl, selectedStyle, styles) {
element.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle(styleUrl);
window.selectedStyle = selectedStyle;
for(var i = 0; i < styles.length; i++) {
if(selectedStyle === i) {
document.querySelector(styles[i]).style.display = "block";
} else {
document.querySelector(styles[i]).style.display = "none";
}
}
}
}
function showCopiedHint() {
var mapClipboardText = document.querySelector("#map-clipboard-text")
mapClipboardText.innerText = "Copied to clipboard!";