Skip to content

Instantly share code, notes, and snippets.

@tyrasd

tyrasd/index.html

Forked from anonymous/index.html
Last active April 17, 2017 07:12
Show Gist options
  • Save tyrasd/f68cb96c43a13d9a09122369de8f5637 to your computer and use it in GitHub Desktop.
Save tyrasd/f68cb96c43a13d9a09122369de8f5637 to your computer and use it in GitHub Desktop.
Download ZIP
st flurnamen
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>st-flurnamen Preview</title>
<link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css" />
<script src="https://api.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js"></script>
<style>
body { margin:0; padding:0; background-color:black; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: 'style.json',
attributionControl: true,
hash: true
});
map.addControl(new mapboxgl.NavigationControl());
map.on('click', 'flur', function(e) {
new mapboxgl.Popup().setLngLat(e.features[0].geometry.coordinates).setHTML("<pre>"+JSON.stringify(e.features[0].properties, null, 2)+"</pre>").addTo(map);
});
map.on('mouseenter', 'flur', function() {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'flur', function() {
map.getCanvas().style.cursor = '';
});
</script>
</body>
</html>
Raw
style.json
{
"version": 8,
"name": "st flurnamen (points)",
"metadata": {
"mapbox:autocomposite": false,
"mapbox:type": "template",
"mapbox:groups": {
"b6371a3f2f5a9932464fa3867530a2e5": {
"name": "Transportation",
"collapsed": false
},
"a14c9607bc7954ba1df7205bf660433f": {
"name": "Boundaries"
},
"101da9f13b64a08fa4b6ac1168e89e5f": {
"name": "Places",
"collapsed": false
}
},
"openmaptiles:version": "3.x",
"openmaptiles:mapbox:owner": "openmaptiles",
"openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t"
},
"center": [
10.184401828277089,
-1.1368683772161603e-13
],
"zoom": 0.8902641636539237,
"bearing": 0,
"pitch": 0,
"sources": {
"flurnamen2": {
"type": "vector",
"tiles": [
"https://s3-eu-west-1.amazonaws.com/st-flurnamen/points/{z}/{x}/{y}.pbf"
],
"minZoom": 0,
"maxzoom": 16
},
"osm": {
"type": "raster",
"tiles": [
"https://tile.openstreetmap.org/{z}/{x}/{y}.png"
],
"tileSize": 256,
"minZoom": 0,
"maxzoom": 19
}
},
"sprite": "https://openmaptiles.github.io/positron-gl-style/sprite",
"glyphs": "https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key={key}",
"layers": [
{
"id": "osm-background",
"type": "raster",
"source": "osm",
"paint": {
"raster-opacity": 0.7,
"raster-brightness-max": 0.8,
"raster-saturation": -1.0
}
},
{
"id": "flur",
"type": "circle",
"source": "flurnamen2",
"source-layer": "st_flurnamen_points.wgs84",
"minzoom": 12,
"maxzoom": 16,
"paint": {
"circle-color": "rgba(156, 43, 43, 1)",
"circle-stroke-color": "rgba(145, 141, 0, 1)",
"circle-blur": 0.3,
"circle-radius": 8,
"circle-stroke-width": 1,
"circle-opacity": 0
}
},
{
"id": "name",
"type": "symbol",
"source": "flurnamen2",
"source-layer": "st_flurnamen_points.wgs84",
"layout": {
"text-field": "{GEPU_BEZEICHNUNG_DE}",
"text-size": 10,
"text-offset": [
0,
1.3
]
},
"paint": {
"text-color": "rgba(244, 239, 239, 1)"
}
}
],
"id": "ciwf3o3u2008z2pmq7pmvm6xq"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment