Skip to content

Instantly share code, notes, and snippets.

@kozy4324

kozy4324/index.html

Last active November 4, 2016 06:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kozy4324/5e9cc06085c5c308bfc7f772d344bc13 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kozy4324/5e9cc06085c5c308bfc7f772d344bc13 to your computer and use it in GitHub Desktop.
Download ZIP
FOSS4G 2016 Tokyo hands-on
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaGZ1IiwiYSI6ImlRSGJVUTAifQ.rTx380smyvPc1gUfZv1cmw';
map = new mapboxgl.Map({
container: 'map', style: 'mapbox://styles/mapbox/satellite-v9',
center: [135,35], zoom: 8.0, hash: true, maxZoom: 12
});
colors = [
'FC49A3', 'CC66FF', '66CCFF', '66FFCC',
'00FF00', 'FFCC66', 'FF6666', 'FF0000',
'FF8000', 'FFFF66', '00FFFF'
];
function randomColor() {
return '#' + colors[parseInt(Math.random() * colors.length)];
}
map.on('load', function () {
map.addSource('globalmaps-vt', {
tiles: ['https://globalmaps-vt.github.io/gmjp22vt/{z}/{x}/{y}.mvt'],
type: 'vector', maxzoom: 8
});
map.addLayer({
'id': 'AN010',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'AN010',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#000',
'line-width': 5
}
});
map.addLayer({
'id': 'AN500',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'AN500',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#e7b2a8',
'line-width': 2
}
});
/*
map.addLayer({
'id': 'AP030',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'AP030',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#ccc',
'line-width': 1
}
});
*/
map.addLayer({
'id': 'AP050',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'AP050',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#ccc',
'line-width': 1
}
});
map.addLayer({
'id': 'AP500',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'AP500',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#ccc',
'line-width': 1
}
});
map.addLayer({
'id': 'AQ040',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'AQ040',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#f00',
'line-width': 2
}
});
map.addLayer({
'id': 'AQ070',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'AQ070',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#5494a8',
'line-width': 1
}
});
map.addLayer({
'id': 'AQ130',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'AQ130',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#f00',
'line-width': 2
}
});
map.addLayer({
'id': 'BA010',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'BA010',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#5494a8',
'line-width': 1
}
});
map.addLayer({
'id': 'BH140',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'BH140',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#54a498',
'line-width': 1
}
});
map.addLayer({
'id': 'BH210',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'BH210',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#5494a8',
'line-width': 1
}
});
map.addLayer({
'id': 'BH502',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'BH502',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#5494a8',
'line-width': 1
}
});
map.addLayer({
'id': 'BI020',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'BI020',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#aaf',
'line-width': 2
}
});
map.addLayer({
'id': 'BI030',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'BI030',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#aaf',
'line-width': 2
}
});
/*
map.addLayer({
'id': 'FA000',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'FA000',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#f00',
'line-width': 1
}
});
*/
map.addLayer({
'id': 'XX500',
'type': 'line', 'source': 'globalmaps-vt', 'source-layer': 'XX500',
'layout': {'line-join': 'round', 'line-cap': 'round'},
'paint': {
'line-color': '#00f',
'line-width': 1
}
});
map.addLayer({
'id': 'AL020-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AL020',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AL105-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AL105',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AN060-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AN060',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AP020-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AP020',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AQ062-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AQ062',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AQ063-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AQ063',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AQ080-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AQ080',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AQ090-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AQ090',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AQ125-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AQ125',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AQ135-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'AQ135',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'BH170-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'BH170',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'BH503-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'BH503',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'BI029-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'BI029',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'BI030-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'BI030',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'GB005-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'GB005',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'ZD040-pt', 'type': 'symbol',
'source': 'globalmaps-vt', 'source-layer': 'ZD040',
'paint': {
'text-color': randomColor()
},
'layout': {
'text-field': '*',
}
});
map.addLayer({
'id': 'AL020-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'AL020',
'paint': {
'fill-color': '#f00',
'fill-opacity': 0.3
}
});
map.addLayer({
'id': 'BA020-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'BA020',
'paint': {
'fill-color': '#e3f3f7',
'fill-opacity': 0.5
}
});
map.addLayer({
'id': 'BA030-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'BA030',
'paint': {
'fill-color': randomColor(),
'fill-opacity': 0.8
}
});
map.addLayer({
'id': 'BA040-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'BA040',
'paint': {
'fill-color': '#e3f3f7',
'fill-opacity': 0.8
}
});
map.addLayer({
'id': 'BH000-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'BH000',
'paint': {
'fill-color': '#5494a8',
'fill-opacity': 0.8
}
});
map.addLayer({
'id': 'BH080-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'BH080',
'paint': {
'fill-color': '#e3f3f7',
'fill-opacity': 0.8
}
});
map.addLayer({
'id': 'BH130-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'BH130',
'paint': {
'fill-color': '#e3f3f7',
'fill-opacity': 0.8
}
});
map.addLayer({
'id': 'BJ030-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'BJ030',
'paint': {
'fill-color': '#ccf',
'fill-opacity': 0.5
}
});
map.addLayer({
'id': 'BJ100-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'BJ100',
'paint': {
'fill-color': '#ccf',
'fill-opacity': 0.5
}
});
map.addLayer({
'id': 'FA001-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'FA001',
'paint': {
'fill-color': '#fffcdb',
'fill-opacity': 1.0
}
});
map.addLayer({
'id': 'XX501-pg', 'type': 'fill',
'source': 'globalmaps-vt', 'source-layer': 'XX501',
'paint': {
'fill-color': '#ff0',
'fill-opacity': 0.8
}
});
});
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, {
//layers: ['FA001-pg']
});
if (!features.length) return;
var s = features.length + ' features.<br/>';
for(var i in features) {
var f_code = features[i].properties.f_code;
s += f_code;
if(f_code == 'FA001') {
s += ' ' + features[i].properties.nam + ' ' + features[i].properties.laa;
}
s += '<br/>';
}
var feature = features[0];
var popup = new mapboxgl.Popup()
.setLngLat(map.unproject(e.point))
.setHTML(s)
.addTo(map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment