Skip to content

Instantly share code, notes, and snippets.

@rustyb

rustyb/buildings.html

Last active January 10, 2016 23:35
Show Gist options
  • Save rustyb/273afd714ed3d474ec0f to your computer and use it in GitHub Desktop.
Save rustyb/273afd714ed3d474ec0f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
buildings.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.12.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css' rel='stylesheet' />
<script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
<link href="//mapbox.com/base/latest/base.css" rel="stylesheet">
<style>
#color-map { position:absolute; top:0; bottom:0; left: 0; right: 35%; }
body { background-color: #28353d; margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; left: 0; right: 30%; }
#sidebar { position:absolute; top:0; bottom: 0; right: 0; width: 35%; }
#sidebar div { padding: 20px; overflow: auto;}
#sidebar pre { overflow: auto; max-height: 400px;}
</style>
</head>
<body>
<div id='color-map' class="mapboxgl-map"></div>
<div id="sidebar" class="fill-navy dark">
<div>
<h3 class="fancy space-bottom-1 keyline-bottom">#MapLesotho Building Density</h3>
<p>This map is showing the relative building density in lesotho when related to a 500m x 500m grid.</p>
<p>When run on data from 9th Jan 2016 there were a total of <strong>469,116</strong></p>
<p>You can view some explorartory analysis of the building counts in an <a href="https://github.com/rustyb/lesotho_manual/blob/gh-pages/data_analysis/les_buildings/lesotho_buildings.ipynb">ipython notebook</a>.</p>
<p>Distribution of counts
<img style="height: 180px;background: #fff;" src="data:image/png;base64,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%0AMe4AAAAASUVORK5CYII=%0A">
</p>
<hr>
<p>Hovering over a grid square shows you the total number of buildings which fall within this square.</p>
<h3 class="space-bottom-2">Legend</h3>
<div id="ramp" class="legend">
<div class="ramp" style="background-color: rgba(255,247,243,.1);">1</div>
<div class="ramp" style="background-color: rgba(253,224,221,.2);">10</div>
<div class="ramp" style="background-color: rgba(252,197,192,.3);">17</div>
<div class="ramp" style="background-color: rgba(250,159,181,.4);">33</div>
<div class="ramp" style="background-color: rgba(247,104,161,.5);">53</div>
<div class="ramp" style="background-color: rgba(221,52,151,.6);">81</div>
<div class="ramp" style="background-color: rgba(174,1,126,.7);">123</div>
<div class="ramp" style="background-color: rgba(122,1,119,.8);">171</div>
<div class="ramp" style="background-color: rgba(73,0,106,.9);">229+</div>
</div>
</div>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicnVzdHkiLCJhIjoib0FjUkJybyJ9.V9QoXck_1Z18MhpwyIE2Og';
var choroStyle = {
version: 8,
name: 'Basic',
sources: {
'les-buildings': {
'type': 'vector',
'url': 'mapbox://rusty.8559ye25'
}
},
sprite: '',
glyphs: '',
layers: [{
id: 'background',
type: 'background',
paint: { 'background-color': '#000' }
}]
}
//var breaks = ["0.5", "5", "17", "33", "53", "81", "123", "171", "229", "350", "517"]
var breaks = ["0.5", "10", "17", "33", "53", "81", "123", "171", "229"]
var colours = ['rgba(255,247,243,.1)',
'rgba(253,224,221,.2)',
'rgba(252,197,192,.3)',
'rgba(250,159,181,.4)',
'rgba(247,104,161,.5)',
'rgba(221,52,151,.6)',
'rgba(174,1,126,.7)',
'rgba(122,1,119,.8)',
'rgba(73,0,106,.9)']
//['rgb(255,247,236)', 'rgb(254,232,200)', 'rgb(253,212,158)', 'rgb(253,187,132)', 'rgb(252,141,89)', 'rgb(239,101,72)', 'rgb(215,48,31)', 'rgb(179,0,0)', 'rgb(127,0,0)']
//["#FFFF00", "#FFE200","#FFC600","#FFAA00","#FF8D00","#FF7100","#FF5500", "#FF3800", "#FF1C00", "#FF0000"]
//["#ffeda0","#fed976","#feb24c","#fd8d3c", "#fc4e2a","#e31a1c","#bd0026","#800026","#FF1000", "#FF0000"]
/*var colours = ["#FFA500", "#FF9400", "#FF8400", "#FF7300", "#FF6300", "#FF5200", "#FF4100", "#FF3100", "#FF2000","#FF1000", "#FF0000"]*/
var choro = new mapboxgl.Map({
container: 'color-map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [27.52, -29.32],
zoom: 10, // starting zoom
hash: true
})
choro.on('style.load', function() {
choro.addSource("les-buildings", {
"type": "vector",
"url": "mapbox://rusty.8559ye25"
});
for (var p = 0; p < breaks.length; p++) {
var filters
if (p < breaks.length - 1) {
filters = [ 'all',
[ '>=', 'bd_count_dec_total', breaks[p] ],
[ '<', 'bd_count_dec_total', breaks[p + 1] ]
]
} else {
filters = [ 'all',
[ '>=', 'bd_count_dec_total', breaks[p] ]
]
}
choro.addLayer({
id: 'buildings-pop-' + p,
interactive: true,
type: 'fill',
source: 'les-buildings',
'source-layer': 'les_buildings_jan4326',
paint: {
'fill-color': colours[p],
'fill-opacity': 0.4,
"fill-outline-color": "rgba(0,255,153,0.1)"
},
filter: filters
})
}
});
choro.on('click', function(e) {
choro.featuresAt(e.point, {radius: 1, includeGeometry:false}, function(err, features) {
if (err) throw err;
tyndpFeatures = []
for (var i = features.length - 1; i >= 0; i--) {
feature = features[i]
if (feature['layer']['source']){
tyndpFeatures.push(feature['properties']['bd_count_dec_total'])
}
};
console.log(JSON.stringify(tyndpFeatures, null, 2));
})
});
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
choro.on('mousemove', function(e) {
choro.featuresAt(e.point, {
radius: 1, // Half the marker size (15px).
includeGeometry: true,
'source-layer': 'les_buildings_jan4326',
}, function(err, features) {
// Change the cursor style as a UI indicator.
choro.getCanvas().style.cursor = (!err && features.length) ? 'pointer' : '';
if (err || !features.length) {
popup.remove();
return;
}
var feature = features[0];
// Initialize a popup and set its coordinates
// based on the feature found.
centroidPt = turf.centroid(feature);
if(feature['properties']['bd_count_dec_total']) {
popup.setLngLat(centroidPt.geometry.coordinates)
.setHTML(feature.properties['bd_count_dec_total'])
.addTo(choro);
}
});
});
</script>
<style type="text/css">
div.legend {
display: table-row;
}
.ramp {
background-color: rgb(255,245,240);
height: 30px;
width: 50px;
vertical-align: middle;
text-align: center;
display: table-cell;
overflow: hidden;
padding: 0 !important;
}
.ramp.text {
background-color: inherit;
text-align: center;
}
</style>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
constituencies_for_detailed_map.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
dark.json
{
"version": 8,
"name": "Dark",
"metadata": {
"mapbox:groups": {
"1444855829844.9736": {
"name": "Aeroways",
"collapsed": true
},
"1444855878987.3848": {
"name": "Landuses",
"collapsed": true
},
"1444855808224.0002": {
"name": "Bridges",
"collapsed": true
},
"1444855728283.4546": {
"name": "Place labels",
"collapsed": true
},
"1444855743302.092": {
"name": "POI labels",
"collapsed": true
},
"1444855823615.3472": {
"name": "Tunnels",
"collapsed": true
},
"1444855712732.9983": {
"name": "State labels",
"collapsed": true
},
"1444855871001.7312": {
"name": "Hillshades",
"collapsed": true
},
"1444855787203.2078": {
"name": "Waterway labels",
"collapsed": true
},
"1444855767413.334": {
"name": "Road labels",
"collapsed": true
},
"1444855862406.4956": {
"name": "Buildings",
"collapsed": true
},
"1444855720231.1272": {
"name": "Marine labels",
"collapsed": true
},
"1444855816509.7878": {
"name": "Roads",
"collapsed": true
},
"1444855707128.6584": {
"name": "Country labels",
"collapsed": true
},
"1444855886145.2253": {
"name": "Landcovers",
"collapsed": true
},
"1444855797854.0842": {
"name": "Admin boundaries",
"collapsed": true
},
"1444855733376.9668": {
"name": "Water labels",
"collapsed": true
},
"1444855857485.0151": {
"name": "Water",
"collapsed": true
}
}
},
"sources": {
"mapbox": {
"url": "mapbox://mapbox.mapbox-streets-v6",
"type": "vector"
},
"mapbox://mapbox.mapbox-terrain-v2": {
"url": "mapbox://mapbox.mapbox-terrain-v2",
"type": "vector"
}
},
"sprite": "mapbox://sprites/mapbox/dark-v8",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#111"
}
},
{
"id": "landcover_snow",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "landcover",
"filter": [
"==",
"class",
"snow"
],
"paint": {
"fill-color": "#000",
"fill-opacity": 0.5
},
"metadata": {
"mapbox:group": "1444855886145.2253"
}
},
{
"id": "landcover_crop",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "landcover",
"filter": [
"==",
"class",
"crop"
],
"paint": {
"fill-color": "#131313",
"fill-opacity": 0.5
},
"metadata": {
"mapbox:group": "1444855886145.2253"
}
},
{
"id": "landcover_grass",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "landcover",
"filter": [
"==",
"class",
"grass"
],
"paint": {
"fill-color": "#1a1a1a",
"fill-opacity": 0.5
},
"metadata": {
"mapbox:group": "1444855886145.2253"
}
},
{
"id": "landcover_scrub",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "landcover",
"filter": [
"==",
"class",
"scrub"
],
"paint": {
"fill-color": "#1c1c1c",
"fill-opacity": 0.5
},
"metadata": {
"mapbox:group": "1444855886145.2253"
}
},
{
"id": "landcover_wood",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "landcover",
"filter": [
"==",
"class",
"wood"
],
"paint": {
"fill-color": "#232323",
"fill-opacity": 0.5
},
"metadata": {
"mapbox:group": "1444855886145.2253"
}
},
{
"id": "landuse_industrial",
"type": "fill",
"source": "mapbox",
"source-layer": "landuse",
"filter": [
"all",
[
"==",
"$type",
"Polygon"
],
[
"==",
"class",
"industrial"
]
],
"paint": {
"fill-color": "#000",
"fill-opacity": 0.5
},
"metadata": {
"mapbox:group": "1444855878987.3848"
}
},
{
"id": "landuse_park",
"type": "fill",
"source": "mapbox",
"source-layer": "landuse",
"filter": [
"==",
"class",
"park"
],
"paint": {
"fill-color": "#1b1b1b"
},
"metadata": {
"mapbox:group": "1444855878987.3848"
}
},
{
"id": "landuse_wood",
"type": "fill",
"source": "mapbox",
"source-layer": "landuse",
"filter": [
"==",
"class",
"wood"
],
"paint": {
"fill-color": "#1f1f1f"
},
"metadata": {
"mapbox:group": "1444855878987.3848"
}
},
{
"id": "hillshade_highlight_bright",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "hillshade",
"filter": [
"==",
"level",
94
],
"paint": {
"fill-color": "#000",
"fill-opacity": {
"base": 1,
"stops": [
[
15,
0.15
],
[
17,
0.05
]
]
}
},
"metadata": {
"mapbox:group": "1444855871001.7312"
}
},
{
"id": "hillshade_highlight_med",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "hillshade",
"filter": [
"==",
"level",
90
],
"paint": {
"fill-color": "#000",
"fill-opacity": {
"base": 1,
"stops": [
[
15,
0.15
],
[
17,
0.05
]
]
}
},
"metadata": {
"mapbox:group": "1444855871001.7312"
}
},
{
"id": "hillshade_shadow_faint",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "hillshade",
"filter": [
"==",
"level",
89
],
"paint": {
"fill-color": "#999999",
"fill-opacity": {
"base": 1,
"stops": [
[
14,
0.06
],
[
17,
0.01
]
]
}
},
"metadata": {
"mapbox:group": "1444855871001.7312"
}
},
{
"id": "hillshade_shadow_med",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "hillshade",
"filter": [
"==",
"level",
78
],
"paint": {
"fill-color": "#999999",
"fill-opacity": {
"base": 1,
"stops": [
[
14,
0.06
],
[
17,
0.01
]
]
}
},
"metadata": {
"mapbox:group": "1444855871001.7312"
}
},
{
"id": "hillshade_shadow_dark",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "hillshade",
"filter": [
"==",
"level",
67
],
"paint": {
"fill-color": "#888888",
"fill-opacity": {
"base": 1,
"stops": [
[
14,
0.06
],
[
17,
0.01
]
]
}
},
"metadata": {
"mapbox:group": "1444855871001.7312"
}
},
{
"id": "hillshade_shadow_extreme",
"type": "fill",
"source": "mapbox://mapbox.mapbox-terrain-v2",
"source-layer": "hillshade",
"filter": [
"==",
"level",
56
],
"paint": {
"fill-color": "#999",
"fill-opacity": {
"base": 1,
"stops": [
[
14,
0.06
],
[
17,
0.01
]
]
}
},
"metadata": {
"mapbox:group": "1444855871001.7312"
}
},
{
"id": "building",
"type": "fill",
"source": "mapbox",
"source-layer": "building",
"minzoom": 15,
"paint": {
"fill-outline-color": "#444444",
"fill-opacity": {
"base": 1,
"stops": [
[
15,
0
],
[
16.5,
1
]
]
},
"fill-antialias": true,
"fill-color": "#383838"
},
"metadata": {
"mapbox:group": "1444855862406.4956"
}
},
{
"id": "waterway",
"type": "line",
"source": "mapbox",
"source-layer": "waterway",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"river",
"canal"
]
],
"paint": {
"line-color": "#2c2c2c",
"line-width": {
"base": 1,
"stops": [
[
6,
0.25
],
[
20,
6
]
]
}
},
"metadata": {
"mapbox:group": "1444855857485.0151"
}
},
{
"id": "waterway_stream",
"type": "line",
"source": "mapbox",
"source-layer": "waterway",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"class",
"stream"
]
],
"paint": {
"line-color": "#2c2c2c",
"line-width": {
"base": 1,
"stops": [
[
13,
0.75
],
[
20,
4
]
]
}
},
"metadata": {
"mapbox:group": "1444855857485.0151"
}
},
{
"id": "water",
"type": "fill",
"source": "mapbox",
"source-layer": "water",
"paint": {
"fill-color": "#2c2c2c"
},
"metadata": {
"mapbox:group": "1444855857485.0151"
}
},
{
"id": "aeroway_runway",
"type": "line",
"source": "mapbox",
"source-layer": "aeroway",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"type",
"runway"
]
],
"layout": {
"line-join": "miter",
"visibility": "visible"
},
"paint": {
"line-width": {
"base": 1.15,
"stops": [
[
11,
3
],
[
20,
32
]
]
},
"line-color": "#000",
"line-opacity": {
"base": 1,
"stops": [
[
9,
0.5
],
[
11,
1
]
]
}
},
"metadata": {
"mapbox:group": "1444855829844.9736"
}
},
{
"id": "aeroway_taxiway",
"type": "line",
"source": "mapbox",
"source-layer": "aeroway",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"type",
"taxiway"
]
],
"layout": {
"line-join": "miter"
},
"paint": {
"line-width": {
"base": 1.15,
"stops": [
[
10,
0.25
],
[
11,
1
],
[
20,
8
]
]
},
"line-color": "#3c3c3c"
},
"metadata": {
"mapbox:group": "1444855829844.9736"
}
},
{
"id": "tunnel_minor",
"type": "line",
"source": "mapbox",
"source-layer": "tunnel",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"driveway",
"path"
]
],
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
20
]
]
},
"line-dasharray": [
0.36,
0.18
]
},
"metadata": {
"mapbox:group": "1444855823615.3472"
}
},
{
"id": "tunnel_major",
"type": "line",
"source": "mapbox",
"source-layer": "tunnel",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"motorway",
"main"
]
],
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.4,
"stops": [
[
6,
0.5
],
[
20,
30
]
]
},
"line-dasharray": [
0.28,
0.14
]
},
"metadata": {
"mapbox:group": "1444855823615.3472"
}
},
{
"id": "road-path",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"==",
"class",
"path"
],
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1,
"stops": [
[
15,
1
],
[
18,
4
]
]
}
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-street-low-zoom",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"street",
"street_limited"
]
],
"minzoom": 11,
"maxzoom": 14.1,
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
12.5,
0.5
],
[
14,
2
],
[
18,
18
]
]
},
"line-opacity": {
"base": 1,
"stops": [
[
11.5,
0
],
[
12,
1
]
]
}
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-service-driveway",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"in",
"class",
"service",
"driveway"
],
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1,
"stops": [
[
14,
0.5
],
[
18,
12
]
]
}
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-motorway_link",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"==",
"class",
"motorway_link"
],
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
12.5,
0.5
],
[
14,
2
],
[
18,
18
]
]
}
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-street_limited",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"class",
"street_limited"
]
],
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
12.5,
0.5
],
[
14,
2
],
[
18,
18
]
]
}
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-street",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"class",
"street"
]
],
"minzoom": 14,
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
12.5,
0.3
],
[
14,
2
],
[
18,
18
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-main",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"class",
"main"
]
],
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
6,
0.5
],
[
18,
26
]
]
},
"line-opacity": {
"base": 1,
"stops": [
[
5,
0
],
[
5.5,
1
]
]
}
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-trunk",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"all",
[
"==",
"class",
"main"
],
[
"==",
"type",
"trunk"
]
],
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
5,
0.75
],
[
18,
32
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-motorway",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"==",
"class",
"motorway"
],
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
5,
0.75
],
[
18,
32
]
]
},
"line-opacity": {
"base": 1,
"stops": [
[
5,
0
],
[
5.5,
1
]
]
}
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-rail",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"in",
"class",
"major_rail",
"minor_rail"
],
"minzoom": 13,
"layout": {
"line-cap": "round",
"line-join": "round",
"visibility": "visible"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
14,
0.5
],
[
20,
1
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "road-rail-tracks",
"type": "line",
"source": "mapbox",
"source-layer": "road",
"filter": [
"in",
"class",
"major_rail",
"minor_rail"
],
"minzoom": 13,
"layout": {
"line-cap": "butt",
"line-join": "miter",
"visibility": "visible"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
14,
4
],
[
20,
8
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855816509.7878"
}
},
{
"id": "bridge_minor_case",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"motorway_link",
"street",
"street_limited",
"service",
"driveway",
"path"
]
],
"paint": {
"line-color": "#111",
"line-width": {
"base": 1.6,
"stops": [
[
12,
0.5
],
[
20,
10
]
]
},
"line-gap-width": {
"base": 1.55,
"stops": [
[
4,
0.25
],
[
20,
20
]
]
}
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-path",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"==",
"class",
"path"
],
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
15,
1
],
[
18,
4
]
]
}
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-street-low-zoom",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"class",
"street",
"street_limited"
]
],
"minzoom": 11,
"maxzoom": 14.1,
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
12.5,
0.5
],
[
14,
2
],
[
18,
18
]
]
},
"line-opacity": {
"base": 1,
"stops": [
[
11.5,
0
],
[
12,
1
]
]
}
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-motorway_link",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"class",
"motorway_link"
]
],
"minzoom": 10,
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
12.5,
0.5
],
[
14,
2
],
[
18,
18
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-street_limited",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"class",
"street_limited"
]
],
"minzoom": 14,
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
12.5,
0.5
],
[
14,
2
],
[
18,
18
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-street",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"==",
"class",
"street"
],
"minzoom": 14,
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
12.5,
0.5
],
[
14,
2
],
[
18,
18
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-main",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"all",
[
"==",
"class",
"main"
],
[
"!=",
"type",
"trunk"
]
],
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
6,
0.5
],
[
18,
26
]
]
},
"line-opacity": {
"base": 1,
"stops": [
[
5,
0
],
[
5.5,
1
]
]
}
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-trunk",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"all",
[
"==",
"class",
"main"
],
[
"==",
"type",
"trunk"
]
],
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1,
"stops": [
[
3,
0.5
],
[
9,
1.25
],
[
20,
10
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-motorway",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"==",
"class",
"motorway"
],
"layout": {
"visibility": "visible",
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1,
"stops": [
[
3,
0.5
],
[
9,
1.25
],
[
20,
10
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-rail",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"in",
"class",
"major_rail",
"minor_rail"
],
"minzoom": 13,
"layout": {
"visibility": "visible",
"line-cap": "butt",
"line-join": "miter",
"line-round-limit": 2
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
14,
0.5
],
[
20,
1
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-rail-tracks",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"in",
"class",
"major_rail",
"minor_rail"
],
"minzoom": 14,
"layout": {
"visibility": "visible",
"line-cap": "butt",
"line-join": "miter",
"line-round-limit": 2
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
14,
4
],
[
20,
8
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "bridge-rail-tracks_copy",
"type": "line",
"source": "mapbox",
"source-layer": "bridge",
"filter": [
"==",
"class",
"aerialway"
],
"minzoom": 14,
"layout": {
"visibility": "visible",
"line-cap": "butt",
"line-join": "miter",
"line-round-limit": 2
},
"paint": {
"line-color": "#484848",
"line-width": {
"base": 1.5,
"stops": [
[
14,
0.5
],
[
20,
1
]
]
},
"line-opacity": 1
},
"metadata": {
"mapbox:group": "1444855808224.0002"
}
},
{
"id": "admin-3-4-boundaries-bg",
"type": "line",
"source": "mapbox",
"source-layer": "admin",
"filter": [
"all",
[
">=",
"admin_level",
3
],
[
"==",
"maritime",
0
]
],
"layout": {
"visibility": "visible",
"line-join": "bevel"
},
"paint": {
"line-width": {
"base": 1,
"stops": [
[
3,
3.5
],
[
12,
6
]
]
},
"line-opacity": {
"base": 1,
"stops": [
[
2,
0
],
[
5,
0.75
]
]
},
"line-color": "#000"
},
"metadata": {
"mapbox:group": "1444855797854.0842"
}
},
{
"id": "admin-2-boundaries-bg",
"type": "line",
"source": "mapbox",
"source-layer": "admin",
"filter": [
"all",
[
"==",
"admin_level",
2
],
[
"==",
"maritime",
0
],
[
"==",
"disputed",
2
]
],
"layout": {
"visibility": "visible",
"line-join": "miter"
},
"paint": {
"line-color": "#000000",
"line-opacity": {
"base": 1,
"stops": [
[
3,
0
],
[
4,
0.75
]
]
},
"line-width": {
"base": 1,
"stops": [
[
2,
3.5
],
[
10,
10
]
]
}
},
"metadata": {
"mapbox:group": "1444855797854.0842"
}
},
{
"id": "admin-3-4-boundaries",
"type": "line",
"source": "mapbox",
"source-layer": "admin",
"filter": [
"all",
[
">=",
"admin_level",
3
],
[
"==",
"maritime",
0
]
],
"layout": {
"visibility": "visible",
"line-join": "miter"
},
"paint": {
"line-color": "#797979",
"line-opacity": {
"base": 1,
"stops": [
[
2,
0
],
[
3,
1
]
]
},
"line-width": {
"base": 1,
"stops": [
[
3,
0.5
],
[
12,
2
]
]
},
"line-dasharray": {
"base": 1,
"stops": [
[
4,
[
2,
0
]
],
[
5,
[
2,
2,
6,
2
]
]
]
}
},
"metadata": {
"mapbox:group": "1444855797854.0842"
}
},
{
"id": "admin-2-boundaries",
"type": "line",
"source": "mapbox",
"source-layer": "admin",
"filter": [
"all",
[
"==",
"admin_level",
2
],
[
"==",
"maritime",
0
],
[
"==",
"disputed",
0
]
],
"minzoom": 1,
"layout": {
"visibility": "visible",
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#5f5f5f",
"line-opacity": 1,
"line-width": {
"base": 1,
"stops": [
[
3,
0.5
],
[
10,
2
]
]
}
},
"metadata": {
"mapbox:group": "1444855797854.0842"
}
},
{
"id": "waterway-label",
"type": "symbol",
"source": "mapbox",
"source-layer": "waterway_label",
"filter": [
"==",
"class",
"river"
],
"minzoom": 12,
"layout": {
"text-font": [
"DIN Offc Pro Italic",
"Arial Unicode MS Regular"
],
"visibility": "visible",
"symbol-placement": "line",
"text-field": "{name_en}",
"text-size": {
"base": 1,
"stops": [
[
13,
12
],
[
18,
16
]
]
}
},
"paint": {
"text-color": "#929292"
},
"metadata": {
"mapbox:group": "1444855787203.2078"
}
},
{
"id": "road-label-sm",
"type": "symbol",
"source": "mapbox",
"source-layer": "road_label",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"!in",
"class",
"motorway",
"main",
"street_limited",
"street"
]
],
"minzoom": 12,
"layout": {
"symbol-placement": "line",
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-transform": "none",
"text-letter-spacing": 0,
"text-padding": 0,
"text-size": {
"base": 1,
"stops": [
[
8,
8
],
[
20,
15
]
]
}
},
"paint": {
"text-halo-color": "#000",
"text-halo-width": 2,
"text-color": "#929292"
},
"metadata": {
"mapbox:group": "1444855767413.334"
}
},
{
"id": "road-label-med",
"type": "symbol",
"source": "mapbox",
"source-layer": "road_label",
"filter": [
"in",
"class",
"street",
"street_limited"
],
"layout": {
"symbol-placement": "line",
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-transform": "none",
"text-letter-spacing": 0,
"text-padding": 0,
"text-size": {
"base": 1,
"stops": [
[
8,
8
],
[
20,
16
]
]
}
},
"paint": {
"text-halo-color": "#000",
"text-halo-width": 2,
"text-color": "#929292"
},
"metadata": {
"mapbox:group": "1444855767413.334"
}
},
{
"id": "road-label-large",
"type": "symbol",
"source": "mapbox",
"source-layer": "road_label",
"filter": [
"in",
"class",
"motorway",
"main"
],
"layout": {
"symbol-placement": "line",
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-transform": "none",
"text-letter-spacing": 0,
"text-padding": 0,
"text-size": {
"base": 1,
"stops": [
[
8,
8
],
[
20,
17
]
]
}
},
"paint": {
"text-halo-color": "#000",
"text-halo-width": 2,
"text-color": "#929292"
},
"metadata": {
"mapbox:group": "1444855767413.334"
}
},
{
"id": "airport-label",
"type": "symbol",
"source": "mapbox",
"source-layer": "poi_label",
"filter": [
"all",
[
"in",
"maki",
"airport",
"heliport",
"rocket"
],
[
"<=",
"scalerank",
2
]
],
"layout": {
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"visibility": "visible",
"text-field": {
"base": 1,
"stops": [
[
10,
"{name_en}"
],
[
13,
""
]
]
},
"text-max-width": 9,
"text-size": {
"base": 1,
"stops": [
[
10,
10
],
[
18,
18
]
]
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1,
"text-halo-blur": 0
},
"metadata": {
"mapbox:group": "1444855743302.092"
}
},
{
"id": "poi-parks-scalerank1",
"type": "symbol",
"source": "mapbox",
"source-layer": "poi_label",
"filter": [
"all",
[
"==",
"scalerank",
1
],
[
"==",
"maki",
"park"
]
],
"layout": {
"text-max-width": 8,
"visibility": "visible",
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Regular",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
10,
10
],
[
18,
14
]
]
}
},
"paint": {
"text-color": "#c2c2c2",
"text-halo-color": "#000",
"text-halo-width": 1
},
"metadata": {
"mapbox:group": "1444855743302.092"
}
},
{
"id": "poi-scalerank1",
"type": "symbol",
"source": "mapbox",
"source-layer": "poi_label",
"filter": [
"all",
[
"!in",
"maki",
"rail-light",
"rail-metro",
"rail",
"airport",
"airfield",
"heliport",
"rocket",
"park",
"golf",
"cemetary",
"zoo",
"campsite",
"swimming",
"dog-park"
],
[
"<=",
"scalerank",
1
]
],
"layout": {
"text-max-width": 8,
"visibility": "visible",
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Regular",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
10,
10
],
[
18,
14
]
]
}
},
"paint": {
"text-color": "#b7b8b7",
"text-halo-color": "#000",
"text-halo-width": 1
},
"metadata": {
"mapbox:group": "1444855743302.092"
}
},
{
"id": "water-label",
"type": "symbol",
"source": "mapbox",
"source-layer": "water_label",
"minzoom": 5,
"layout": {
"text-font": [
"DIN Offc Pro Italic",
"Arial Unicode MS Regular"
],
"visibility": "visible",
"text-field": "{name_en}",
"text-max-width": 7,
"text-size": {
"base": 1,
"stops": [
[
13,
12
],
[
18,
16
]
]
}
},
"paint": {
"text-color": {
"base": 1,
"stops": [
[
0,
"#969696"
],
[
20,
"#969696"
]
]
}
},
"metadata": {
"mapbox:group": "1444855733376.9668"
}
},
{
"id": "place_label_neighborhood",
"type": "symbol",
"source": "mapbox",
"source-layer": "place_label",
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"in",
"type",
"suburb",
"neighbourhood"
]
],
"minzoom": 12,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Bold",
"Arial Unicode MS Bold"
],
"text-max-width": 7,
"text-letter-spacing": 0.1,
"text-transform": "uppercase",
"text-size": {
"stops": [
[
12,
10
],
[
16,
14
]
]
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1,
"text-halo-blur": 1,
"text-opacity": {
"base": 1,
"stops": [
[
0,
0
],
[
12,
0.66
],
[
13,
1
]
]
}
},
"metadata": {
"mapbox:group": "1444855728283.4546"
}
},
{
"id": "place_label_other",
"type": "symbol",
"source": "mapbox",
"source-layer": "place_label",
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"in",
"type",
"town",
"village",
"hamlet"
]
],
"minzoom": 8,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-max-width": 15,
"text-size": {
"stops": [
[
6,
10
],
[
12,
13
]
]
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1,
"text-halo-blur": 1
},
"metadata": {
"mapbox:group": "1444855728283.4546"
}
},
{
"id": "place_label_city_small_s",
"type": "symbol",
"source": "mapbox",
"source-layer": "place_label",
"filter": [
"all",
[
"==",
"type",
"city"
],
[
">",
"scalerank",
4
],
[
"in",
"ldir",
"S",
"E",
"SE",
"SW"
]
],
"maxzoom": 16,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-max-width": 10,
"text-anchor": {
"base": 1,
"stops": [
[
0,
"top"
],
[
6,
"center"
]
]
},
"text-offset": {
"base": 1,
"stops": [
[
0,
[
0,
0.1
]
],
[
6,
[
0,
0
]
]
]
},
"text-size": {
"stops": [
[
6,
11
],
[
14,
19
]
]
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1.5,
"text-halo-blur": 0
},
"metadata": {
"mapbox:group": "1444855728283.4546"
}
},
{
"id": "place_label_city_small_n",
"type": "symbol",
"source": "mapbox",
"source-layer": "place_label",
"filter": [
"all",
[
"==",
"type",
"city"
],
[
">",
"scalerank",
4
],
[
"in",
"ldir",
"N",
"W",
"NW",
"NE"
]
],
"maxzoom": 16,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-max-width": 10,
"text-anchor": {
"base": 1,
"stops": [
[
0,
"bottom"
],
[
6,
"center"
]
]
},
"text-offset": {
"base": 1,
"stops": [
[
0,
[
0,
-0.2
]
],
[
6,
[
0,
0
]
]
]
},
"text-size": {
"stops": [
[
6,
11
],
[
14,
19
]
]
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1.5,
"text-halo-blur": 0
},
"metadata": {
"mapbox:group": "1444855728283.4546"
}
},
{
"id": "place_label_city_medium_s",
"type": "symbol",
"source": "mapbox",
"source-layer": "place_label",
"filter": [
"all",
[
"==",
"type",
"city"
],
[
"<=",
"scalerank",
4
],
[
">",
"scalerank",
1
],
[
"in",
"ldir",
"S",
"E",
"SE",
"SW"
]
],
"maxzoom": 16,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-max-width": 10,
"text-anchor": {
"base": 1,
"stops": [
[
0,
"top"
],
[
6,
"center"
]
]
},
"text-offset": {
"base": 1,
"stops": [
[
0,
[
0,
0.1
]
],
[
6,
[
0,
0
]
]
]
},
"text-size": {
"stops": [
[
5,
11
],
[
12,
19
]
],
"base": 0.9
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1.5,
"text-halo-blur": 0
},
"metadata": {
"mapbox:group": "1444855728283.4546"
}
},
{
"id": "place_label_city_medium_n",
"type": "symbol",
"source": "mapbox",
"source-layer": "place_label",
"filter": [
"all",
[
"==",
"type",
"city"
],
[
"<=",
"scalerank",
4
],
[
">",
"scalerank",
1
],
[
"in",
"ldir",
"N",
"W",
"NW",
"NE"
]
],
"maxzoom": 16,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-max-width": 10,
"text-anchor": {
"base": 1,
"stops": [
[
0,
"bottom"
],
[
6,
"center"
]
]
},
"text-offset": {
"base": 1,
"stops": [
[
0,
[
0,
-0.2
]
],
[
6,
[
0,
0
]
]
]
},
"text-size": {
"stops": [
[
5,
11
],
[
12,
19
]
],
"base": 0.9
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1.5,
"text-halo-blur": 0
},
"metadata": {
"mapbox:group": "1444855728283.4546"
}
},
{
"id": "place_label_city_large_s",
"type": "symbol",
"source": "mapbox",
"source-layer": "place_label",
"filter": [
"all",
[
"==",
"type",
"city"
],
[
"<=",
"scalerank",
1
],
[
"in",
"ldir",
"S",
"SE",
"SW",
"E"
]
],
"maxzoom": 16,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Bold",
"Arial Unicode MS Bold"
],
"text-max-width": 15,
"text-transform": "none",
"text-anchor": {
"base": 1,
"stops": [
[
0,
"top"
],
[
6,
"center"
]
]
},
"text-offset": {
"base": 1,
"stops": [
[
0,
[
0,
0.1
]
],
[
6,
[
0,
0
]
]
]
},
"text-size": {
"stops": [
[
4,
11
],
[
10,
20
]
],
"base": 0.9
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1.5,
"text-halo-blur": 0
},
"metadata": {
"mapbox:group": "1444855728283.4546"
}
},
{
"id": "place_label_city_large_n",
"type": "symbol",
"source": "mapbox",
"source-layer": "place_label",
"filter": [
"all",
[
"<=",
"scalerank",
1
],
[
"in",
"ldir",
"N",
"NE",
"NW",
"W"
],
[
"==",
"type",
"city"
]
],
"maxzoom": 16,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Bold",
"Arial Unicode MS Bold"
],
"text-max-width": 5,
"text-transform": "none",
"text-anchor": {
"base": 1,
"stops": [
[
0,
"bottom"
],
[
6,
"center"
]
]
},
"text-offset": {
"base": 1,
"stops": [
[
0,
[
0,
-0.2
]
],
[
6,
[
0,
0
]
]
]
},
"symbol-avoid-edges": false,
"text-size": {
"stops": [
[
4,
11
],
[
10,
20
]
],
"base": 0.9
}
},
"paint": {
"text-color": "#999999",
"text-halo-color": "#000",
"text-halo-width": 1.5,
"text-halo-blur": 0
},
"metadata": {
"mapbox:group": "1444855728283.4546"
}
},
{
"id": "marine_label_point_other",
"type": "symbol",
"source": "mapbox",
"source-layer": "marine_label",
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"in",
"labelrank",
4,
5,
6
]
],
"layout": {
"text-max-width": 8,
"visibility": "none",
"symbol-placement": "point",
"text-field": "{name_en}",
"text-line-height": 1.2,
"text-letter-spacing": 0.1,
"text-font": [
"DIN Offc Pro Regular",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
4,
12
],
[
6,
16
]
]
}
},
"paint": {
"text-color": "#999999"
},
"metadata": {
"mapbox:group": "1444855720231.1272"
}
},
{
"id": "marine_label_point_3",
"type": "symbol",
"source": "mapbox",
"source-layer": "marine_label",
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"==",
"labelrank",
3
]
],
"layout": {
"text-max-width": 8,
"visibility": "visible",
"symbol-placement": "point",
"text-field": "{name_en}",
"text-line-height": 1.3,
"text-letter-spacing": 0.1,
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
3,
13
],
[
5,
18
]
]
}
},
"paint": {
"text-color": "#999999",
"text-opacity": 0.25
},
"metadata": {
"mapbox:group": "1444855720231.1272"
}
},
{
"id": "marine_label_point_2",
"type": "symbol",
"source": "mapbox",
"source-layer": "marine_label",
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"==",
"labelrank",
2
]
],
"layout": {
"text-max-width": 8,
"visibility": "visible",
"symbol-placement": "point",
"text-field": "{name_en}",
"text-line-height": 1.2,
"text-letter-spacing": 0,
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
3,
14
],
[
5,
24
]
]
}
},
"paint": {
"text-color": "#999999",
"text-opacity": 0.25
},
"metadata": {
"mapbox:group": "1444855720231.1272"
}
},
{
"id": "marine_label_point_1",
"type": "symbol",
"source": "mapbox",
"source-layer": "marine_label",
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"==",
"labelrank",
1
]
],
"layout": {
"text-max-width": 4,
"visibility": "visible",
"symbol-placement": "point",
"text-field": "{name_en}",
"text-line-height": 1.5,
"text-letter-spacing": 0.25,
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
1,
12
],
[
4,
30
]
]
}
},
"paint": {
"text-color": "#999999",
"text-opacity": 0.25
},
"metadata": {
"mapbox:group": "1444855720231.1272"
}
},
{
"id": "marine_label_line_other",
"type": "symbol",
"source": "mapbox",
"source-layer": "marine_label",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"in",
"labelrank",
4,
5,
6
]
],
"layout": {
"text-max-width": 15,
"visibility": "visible",
"symbol-placement": "line",
"text-field": "{name_en}",
"text-line-height": 1.2,
"text-letter-spacing": 0,
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
4,
12
],
[
6,
16
]
]
}
},
"paint": {
"text-color": "#999999",
"text-opacity": 0.25
},
"metadata": {
"mapbox:group": "1444855720231.1272"
}
},
{
"id": "marine_label_line_3",
"type": "symbol",
"source": "mapbox",
"source-layer": "marine_label",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"labelrank",
3
]
],
"layout": {
"text-max-width": 15,
"visibility": "visible",
"symbol-placement": "line",
"text-field": "{name_en}",
"text-line-height": 1.2,
"text-letter-spacing": 0,
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
3,
13
],
[
5,
18
]
]
}
},
"paint": {
"text-color": "#999999",
"text-opacity": 0.25
},
"metadata": {
"mapbox:group": "1444855720231.1272"
}
},
{
"id": "marine_label_line_2",
"type": "symbol",
"source": "mapbox",
"source-layer": "marine_label",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"labelrank",
2
]
],
"layout": {
"text-max-width": 15,
"visibility": "visible",
"symbol-placement": "line",
"text-field": "{name_en}",
"text-line-height": 1.2,
"text-letter-spacing": 0,
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
3,
14
],
[
5,
24
]
]
}
},
"paint": {
"text-color": "#999999",
"text-opacity": 0.25
},
"metadata": {
"mapbox:group": "1444855720231.1272"
}
},
{
"id": "marine_label_line_1",
"type": "symbol",
"source": "mapbox",
"source-layer": "marine_label",
"filter": [
"all",
[
"==",
"$type",
"LineString"
],
[
"==",
"labelrank",
1
]
],
"layout": {
"text-max-width": 15,
"visibility": "visible",
"symbol-placement": "line",
"text-field": "{name_en}",
"text-line-height": 1.2,
"text-letter-spacing": 0.4,
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-size": {
"base": 1,
"stops": [
[
3,
25
],
[
4,
30
]
]
}
},
"paint": {
"text-color": "#999999",
"text-opacity": 0.25
},
"metadata": {
"mapbox:group": "1444855720231.1272"
}
},
{
"id": "state-label-lg",
"type": "symbol",
"source": "mapbox",
"source-layer": "state_label",
"filter": [
">=",
"area",
80000
],
"minzoom": 3,
"maxzoom": 7,
"layout": {
"text-transform": "uppercase",
"visibility": "visible",
"text-field": {
"base": 1,
"stops": [
[
0,
"{abbr}"
],
[
4,
"{name_en}"
]
]
},
"text-font": [
"DIN Offc Pro Bold",
"Arial Unicode MS Regular"
],
"text-letter-spacing": 0.15,
"text-max-width": 7,
"text-size": {
"base": 1,
"stops": [
[
4,
9
],
[
7,
18
]
]
}
},
"paint": {
"text-color": {
"base": 1,
"stops": [
[
0,
"#969696"
],
[
20,
"#969696"
]
]
}
},
"metadata": {
"mapbox:group": "1444855712732.9983"
}
},
{
"id": "country-label-sm",
"type": "symbol",
"source": "mapbox",
"source-layer": "country_label",
"filter": [
">=",
"scalerank",
5
],
"minzoom": 1,
"maxzoom": 10,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-max-width": 7,
"text-size": {
"stops": [
[
3,
8
],
[
9,
18
]
],
"base": 0.9
}
},
"paint": {
"text-color": {
"base": 1,
"stops": [
[
0,
"#444"
],
[
10,
"#888"
]
]
},
"text-halo-color": "#000",
"text-halo-width": 1,
"text-halo-blur": 1
},
"metadata": {
"mapbox:group": "1444855707128.6584"
}
},
{
"id": "country-label-md",
"type": "symbol",
"source": "mapbox",
"source-layer": "country_label",
"filter": [
"in",
"scalerank",
3,
4
],
"minzoom": 1,
"maxzoom": 8,
"layout": {
"text-field": {
"base": 1,
"stops": [
[
0,
"{code}"
],
[
2,
"{name_en}"
]
]
},
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-max-width": 7,
"text-size": {
"stops": [
[
2,
8
],
[
7,
18
]
],
"base": 0.9
}
},
"paint": {
"text-color": {
"base": 1,
"stops": [
[
0,
"#444"
],
[
10,
"#888"
]
]
},
"text-halo-color": "#000",
"text-halo-width": 1,
"text-halo-blur": 1
},
"metadata": {
"mapbox:group": "1444855707128.6584"
}
},
{
"id": "country-label-lg",
"type": "symbol",
"source": "mapbox",
"source-layer": "country_label",
"filter": [
"in",
"scalerank",
1,
2
],
"maxzoom": 12,
"layout": {
"text-field": "{name_en}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Regular"
],
"text-max-width": 6,
"text-size": {
"stops": [
[
1,
9
],
[
5,
18
]
],
"base": 0.9
}
},
"paint": {
"text-color": {
"base": 1,
"stops": [
[
0,
"#666"
],
[
10,
"#999"
]
]
},
"text-halo-color": "#000",
"text-halo-width": 1,
"text-halo-blur": 1
},
"metadata": {
"mapbox:group": "1444855707128.6584"
}
}
],
"created": 0,
"modified": 0,
"owner": "mapbox",
"id": "dark-v8",
"draft": false
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Water fountains near Bay to Breakers</title>
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.small-input { width: 80px; vertical-align:middle; }
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js'></script>
<div id='map'></div>
<div class='pin-top fill-gray pad1'>
Two community council areas we can focus on for <strong>#MapLesotho 2016</strong>. <b>This will defo be useful for the kids.</b>
<p class='small'>I have taken the GeoJSON file from <a target='_blank' href='http://tasks.hotosm.org/project/894'>hot-osm Task 894</a>
and the boundaries are from <a href='https://github.com/rustyb/lesotho_laa_data/blob/master/geojson/comm_councils.geojson'>LAA Data</a>.</p>
</div>
<div id="count" class='pin-bottom fill-gray pad1'>
</div>
<script src='site.js'></script>
</body>
</html>
Raw
site.js
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImdQMzI4WjgifQ.d-Uyr7NBjrJVz9z82uk5Xg';
var map = L.mapbox.map('map', 'mapbox.streets', { zoomControl: false, hash: true});
//map.scrollWheelZoom.disable();
var layers = {
Streets: L.mapbox.tileLayer('mapbox.streets'),
Outdoors: L.mapbox.tileLayer('examples.ik7djhcc'),
Satellite: L.mapbox.tileLayer('examples.map-igb471ik')
};
L.control.layers(null,layers,{position:'bottomright'}).addTo(map);
new L.Control.Zoom({ position: 'bottomleft' }).addTo(map);
var commCouncils = L.mapbox.featureLayer().addTo(map);
var tasksLayer = L.mapbox.featureLayer().addTo(map);
//waterFountains.loadURL('./nursinghomes_epsg4326.geojson')
// .on('ready', done);
commCouncils.loadURL('./constituencies_for_detailed_map.geojson')
.on('ready', done1);
tasksLayer.loadURL('./tasks_constituencies_for_detailed_map.geojson')
.on('ready', done1);
//eds.features.forEach(function(feature) {
// feature.properties['color'] = '#aec';
//});
var loaded = 0;
function done1() {
if (++loaded !== 2) return;
map.fitBounds(commCouncils.getBounds());
commCouncils.setStyle({ color: 'red', weight: 10, fillOpacity: 0.1, opacity: 1 });
var tasks = tasksLayer.getGeoJSON();
tasks.features.forEach(function(feature) {
if (feature.properties.state === 1 || feature.properties.state === 2) {
feature.properties['fill'] = '#FFA500';
feature.properties['fill-opacity'] = '0.5';
} else if (feature.properties.state === 3 ) {
feature.properties['fill'] = '#39a853';
feature.properties['fill-opacity'] = '0.5';
} else {
feature.properties['fill-opacity'] = '0';
}
feature.properties['stroke-width'] = '0.5';
});
tasksLayer.setGeoJSON(tasks)
tasksLayer.eachLayer(function(polygon) {
polygon.bindPopup('HOTOSM TASK #894<br /> <strong><a href="http://tasks.hotosm.org/project/894#task/' + polygon.feature.properties.id + '" target="_blank">'+ polygon.feature.properties.id + '</a></strong><br>State: '+ polygon.feature.properties.state +'. ')
})
commCouncils.eachLayer(function(polygon) {
polygon.bindPopup('<strong>'+ polygon.feature.properties.PLAN_B_NAM + '</strong><br/><strong>'+ polygon.feature.properties.NEW_PLAN_B + '</strong><br/>')
})
//electoralDistricts.getGeoJSON()
//electoralDistricts.setStyle({ 'fill': '#FFF' });
}
Display the source blob
Display the rendered blob
Raw
tasks_constituencies_for_detailed_map.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment