Skip to content

Instantly share code, notes, and snippets.

@stevage

stevage/index.html

Created January 2, 2017 09:42
Show Gist options
  • Save stevage/da23922b03c5fdcba909c68755da9bb3 to your computer and use it in GitHub Desktop.
Save stevage/da23922b03c5fdcba909c68755da9bb3 to your computer and use it in GitHub Desktop.
Download ZIP
Line-widths and data properties
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' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
/* jshint esnext: true */
var styleUrl = 'https://api.mapbox.com/styles/v1/stevage/cixfrvgyy00fz2pohtlvhosae?fresh=true&access_token=pk.eyJ1Ijoic3RldmFnZSIsImEiOiJGcW03aExzIn0.QUkUmTGIO3gGt83HiRIjQw&_=3';
var layers = [];
d3.json(styleUrl, function(style) {
style.layers.push({
id: `tour`,
source: 'composite',//'stevage.cycletours-5sht4b',
type: 'line',
layout: {
'line-join': 'round'
},
paint: {
'line-color': {
property: 'ppl',
type: 'exponential',
stops: [
[1, 'red'],
[16, 'blue']
],
colorSpace: 'hcl'
},
'line-width':{
property: 'ppl',
type: 'exponential',
stops: [
[1, 1],
[5, 2],
[20, 3],
[30, 10]
],
base: 1
}
},
'source-layer': 'cycletours-5sht4b'
});
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RldmFnZSIsImEiOiJGcW03aExzIn0.QUkUmTGIO3gGt83HiRIjQw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: style,
center: [144.97, -37.82], // starting position
zoom: 9,
minZoom: 7,
pitch: 0
});
map.on('mousemove',e => {
var features = map.queryRenderedFeatures(e.point, { layers: ['tour'] });
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = (features && features.length) ? 'pointer' : '';
if (features && features.length) {
console.log(features[0].properties);
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment