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

Add code example box to maps, reference styles on github instead of local

pull/319/head
Manuel Roth 2016-05-13 14:27:36 +02:00
rodzic 505a549565
commit ee24777963
2 zmienionych plików z 42 dodań i 24 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

14
_sass/_custom.scss
Wyświetl plik

@ -228,11 +228,6 @@ body{
font-weight: bold;
}
#country, #city {
display: none;
padding: 0px 0px !important;
}
.clipboard {
display: flex;
display: -webkit-flex; /* Safari */
@ -292,3 +287,12 @@ body{
width: inherit;
margin: 0px !important;
}
#country, #city {
display: none;
padding: 0px 0px !important;
}
#basic, #streets {
display: none;
}

52
maps/index.md
Wyświetl plik

@ -4,48 +4,62 @@ title: Collection of Map
published: true
---
<div id="vector-map" class="map-preview"></div>
<div id="map-container">
<button id="vector-osm-bright" class="map-button">OSM Bright</button
><button id="vector-osm-basic" class="map-button">Basic Map</button>
</div>
<br />
<div id="vector-style-reference"></div>
<br />
<div id="map-container">
<button id="vector-bright" class="map-button">Bright</button
><button id="vector-basic" class="map-button">Basic</button
><button id="vector-streets" class="map-button">Streets</button>
</div>
<div id="vector-map" class="map-preview"></div>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
<script>
var vectorStyleReference = document.getElementById("vector-style-reference");
vectorStyleReference.innerHTML = 'The map above uses the following style project: <a href="https://github.com/mapbox/mapbox-gl-styles/blob/master/styles/bright-v8.json">OSM Bright</a>';
mapboxgl.accessToken = 'pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w';
vectorStyleReference.innerHTML = 'The map above uses the following style project: <a href="https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-js-example/master/bright-v9.json">Bright</a>';
if (!mapboxgl.supported()) {
var vectorMapContainer = document.getElementById("vector-map");
vectorMapContainer.innerHTML = 'Your browser does not support Mapbox GL. Either your browser does not support WebGL or it is disabled, please check <a href="https://get.webgl.org/">http://get.webgl.org</a> for more information.'
} else {
var vectorMap = new mapboxgl.Map({
container: 'vector-map',
style: '/styles/bright-v8.json',
style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-js-example/master/bright-v9.json',
center: [8.5456, 47.3739],
zoom: 11
}).addControl(new mapboxgl.Navigation({position: 'top-left'}));
}
var bright = document.getElementById("vector-osm-bright");
var bright = document.getElementById("vector-bright");
bright.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle('/styles/bright-v8.json');
vectorStyleReference.innerHTML = 'The map above uses the following style project: <a href="https://github.com/mapbox/mapbox-gl-styles/blob/master/styles/bright-v8.json">OSM Bright</a>';
vectorMap.setStyle('https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-js-example/master/bright-v9.json');
vectorStyleReference.innerHTML = 'The map above uses the following style project: <a href="https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-js-example/master/bright-v9.json">Bright</a>';
}
var basic = document.getElementById("vector-osm-basic");
var basic = document.getElementById("vector-basic");
basic.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle('/styles/basic-v8.json');
vectorStyleReference.innerHTML = 'The map above uses the following style project: <a href="https://github.com/mapbox/mapbox-gl-styles/blob/master/styles/basic-v8.json">Basic Map</a>';
vectorMap.setStyle('https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-js-example/master/basic-v9.json');
vectorStyleReference.innerHTML = 'The map above uses the following style project: <a href="https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-js-example/master/basic-v9.json">Basic Map</a>';
}
var streets = document.getElementById("vector-streets");
streets.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
vectorMap.setStyle('https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-js-example/master/streets-v9.json');
vectorStyleReference.innerHTML = 'The map above uses the following style project: <a href="https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-js-example/master/streets-v9.json">Streets</a>';
}
</script>
<div>
<div id="bright">
<script src="https://gist.github.com/manuelroth/33e471c9ecd4977dee6bf4839ff9488a.js"></script>
</div>
<div id="basic">
<script src="https://gist.github.com/manuelroth/2a20607d02b71b29d02a1963a7e12e6e.js"></script>
</div>
<div id="streets">
<script src="https://gist.github.com/manuelroth/d0e37ef2e8f8e7080317c779044979d7.js"></script>
</div>
</div>