use tilejson

streetcomplete · Dec 9, 2024 · 45c6300 · 45c6300
1 parent d0b12dc
commit 45c6300
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/Main.kt b/Main.kt
@@ -506,9 +506,7 @@ fun createStyle(name: String, accessToken: String, languages: List<String>, colo
   "sources": {
     "jawg-streets": {
       "type": "vector",
-      "tiles": ["https://tile.jawg.io/streets-v2+hillshade-v1/{z}/{x}/{y}.pbf?access-token=$accessToken"],
-      "attribution": "<a href='https://www.openstreetmap.org/copyright' title='OpenStreetMap is open data licensed under ODbL' target='_blank' class='osm-attrib'>&copy; OSM contributors</a> | <a href='https://jawg.io?utm_medium=map&utm_source=attribution' title='Tiles Courtesy of Jawg Maps' target='_blank' class='jawg-attrib'>&copy; <b>Jawg</b>Maps</a>",
-      "maxzoom": 16
+      "url": "https://api.jawg.io/styles/jawg-streets.json?access-token=$accessToken"
     }
   },
   "transition": { "duration": 300, "delay": 0 },

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <meta name=viewport content="width=device-width">
+</head>
+<body style='margin: 0'>
+<div id="map" style='width: 100%; height: 100%;'></div>
+<script>
+    var map = new maplibregl.Map({
+        container: 'map',
+        style: './streetcomplete.json',
+        center: [0, 0],
+        zoom: 1
+    });
+</script>
+</body>
+</html>
diff --git a/demo/streetcomplete-night.json b/demo/streetcomplete-night.json
@@ -4,9 +4,7 @@
   "sources": {
     "jawg-streets": {
       "type": "vector",
-      "tiles": ["https://tile.jawg.io/streets-v2+hillshade-v1/{z}/{x}/{y}.pbf?access-token=XQYxWyY9JsVlwq0XYXqB8OO4ttBTNxm46ITHHwPj5F6CX4JaaSMBkvmD8kCqn7z7"],
-      "attribution": "<a href='https://www.openstreetmap.org/copyright' title='OpenStreetMap is open data licensed under ODbL' target='_blank' class='osm-attrib'>&copy; OSM contributors</a> | <a href='https://jawg.io?utm_medium=map&utm_source=attribution' title='Tiles Courtesy of Jawg Maps' target='_blank' class='jawg-attrib'>&copy; <b>Jawg</b>Maps</a>",
-      "maxzoom": 16
+      "url": "https://api.jawg.io/styles/jawg-streets.json?access-token=XQYxWyY9JsVlwq0XYXqB8OO4ttBTNxm46ITHHwPj5F6CX4JaaSMBkvmD8kCqn7z7"
     }
   },
   "transition": { "duration": 300, "delay": 0 },
@@ -99,9 +97,9 @@
     { "id": "boundaries", "source": "jawg-streets", "source-layer": "admin", "filter": ["all", ["==", ["get", "admin_level"], 2], ["!=", ["get", "maritime"], true]], "type": "line","paint": {"line-color": "#e72", "line-width": 1, "line-dasharray": [1, 2]} },
     { "id": "labels-country", "source": "jawg-streets", "source-layer": "place_label", "filter": ["==", ["get", "class"], "country"], "type": "symbol", "paint": {"text-color": "#ccf", "text-halo-color": "#2e2e48", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Bold"], "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} },
     { "id": "labels-localities", "source": "jawg-streets", "source-layer": "place_label", "filter": ["==", ["get", "class"], "locality"], "type": "symbol", "paint": {"text-color": "#ccf", "text-halo-color": "#2e2e48", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} },
-    { "id": "labels-housenumbers", "source": "jawg-streets", "source-layer": "housenum_label", "minzoom": 18.0, "type": "symbol", "paint": {"text-color": "#ccf", "text-halo-color": "#2e2e48", "text-halo-width": 2.5}, "layout": {"text-field": ["get", "house_num"], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "text-padding": 12, "symbol-sort-key": 15} },
-    { "id": "labels-road", "source": "jawg-streets", "source-layer": "road", "minzoom": 14.0, "filter": ["==", ["geometry-type"], "LineString"], "type": "symbol", "paint": {"text-color": "#ccf", "text-halo-color": "#2e2e48", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "text-max-width": 25, "symbol-sort-key": 10} },
-    { "id": "labels-rivers", "source": "jawg-streets", "source-layer": "waterway", "minzoom": 14.0, "filter": ["all", ["!=", ["get", "structure"], "tunnel"], ["in", ["get", "class"], ["literal", ["river", "canal"]]]], "type": "symbol", "paint": {"text-color": "#2e2e48", "text-halo-color": "#ccf", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "symbol-sort-key": 11} },
-    { "id": "labels-streams", "source": "jawg-streets", "source-layer": "waterway", "minzoom": 16.0, "filter": ["all", ["!=", ["get", "structure"], "tunnel"], ["in", ["get", "class"], ["literal", ["stream", "ditch", "drain"]]]], "type": "symbol", "paint": {"text-color": "#2e2e48", "text-halo-color": "#ccf", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "symbol-sort-key": 12} }
+    { "id": "labels-housenumbers", "source": "jawg-streets", "source-layer": "housenum_label", "minzoom": 18.0, "type": "symbol", "paint": {"text-color": "#ccf", "text-halo-color": "#2e2e48", "text-halo-width": 2.5}, "layout": {"text-field": ["get", "house_num"], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} },
+    { "id": "labels-road", "source": "jawg-streets", "source-layer": "road", "minzoom": 14.0, "filter": ["==", ["geometry-type"], "LineString"], "type": "symbol", "paint": {"text-color": "#ccf", "text-halo-color": "#2e2e48", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "text-max-width": 25, "symbol-sort-key": ["get", "scalerank"]} },
+    { "id": "labels-rivers", "source": "jawg-streets", "source-layer": "waterway", "minzoom": 14.0, "filter": ["all", ["!=", ["get", "structure"], "tunnel"], ["in", ["get", "class"], ["literal", ["river", "canal"]]]], "type": "symbol", "paint": {"text-color": "#2e2e48", "text-halo-color": "#ccf", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} },
+    { "id": "labels-streams", "source": "jawg-streets", "source-layer": "waterway", "minzoom": 16.0, "filter": ["all", ["!=", ["get", "structure"], "tunnel"], ["in", ["get", "class"], ["literal", ["stream", "ditch", "drain"]]]], "type": "symbol", "paint": {"text-color": "#2e2e48", "text-halo-color": "#ccf", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} }
   ]
 }
