Skip to content

Instantly share code, notes, and snippets.

@klokan

klokan/index.html

Last active April 27, 2017 12:55
Show Gist options
  • Save klokan/19357831359b9d6ed6018f561be33f03 to your computer and use it in GitHub Desktop.
Save klokan/19357831359b9d6ed6018f561be33f03 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>MapBox GL JS Local Example</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.36.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />
<!--
<script src='mapbox-gl.js'></script>
<link href='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.your-own-code-here-for-online-maps';
mapboxgl.accessToken = 'NOT-REQUIRED-WITH-YOUR-VECTOR-TILES-DATA';
var map = new mapboxgl.Map({
container: 'map',
center: [7.462, 29.520],
zoom: 2.9,
style: "style.json"
});
map.addControl(new mapboxgl.Navigation());
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
pop-edited.geojson
{
"features": [
{
"type": "Feature",
"properties": {
"Layer": "0",
"SubClasses": "AcDbEntity:AcDbPolyline",
"ExtendedEntity": null,
"Linetype": null,
"EntityHandle": "1DF",
"Text": null,
"name": "Block 2"
},
"geometry": {
"coordinates": [
[
26.761581,
21.023816
],
[
32.462249,
21.023816
],
[
32.462249,
5.455473
],
[
26.761581,
5.455473
],
[
26.761581,
21.023816
]
],
"type": "LineString"
},
"id": "2b33bf40b891fddc1874e8ebdf7bac5d"
},
{
"type": "Feature",
"properties": {
"Layer": "0",
"SubClasses": "AcDbEntity:AcDbPolyline",
"ExtendedEntity": null,
"Linetype": null,
"EntityHandle": "1DC",
"Text": null,
"name": "Block 1"
},
"geometry": {
"coordinates": [
[
9.17438,
28.234424
],
[
32.500596,
28.234424
],
[
32.500596,
21.821128
],
[
9.17438,
21.821128
],
[
9.17438,
28.234424
]
],
"type": "LineString"
},
"id": "639f65a344ab557ee8db70e0fe85f302"
},
{
"type": "Feature",
"properties": {
"name": "Block 2"
},
"geometry": {
"coordinates": [
12.268152,
14.411723
],
"type": "Point"
},
"id": "68318ec93c751e2f4dc6c20ee45890b9"
},
{
"type": "Feature",
"properties": {
"Layer": "0",
"SubClasses": "AcDbEntity:AcDbCircle",
"ExtendedEntity": null,
"Linetype": null,
"EntityHandle": "1E8",
"Text": null
},
"geometry": {
"coordinates": [
[
25.667464,
16.39038,
0
],
[
25.656581,
16.078742,
0
],
[
25.623986,
15.768623,
0
],
[
25.569838,
15.461532,
0
],
[
25.4944,
15.158967,
0
],
[
25.39804,
14.862401,
0
],
[
25.281227,
14.57328,
0
],
[
25.144531,
14.293011,
0
],
[
24.988617,
14.02296,
0
],
[
24.814245,
13.764443,
0
],
[
24.622265,
13.518719,
0
],
[
24.413611,
13.286986,
0
],
[
24.189301,
13.070372,
0
],
[
23.950427,
12.869933,
0
],
[
23.698153,
12.686645,
0
],
[
23.433708,
12.521402,
0
],
[
23.15838,
12.375007,
0
],
[
22.873512,
12.248175,
0
],
[
22.580489,
12.141524,
0
],
[
22.280741,
12.055573,
0
],
[
21.975727,
11.99074,
0
],
[
21.666934,
11.947342,
0
],
[
21.355866,
11.92559,
0
],
[
21.044038,
11.92559,
0
],
[
20.73297,
11.947342,
0
],
[
20.424177,
11.99074,
0
],
[
20.119163,
12.055573,
0
],
[
19.819415,
12.141524,
0
],
[
19.526393,
12.248175,
0
],
[
19.241524,
12.375007,
0
],
[
18.966196,
12.521402,
0
],
[
18.701751,
12.686645,
0
],
[
18.449477,
12.869933,
0
],
[
18.210603,
13.070372,
0
],
[
17.986293,
13.286986,
0
],
[
17.77764,
13.518719,
0
],
[
17.585659,
13.764443,
0
],
[
17.411287,
14.02296,
0
],
[
17.255373,
14.293011,
0
],
[
17.118677,
14.57328,
0
],
[
17.001864,
14.862401,
0
],
[
16.905504,
15.158967,
0
],
[
16.830066,
15.461532,
0
],
[
16.775918,
15.768623,
0
],
[
16.743323,
16.078742,
0
],
[
16.73244,
16.39038,
0
],
[
16.743323,
16.702018,
0
],
[
16.775918,
17.012138,
0
],
[
16.830066,
17.319228,
0
],
[
16.905504,
17.621793,
0
],
[
17.001864,
17.918359,
0
],
[
17.118677,
18.207481,
0
],
[
17.255373,
18.48775,
0
],
[
17.411287,
18.757801,
0
],
[
17.585659,
19.016318,
0
],
[
17.77764,
19.262042,
0
],
[
17.986293,
19.493775,
0
],
[
18.210603,
19.710389,
0
],
[
18.449477,
19.910828,
0
],
[
18.701751,
20.094115,
0
],
[
18.966196,
20.259359,
0
],
[
19.241524,
20.405753,
0
],
[
19.526393,
20.532585,
0
],
[
19.819415,
20.639237,
0
],
[
20.119163,
20.725188,
0
],
[
20.424177,
20.790021,
0
],
[
20.73297,
20.833419,
0
],
[
21.044038,
20.855171,
0
],
[
21.355866,
20.855171,
0
],
[
21.666934,
20.833419,
0
],
[
21.975727,
20.790021,
0
],
[
22.280741,
20.725188,
0
],
[
22.580489,
20.639237,
0
],
[
22.873512,
20.532585,
0
],
[
23.15838,
20.405753,
0
],
[
23.433708,
20.259359,
0
],
[
23.698153,
20.094115,
0
],
[
23.950427,
19.910828,
0
],
[
24.189301,
19.710389,
0
],
[
24.413611,
19.493775,
0
],
[
24.622265,
19.262042,
0
],
[
24.814245,
19.016318,
0
],
[
24.988617,
18.757801,
0
],
[
25.144531,
18.48775,
0
],
[
25.281227,
18.207481,
0
],
[
25.39804,
17.918359,
0
],
[
25.4944,
17.621793,
0
],
[
25.569838,
17.319228,
0
],
[
25.623986,
17.012138,
0
],
[
25.656581,
16.702018,
0
],
[
25.667464,
16.39038,
0
]
],
"type": "LineString"
},
"id": "82c729401eca1840693084a0acf52574"
},
{
"type": "Feature",
"properties": {
"Layer": "0",
"SubClasses": "AcDbEntity:AcDbPolyline",
"ExtendedEntity": null,
"Linetype": null,
"EntityHandle": "1DD",
"Text": null,
"name": "Block 1"
},
"geometry": {
"coordinates": [
[
9.199322,
21.200249
],
[
15.638323,
21.200249
],
[
15.638323,
5.965151
],
[
9.199322,
5.965151
],
[
9.199322,
21.200249
]
],
"type": "LineString"
},
"id": "8aad4c903a8ff51c515fa7cc0e844c42"
},
{
"type": "Feature",
"properties": {
"name": "Block 3"
},
"geometry": {
"coordinates": [
29.802331,
13.815063
],
"type": "Point"
},
"id": "d1488ca923b8eead99bd19bfa397cdf6"
},
{
"type": "Feature",
"properties": {
"name": "Block 1"
},
"geometry": {
"coordinates": [
20.837487,
25.10393
],
"type": "Point"
},
"id": "e1510ff5194a706483ccb66ec98df4d5"
},
{
"type": "Feature",
"properties": {
"Layer": "0",
"SubClasses": "AcDbEntity:AcDbPolyline",
"ExtendedEntity": null,
"Linetype": null,
"EntityHandle": "1E0",
"Text": null,
"name": "Block 4"
},
"geometry": {
"coordinates": [
[
16.704301,
5.64081
],
[
26.066377,
5.64081
],
[
26.066377,
10.181577
],
[
16.704301,
10.181577
],
[
16.704301,
5.64081
]
],
"type": "LineString"
},
"id": "f83dd86047d6a353ec82e13a45a2784f"
}
],
"type": "FeatureCollection"
}
Raw
style.json
{
"version": 8,
"name": "pop-edited",
"metadata": {
"mapbox:autocomposite": true,
"mapbox:type": "template"
},
"center": [
29.895457023808603,
-2.743701779184505
],
"zoom": 1.87216530099047,
"bearing": 0,
"pitch": 0,
"sources": {
"geojson1": {
"data": "./pop-edited.geojson",
"type": "geojson"
}
},
"glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "hsl(0, 0%, 100%)"
}
},
{
"id": "pop",
"type": "fill",
"source": "geojson1",
"source-layer": "pop",
"layout": {
"visibility": "visible"
},
"paint": {
"fill-color": "hsl(0, 0%, 70%)"
}
},
{
"id": "pop titles",
"type": "symbol",
"source": "geojson1",
"source-layer": "pop",
"filter": [
"==",
"$type",
"Point"
],
"layout": {
"visibility": "visible",
"text-field": "{name}"
},
"paint": {
"text-color": "hsl(0, 0%, 0%)"
}
}
],
"created": "2017-04-27T12:35:21.494Z",
"id": "cj20e6ya8004a2sqrztcddg2i",
"modified": "2017-04-27T12:37:51.669Z",
"owner": "georeferencer",
"visibility": "private",
"draft": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment