Skip to content

Instantly share code, notes, and snippets.

@kuanb

kuanb/index.html

Last active August 10, 2017 20:15
Show Gist options
  • Save kuanb/6bc421ec4ee983e9853b39e35546f0c6 to your computer and use it in GitHub Desktop.
Save kuanb/6bc421ec4ee983e9853b39e35546f0c6 to your computer and use it in GitHub Desktop.
Download ZIP
Bl.ock to play with line offsetting in Mapbox GL.
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.38.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.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.eyJ1Ijoia3VhbmIiLCJhIjoidXdWUVZ2USJ9.qNKXXP6z9_fKA8qrmpOi6Q';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
zoom: 10,
center: [-122.341160, 37.784726]
});
map.on('load', function () {
map.addLayer({
'id': 'route',
'type': 'line',
'source': {
type: 'geojson',
data: geojson
},
'paint': {
// data-driven style for line color
'line-color': {
property: 'color',
type: 'identity'
},
//data-driven style for line offset
'line-offset': {
property: 'Order',
type: 'categorical',
stops: [
[1, 0],
[2, 3],
[3, 6],
[6, 9],
[9, 12]
]
},
'line-width': 3
}
});
});
// Line geometry
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Order": 1,
"color": "#ef4747"
},
"geometry": {
"type": "MultiLineString",
"coordinates": [ [ [ -121.942073, 38.018937 ],
[ -121.974088, 38.02375 ],
[ -121.974252, 38.023734 ],
[ -121.996811, 38.01393 ],
[ -121.99707, 38.013846 ],
[ -122.01949, 38.009386 ],
[ -122.019647, 38.009251 ],
[ -122.033572, 37.989836 ],
[ -122.033576, 37.989801 ],
[ -122.028361, 37.976832 ],
[ -122.028332, 37.976699 ],
[ -122.03139, 37.966219 ],
[ -122.031383, 37.966143 ],
[ -122.025161, 37.950118 ],
[ -122.025134, 37.950042 ],
[ -122.025205, 37.946765 ],
[ -122.02538, 37.946375 ],
[ -122.058554, 37.926333 ],
[ -122.058817, 37.926078 ],
[ -122.064633, 37.910421 ],
[ -122.064704, 37.910279 ],
[ -122.072551, 37.899008 ],
[ -122.072811, 37.898856 ],
[ -122.077399, 37.897452 ],
[ -122.077705, 37.897429 ],
[ -122.099021, 37.897527 ],
[ -122.099365, 37.897483 ],
[ -122.135349, 37.89067 ],
[ -122.135582, 37.89065 ],
[ -122.161788, 37.892956 ],
[ -122.16202, 37.892966 ],
[ -122.170928, 37.891676 ],
[ -122.171169, 37.891598 ],
[ -122.176594, 37.888345 ],
[ -122.176726, 37.888213 ],
[ -122.187586, 37.874776 ],
[ -122.187872, 37.874583 ],
[ -122.24683, 37.846623 ],
[ -122.247307, 37.846394 ],
[ -122.262577, 37.84089 ],
[ -122.262721, 37.840818 ],
[ -122.265151, 37.838467 ],
[ -122.265228, 37.83831 ],
[ -122.266223, 37.833272 ] ],
[ [ -122.266223, 37.833272 ],
[ -122.270896, 37.815301 ],
[ -122.27093, 37.81504 ],
[ -122.267688, 37.810365 ],
[ -122.267591, 37.810093 ],
[ -122.272386, 37.802362 ] ],
[ [ -122.276856, 37.798527 ],
[ -122.27459, 37.799065 ],
[ -122.274528, 37.799116 ],
[ -122.272386, 37.802362 ] ],
[ [ -122.469106, 37.706105 ],
[ -122.465351, 37.709849 ],
[ -122.465245, 37.70989 ],
[ -122.453978, 37.711421 ],
[ -122.453808, 37.711542 ],
[ -122.448844, 37.716072 ],
[ -122.448783, 37.716173 ],
[ -122.445526, 37.726234 ],
[ -122.445164, 37.726612 ],
[ -122.423827, 37.739869 ],
[ -122.423179, 37.740563 ],
[ -122.418186, 37.748868 ],
[ -122.41816, 37.749093 ],
[ -122.420215, 37.770362 ],
[ -122.420327, 37.771558 ],
[ -122.419406, 37.774983 ],
[ -122.419377, 37.775045 ],
[ -122.393814, 37.794904 ],
[ -122.393498, 37.79506 ],
[ -122.374499, 37.803034 ],
[ -122.374181, 37.803113 ],
[ -122.332755, 37.809816 ],
[ -122.332116, 37.809842 ],
[ -122.306411, 37.807806 ],
[ -122.305541, 37.807685 ],
[ -122.276856, 37.798527 ] ],
[ [ -122.466727, 37.684953 ],
[ -122.46955, 37.688926 ],
[ -122.469611, 37.689098 ],
[ -122.47098, 37.698007 ],
[ -122.470996, 37.698132 ],
[ -122.471063, 37.703206 ],
[ -122.471046, 37.703305 ],
[ -122.469106, 37.706105 ] ],
[ [ -122.386655, 37.599782 ],
[ -122.399673, 37.612791 ],
[ -122.399816, 37.612964 ],
[ -122.418474, 37.641967 ],
[ -122.418611, 37.642212 ],
[ -122.425651, 37.650544 ],
[ -122.426269, 37.651204 ],
[ -122.447444, 37.666429 ],
[ -122.447734, 37.666663 ],
[ -122.454356, 37.674569 ],
[ -122.454764, 37.674973 ],
[ -122.466727, 37.684953 ] ],
[ [ -122.392604, 37.616029 ],
[ -122.400993, 37.616 ] ],
[ [ -122.394208, 37.615656 ],
[ -122.39913, 37.615157 ],
[ -122.399239, 37.615086 ],
[ -122.399232, 37.612239 ] ] ]
}
},
{
"type": "Feature",
"properties": {
"Order": 2,
"color": "#ffea51"
},
"geometry": {
"type": "MultiLineString",
"coordinates": [ [ [ -122.117691, 37.690853 ],
[ -122.083076, 37.666953 ],
[ -122.082935, 37.66683 ],
[ -122.054167, 37.630498 ],
[ -122.053868, 37.63011 ],
[ -122.04842, 37.620214 ],
[ -122.048146, 37.619908 ],
[ -122.020354, 37.593104 ],
[ -122.020183, 37.592954 ],
[ -121.990996, 37.57067 ],
[ -121.990659, 37.570401 ],
[ -121.976395, 37.557353 ] ],
[ [ -122.270713, 37.799861 ],
[ -122.217092, 37.771119 ],
[ -122.216791, 37.770914 ],
[ -122.164801, 37.726886 ],
[ -122.164287, 37.72643 ],
[ -122.158639, 37.719034 ],
[ -122.158541, 37.718949 ],
[ -122.117691, 37.690853 ] ],
[ [ -122.270713, 37.799861 ],
[ -122.276856, 37.798527 ] ],
[ [ -122.469106, 37.706105 ],
[ -122.465351, 37.709849 ],
[ -122.465245, 37.70989 ],
[ -122.453978, 37.711421 ],
[ -122.453808, 37.711542 ],
[ -122.448844, 37.716072 ],
[ -122.448783, 37.716173 ],
[ -122.445526, 37.726234 ],
[ -122.445164, 37.726612 ],
[ -122.423827, 37.739869 ],
[ -122.423179, 37.740563 ],
[ -122.418186, 37.748868 ],
[ -122.41816, 37.749093 ],
[ -122.420215, 37.770362 ],
[ -122.420327, 37.771558 ],
[ -122.419406, 37.774983 ],
[ -122.419377, 37.775045 ],
[ -122.393814, 37.794904 ],
[ -122.393498, 37.79506 ],
[ -122.374499, 37.803034 ],
[ -122.374181, 37.803113 ],
[ -122.332755, 37.809816 ],
[ -122.332116, 37.809842 ],
[ -122.306411, 37.807806 ],
[ -122.305541, 37.807685 ],
[ -122.276856, 37.798527 ] ] ]
}
},
{
"type": "Feature",
"properties": {
"Order": 3,
"color": "#0b99a3"
},
"geometry": {
"type": "MultiLineString",
"coordinates": [ [ [ -121.900354, 37.701695 ],
[ -121.917938, 37.701834 ],
[ -121.918017, 37.701829 ],
[ -121.934709, 37.698355 ],
[ -121.934737, 37.698352 ],
[ -121.968028, 37.697216 ],
[ -121.968138, 37.697214 ],
[ -121.987342, 37.699771 ],
[ -121.987397, 37.699781 ],
[ -121.999792, 37.703468 ],
[ -121.999886, 37.703477 ],
[ -122.015863, 37.702852 ],
[ -122.015878, 37.702851 ],
[ -122.02403, 37.700838 ],
[ -122.024095, 37.700835 ],
[ -122.03374, 37.702133 ],
[ -122.033839, 37.702128 ],
[ -122.038965, 37.700677 ],
[ -122.039074, 37.700618 ],
[ -122.048551, 37.693891 ],
[ -122.0486, 37.693877 ],
[ -122.07481, 37.690745 ] ],
[ [ -122.07481, 37.690745 ],
[ -122.111841, 37.68856 ],
[ -122.111907, 37.68856 ],
[ -122.117716, 37.690854 ] ],
[ [ -122.270713, 37.799861 ],
[ -122.217092, 37.771119 ],
[ -122.216791, 37.770914 ],
[ -122.164801, 37.726886 ],
[ -122.164287, 37.72643 ],
[ -122.158639, 37.719034 ],
[ -122.158541, 37.718949 ],
[ -122.117691, 37.690853 ] ],
[ [ -122.270713, 37.799861 ],
[ -122.276856, 37.798527 ] ],
[ [ -122.469106, 37.706105 ],
[ -122.465351, 37.709849 ],
[ -122.465245, 37.70989 ],
[ -122.453978, 37.711421 ],
[ -122.453808, 37.711542 ],
[ -122.448844, 37.716072 ],
[ -122.448783, 37.716173 ],
[ -122.445526, 37.726234 ],
[ -122.445164, 37.726612 ],
[ -122.423827, 37.739869 ],
[ -122.423179, 37.740563 ],
[ -122.418186, 37.748868 ],
[ -122.41816, 37.749093 ],
[ -122.420215, 37.770362 ],
[ -122.420327, 37.771558 ],
[ -122.419406, 37.774983 ],
[ -122.419377, 37.775045 ],
[ -122.393814, 37.794904 ],
[ -122.393498, 37.79506 ],
[ -122.374499, 37.803034 ],
[ -122.374181, 37.803113 ],
[ -122.332755, 37.809816 ],
[ -122.332116, 37.809842 ],
[ -122.306411, 37.807806 ],
[ -122.305541, 37.807685 ],
[ -122.276856, 37.798527 ] ] ]
}
},
{
"type": "Feature",
"properties": {
"Order": 4,
"color": "#91e266"
},
"geometry": {
"type": "MultiLineString",
"coordinates": [ [ [ -122.353449, 37.937192 ],
[ -122.346176, 37.931616 ],
[ -122.346109, 37.9316 ],
[ -122.325175, 37.931196 ],
[ -122.324948, 37.931181 ],
[ -122.32058, 37.92951 ],
[ -122.320466, 37.929424 ],
[ -122.296689, 37.899721 ],
[ -122.296649, 37.89966 ],
[ -122.287333, 37.876035 ],
[ -122.287307, 37.876006 ],
[ -122.280193, 37.872864 ],
[ -122.280164, 37.872859 ],
[ -122.270302, 37.873811 ],
[ -122.27025, 37.873812 ],
[ -122.268602, 37.872796 ],
[ -122.268586, 37.872778 ],
[ -122.267134, 37.860836 ],
[ -122.26714, 37.860775 ],
[ -122.271232, 37.848101 ],
[ -122.271219, 37.847617 ],
[ -122.269565, 37.83944 ],
[ -122.269467, 37.839082 ],
[ -122.266223, 37.833272 ] ],
[ [ -122.266223, 37.833272 ],
[ -122.270896, 37.815301 ],
[ -122.27093, 37.81504 ],
[ -122.267688, 37.810365 ],
[ -122.267591, 37.810093 ],
[ -122.272386, 37.802362 ] ],
[ [ -122.272386, 37.802362 ],
[ -122.270713, 37.799861 ] ],
[ [ -122.270713, 37.799861 ],
[ -122.217092, 37.771119 ],
[ -122.216791, 37.770914 ],
[ -122.164801, 37.726886 ],
[ -122.164287, 37.72643 ],
[ -122.158639, 37.719034 ],
[ -122.158541, 37.718949 ],
[ -122.117691, 37.690853 ] ],
[ [ -122.117691, 37.690853 ],
[ -122.083076, 37.666953 ],
[ -122.082935, 37.66683 ],
[ -122.054167, 37.630498 ],
[ -122.053868, 37.63011 ],
[ -122.04842, 37.620214 ],
[ -122.048146, 37.619908 ],
[ -122.020354, 37.593104 ],
[ -122.020183, 37.592954 ],
[ -121.990996, 37.57067 ],
[ -121.990659, 37.570401 ],
[ -121.976395, 37.557353 ] ] ]
}
},
{
"type": "Feature",
"properties": {
"Order": 5,
"color": "#d60000"
},
"geometry": {
"type": "MultiLineString",
"coordinates": [ [ [ -122.353449, 37.937192 ],
[ -122.346176, 37.931616 ],
[ -122.346109, 37.9316 ],
[ -122.325175, 37.931196 ],
[ -122.324948, 37.931181 ],
[ -122.32058, 37.92951 ],
[ -122.320466, 37.929424 ],
[ -122.296689, 37.899721 ],
[ -122.296649, 37.89966 ],
[ -122.287333, 37.876035 ],
[ -122.287307, 37.876006 ],
[ -122.280193, 37.872864 ],
[ -122.280164, 37.872859 ],
[ -122.270302, 37.873811 ],
[ -122.27025, 37.873812 ],
[ -122.268602, 37.872796 ],
[ -122.268586, 37.872778 ],
[ -122.267134, 37.860836 ],
[ -122.26714, 37.860775 ],
[ -122.271232, 37.848101 ],
[ -122.271219, 37.847617 ],
[ -122.269565, 37.83944 ],
[ -122.269467, 37.839082 ],
[ -122.266223, 37.833272 ] ],
[ [ -122.266223, 37.833272 ],
[ -122.270896, 37.815301 ],
[ -122.27093, 37.81504 ],
[ -122.267688, 37.810365 ],
[ -122.267591, 37.810093 ],
[ -122.272386, 37.802362 ] ],
[ [ -122.276856, 37.798527 ],
[ -122.27459, 37.799065 ],
[ -122.274528, 37.799116 ],
[ -122.272386, 37.802362 ] ],
[ [ -122.469106, 37.706105 ],
[ -122.465351, 37.709849 ],
[ -122.465245, 37.70989 ],
[ -122.453978, 37.711421 ],
[ -122.453808, 37.711542 ],
[ -122.448844, 37.716072 ],
[ -122.448783, 37.716173 ],
[ -122.445526, 37.726234 ],
[ -122.445164, 37.726612 ],
[ -122.423827, 37.739869 ],
[ -122.423179, 37.740563 ],
[ -122.418186, 37.748868 ],
[ -122.41816, 37.749093 ],
[ -122.420215, 37.770362 ],
[ -122.420327, 37.771558 ],
[ -122.419406, 37.774983 ],
[ -122.419377, 37.775045 ],
[ -122.393814, 37.794904 ],
[ -122.393498, 37.79506 ],
[ -122.374499, 37.803034 ],
[ -122.374181, 37.803113 ],
[ -122.332755, 37.809816 ],
[ -122.332116, 37.809842 ],
[ -122.306411, 37.807806 ],
[ -122.305541, 37.807685 ],
[ -122.276856, 37.798527 ] ],
[ [ -122.466727, 37.684953 ],
[ -122.46955, 37.688926 ],
[ -122.469611, 37.689098 ],
[ -122.47098, 37.698007 ],
[ -122.470996, 37.698132 ],
[ -122.471063, 37.703206 ],
[ -122.471046, 37.703305 ],
[ -122.469106, 37.706105 ] ],
[ [ -122.386655, 37.599782 ],
[ -122.399673, 37.612791 ],
[ -122.399816, 37.612964 ],
[ -122.418474, 37.641967 ],
[ -122.418611, 37.642212 ],
[ -122.425651, 37.650544 ],
[ -122.426269, 37.651204 ],
[ -122.447444, 37.666429 ],
[ -122.447734, 37.666663 ],
[ -122.454356, 37.674569 ],
[ -122.454764, 37.674973 ],
[ -122.466727, 37.684953 ] ] ]
}
}
]
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment