Demo of how to use Mapbox GL to adjust the default OpenStreetMap boundaries using overlay layers for a Ukraine worldview which includes Crimea.
Forked from corrected boundary demo for India
Demo of how to use Mapbox GL to adjust the default OpenStreetMap boundaries using overlay layers for a Ukraine worldview which includes Crimea.
Forked from corrected boundary demo for India
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title>OpenStreetMap Ukraine Mapbox GL Map</title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<!-- Mapbox GL JS --> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' /> | |
<style> | |
html, | |
body { | |
height: 100%; | |
} | |
#map { | |
width: 100%; | |
height: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<script> | |
// Initialize GL map | |
var map = new mapboxgl.Map({ | |
container: 'map', | |
style: './ukraine-mapnik-gl-style.json', | |
bounds : [[22, 43], [41, 52]] | |
}); | |
</script> | |
</body> | |
</html> |
{ | |
"version": 8, | |
"name": "OpenStreetMap Mapnik raster tiles (Ukraine)", | |
"metadata": { | |
"mapbox:autocomposite": true | |
}, | |
"bounds": [[22, 43], [41, 52]], | |
"glyphs": "https://cdn.jsdelivr.net/gh/lukasmartinelli-alt/glfonts@gh-pages/fonts/{fontstack}/{range}.pbf", | |
"sources": { | |
"osm-mapnik": { | |
"type": "raster", | |
"tiles": [ | |
"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" | |
], | |
"tileSize": 256, | |
"attribution": "Basemap data <a href='https://www.osm.org' target=_blank>© OpenStreetMap contributors</a>" | |
}, | |
"adm0-disputed-lines": { | |
"type": "geojson", | |
"data": "./ua-adm0-disputed-lines.geojson" | |
} | |
}, | |
"layers": [{ | |
"id": "background", | |
"type": "background", | |
"paint": { | |
"background-color": "rgba(0,0,0,0)" | |
} | |
}, | |
{ | |
"id": "osm-mapnik", | |
"type": "raster", | |
"source": "osm-mapnik" | |
}, | |
{ | |
"id": "disputed", | |
"type": "line", | |
"source": "adm0-disputed-lines", | |
"filter": [ | |
"all", [ | |
"all", ["in", "disputed_by", "UA"] | |
] | |
], | |
"paint": { | |
"line-color": [ | |
"match", | |
["get", "maritime"], | |
"yes", "rgb(178,210,221)", | |
"#f2efea" | |
], | |
"line-dasharray": [1, 0.5], | |
"line-opacity": 0.6, | |
"line-width": { | |
"stops": [ | |
[3, 2], | |
[10, 8] | |
] | |
} | |
} | |
}, | |
{ | |
"id": "claimed", | |
"type": "line", | |
"source": "adm0-disputed-lines", | |
"filter": [ | |
"all", [ | |
"all", ["in", "claimed_by", "UA"] | |
] | |
], | |
"paint": { | |
"line-color": "purple", | |
"line-opacity": 0.14, | |
"line-width": { | |
"stops": [ | |
[3, 2], | |
[10, 6] | |
] | |
} | |
} | |
} | |
], | |
"owner": "OpenStreetMap Ukraine" | |
} |