diff --git a/demo/streetcomplete.json b/demo/streetcomplete.json
@@ -4,9 +4,7 @@
   "sources": {
     "jawg-streets": {
       "type": "vector",
-      "tiles": ["https://tile.jawg.io/streets-v2+hillshade-v1/{z}/{x}/{y}.pbf?access-token=XQYxWyY9JsVlwq0XYXqB8OO4ttBTNxm46ITHHwPj5F6CX4JaaSMBkvmD8kCqn7z7"],
-      "attribution": "<a href='https://www.openstreetmap.org/copyright' title='OpenStreetMap is open data licensed under ODbL' target='_blank' class='osm-attrib'>&copy; OSM contributors</a> | <a href='https://jawg.io?utm_medium=map&utm_source=attribution' title='Tiles Courtesy of Jawg Maps' target='_blank' class='jawg-attrib'>&copy; <b>Jawg</b>Maps</a>",
-      "maxzoom": 16
+      "url": "https://api.jawg.io/styles/jawg-streets.json?access-token=XQYxWyY9JsVlwq0XYXqB8OO4ttBTNxm46ITHHwPj5F6CX4JaaSMBkvmD8kCqn7z7"
     }
   },
   "transition": { "duration": 300, "delay": 0 },
@@ -99,9 +97,9 @@
     { "id": "boundaries", "source": "jawg-streets", "source-layer": "admin", "filter": ["all", ["==", ["get", "admin_level"], 2], ["!=", ["get", "maritime"], true]], "type": "line","paint": {"line-color": "#e39", "line-width": 1, "line-dasharray": [1, 2]} },
     { "id": "labels-country", "source": "jawg-streets", "source-layer": "place_label", "filter": ["==", ["get", "class"], "country"], "type": "symbol", "paint": {"text-color": "#124", "text-halo-color": "#fff", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Bold"], "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} },
     { "id": "labels-localities", "source": "jawg-streets", "source-layer": "place_label", "filter": ["==", ["get", "class"], "locality"], "type": "symbol", "paint": {"text-color": "#124", "text-halo-color": "#fff", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} },
-    { "id": "labels-housenumbers", "source": "jawg-streets", "source-layer": "housenum_label", "minzoom": 18.0, "type": "symbol", "paint": {"text-color": "#124", "text-halo-color": "#fff", "text-halo-width": 2.5}, "layout": {"text-field": ["get", "house_num"], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "text-padding": 12, "symbol-sort-key": 15} },
-    { "id": "labels-road", "source": "jawg-streets", "source-layer": "road", "minzoom": 14.0, "filter": ["==", ["geometry-type"], "LineString"], "type": "symbol", "paint": {"text-color": "#124", "text-halo-color": "#fff", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "text-max-width": 25, "symbol-sort-key": 10} },
-    { "id": "labels-rivers", "source": "jawg-streets", "source-layer": "waterway", "minzoom": 14.0, "filter": ["all", ["!=", ["get", "structure"], "tunnel"], ["in", ["get", "class"], ["literal", ["river", "canal"]]]], "type": "symbol", "paint": {"text-color": "#fff", "text-halo-color": "#349", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "symbol-sort-key": 11} },
-    { "id": "labels-streams", "source": "jawg-streets", "source-layer": "waterway", "minzoom": 16.0, "filter": ["all", ["!=", ["get", "structure"], "tunnel"], ["in", ["get", "class"], ["literal", ["stream", "ditch", "drain"]]]], "type": "symbol", "paint": {"text-color": "#fff", "text-halo-color": "#349", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "symbol-sort-key": 12} }
+    { "id": "labels-housenumbers", "source": "jawg-streets", "source-layer": "housenum_label", "minzoom": 18.0, "type": "symbol", "paint": {"text-color": "#124", "text-halo-color": "#fff", "text-halo-width": 2.5}, "layout": {"text-field": ["get", "house_num"], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} },
+    { "id": "labels-road", "source": "jawg-streets", "source-layer": "road", "minzoom": 14.0, "filter": ["==", ["geometry-type"], "LineString"], "type": "symbol", "paint": {"text-color": "#124", "text-halo-color": "#fff", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "text-max-width": 25, "symbol-sort-key": ["get", "scalerank"]} },
+    { "id": "labels-rivers", "source": "jawg-streets", "source-layer": "waterway", "minzoom": 14.0, "filter": ["all", ["!=", ["get", "structure"], "tunnel"], ["in", ["get", "class"], ["literal", ["river", "canal"]]]], "type": "symbol", "paint": {"text-color": "#fff", "text-halo-color": "#349", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} },
+    { "id": "labels-streams", "source": "jawg-streets", "source-layer": "waterway", "minzoom": 16.0, "filter": ["all", ["!=", ["get", "structure"], "tunnel"], ["in", ["get", "class"], ["literal", ["stream", "ditch", "drain"]]]], "type": "symbol", "paint": {"text-color": "#fff", "text-halo-color": "#349", "text-halo-width": 2.5}, "layout": {"text-field": ["coalesce", ["get", "name"]], "text-size": ["interpolate", ["exponential", 2], ["zoom"], 1.0, 13.0, 24.0, 64.0], "text-font": ["Roboto Regular"], "symbol-placement": "line-center", "text-padding": 12, "symbol-sort-key": ["get", "scalerank"]} }
   ]
 }