Add custom style(s) - how?

ftballguy45 commented 3 years ago

Is there documentation (step by step) on how to add other styles (from MapBox) when running the Docker?

ftballguy45 commented 3 years ago

Anyone?

StefanBrand commented 3 years ago

This is a minimal config.json of mine. What happens if you paste the URL to the style into the style section?

{
  "options": {
    "paths": {
      "root": "/data",
      "fonts": "fonts",
      "styles": "styles",
      "mbtiles": "/data"
    }
  },
  "styles": {
    "demo": {
      "style": "style.json",
      "tilejson": {
        "bounds": [
          14,
          48,
          16,
          46
        ]
      }
    }
  }
}

ftballguy45 commented 3 years ago

Thank you for stepping in to help!

The URL from the mapbox website? I have downloaded a zip of the style (with accompanying resources) but I have yet to get everything configured correctly. Here is my docker command

docker run --rm -it -v "/d/Code/Maps/MBTiles/North America/":/data/ -v /d/Code/Maps/tile-server-gl/config/:/config -p 8080:80 maptiler/tileserver-gl --config /config/config.json

My config folder looks like this

here is my config.json

{ "options": { "paths": { "root": "/data", "fonts": "/config/fonts", "sprites": "/config/sprites", "styles": "/config/styles", "mbtiles": "" }, "domains": [ "localhost:8080", "127.0.0.1:8080" ], "formatQuality": { "jpeg": 80, "webp": 90 }, "maxScaleFactor": 3, "maxSize": 2048, "pbfAlias": "pbf", "serveAllFonts": false, "serveAllStyles": false, "serveStaticMaps": true, "tileMargin": 0 }, "styles": { "Frank": { "style": "Frank/style.json", "tilejson": { "bounds": [ 87.99765, 18.58403, 92.69043, 26.64677 ] } } }, "data": { "v3": { "mbtiles": "2017-07-03_north_america.mbtiles" } } }

here is the style.json for the Frank style

{ "version": 8, "name": "Basic", "metadata": { "mapbox:autocomposite": false, "mapbox:type": "template", "maputnik:renderer": "mbgljs", "openmaptiles:version": "3.x", "openmaptiles:mapbox:owner": "openmaptiles", "openmaptiles:mapbox:source:url": "mapbox://openmaptiles.4qljc88t" }, "sources": { "openmaptiles": { "type": "vector", "url": "https://api.maptiler.com/tiles/v3/tiles.json?key={key}" } }, "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}", "layers": [ { "id": "background", "type": "background", "paint": { "background-color": "hsl(47, 26%, 88%)" } }, { "id": "landuse-residential", "type": "fill", "source": "openmaptiles", "source-layer": "landuse", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "in", "class", "residential", "suburb", "neighbourhood" ] ], "layout": { "visibility": "visible" }, "paint": { "fill-color": "hsl(47, 13%, 86%)", "fill-opacity": 0.7 } }, { "id": "landcover_grass", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "==", "class", "grass" ], "paint": { "fill-color": "hsl(82, 46%, 72%)", "fill-opacity": 0.45 } }, { "id": "landcover_wood", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "==", "class", "wood" ], "paint": { "fill-color": "hsl(82, 46%, 72%)", "fill-opacity": { "base": 1, "stops": [ [ 8, 0.6 ], [ 22, 1 ] ] } } }, { "id": "water", "type": "fill", "source": "openmaptiles", "source-layer": "water", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "!=", "intermittent", 1 ], [ "!=", "brunnel", "tunnel" ] ], "layout": { "visibility": "visible" }, "paint": { "fill-color": "hsl(205, 56%, 73%)" } }, { "id": "water_intermittent", "type": "fill", "source": "openmaptiles", "source-layer": "water", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "intermittent", 1 ] ], "layout": { "visibility": "visible" }, "paint": { "fill-color": "hsl(205, 56%, 73%)", "fill-opacity": 0.7 } }, { "id": "landcover-ice-shelf", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "==", "subclass", "ice_shelf" ], "layout": { "visibility": "visible" }, "paint": { "fill-color": "hsl(47, 26%, 88%)", "fill-opacity": 0.8 } }, { "id": "landcover-glacier", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "==", "subclass", "glacier" ], "layout": { "visibility": "visible" }, "paint": { "fill-color": "hsl(47, 22%, 94%)", "fill-opacity": { "base": 1, "stops": [ [ 0, 1 ], [ 8, 0.5 ] ] } } }, { "id": "landcover_sand", "type": "fill", "metadata": {}, "source": "openmaptiles", "source-layer": "landcover", "filter": [ "all", [ "in", "class", "sand" ] ], "paint": { "fill-antialias": false, "fill-color": "rgba(232, 214, 38, 1)", "fill-opacity": 0.3 } }, { "id": "landuse", "type": "fill", "source": "openmaptiles", "source-layer": "landuse", "filter": [ "==", "class", "agriculture" ], "layout": { "visibility": "visible" }, "paint": { "fill-color": "#eae0d0" } }, { "id": "landuse_overlay_national_park", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "==", "class", "national_park" ], "paint": { "fill-color": "#E1EBB0", "fill-opacity": { "base": 1, "stops": [ [ 5, 0 ], [ 9, 0.75 ] ] } } }, { "id": "waterway-tunnel", "type": "line", "source": "openmaptiles", "source-layer": "waterway", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "tunnel" ] ], "layout": { "visibility": "visible" }, "paint": { "line-color": "hsl(205, 56%, 73%)", "line-dasharray": [ 3, 3 ], "line-gap-width": { "stops": [ [ 12, 0 ], [ 20, 6 ] ] }, "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 8, 1 ], [ 20, 2 ] ] } } }, { "id": "waterway", "type": "line", "source": "openmaptiles", "source-layer": "waterway", "filter": [ "all", [ "==", "$type", "LineString" ], [ "!in", "brunnel", "tunnel", "bridge" ], [ "!=", "intermittent", 1 ] ], "layout": { "visibility": "visible" }, "paint": { "line-color": "hsl(205, 56%, 73%)", "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 8, 1 ], [ 20, 8 ] ] } } }, { "id": "waterway_intermittent", "type": "line", "source": "openmaptiles", "source-layer": "waterway", "filter": [ "all", [ "==", "$type", "LineString" ], [ "!in", "brunnel", "tunnel", "bridge" ], [ "==", "intermittent", 1 ] ], "layout": { "visibility": "visible" }, "paint": { "line-color": "hsl(205, 56%, 73%)", "line-dasharray": [ 2, 1 ], "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 8, 1 ], [ 20, 8 ] ] } } }, { "id": "tunnel_railway_transit", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "minzoom": 0, "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "tunnel" ], [ "==", "class", "transit" ] ], "layout": { "line-cap": "butt", "line-join": "miter" }, "paint": { "line-color": "hsl(34, 12%, 66%)", "line-dasharray": [ 3, 3 ], "line-opacity": { "base": 1, "stops": [ [ 11, 0 ], [ 16, 1 ] ] } } }, { "id": "building", "type": "fill", "source": "openmaptiles", "source-layer": "building", "paint": { "fill-antialias": true, "fill-color": "rgba(222, 211, 190, 1)", "fill-opacity": { "base": 1, "stops": [ [ 13, 0 ], [ 15, 1 ] ] }, "fill-outline-color": { "stops": [ [ 15, "rgba(212, 177, 146, 0)" ], [ 16, "rgba(212, 177, 146, 0.5)" ] ] } } }, { "id": "housenumber", "type": "symbol", "source": "openmaptiles", "source-layer": "housenumber", "minzoom": 17, "filter": [ "==", "$type", "Point" ], "layout": { "text-field": "{housenumber}", "text-font": [ "Noto Sans Regular" ], "text-size": 10 }, "paint": { "text-color": "rgba(212, 177, 146, 1)" } }, { "id": "road_area_pier", "type": "fill", "metadata": {}, "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "class", "pier" ] ], "layout": { "visibility": "visible" }, "paint": { "fill-antialias": true, "fill-color": "hsl(47, 26%, 88%)" } }, { "id": "road_pier", "type": "line", "metadata": {}, "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "pier" ] ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "hsl(47, 26%, 88%)", "line-width": { "base": 1.2, "stops": [ [ 15, 1 ], [ 17, 4 ] ] } } }, { "id": "road_bridge_area", "type": "fill", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "in", "brunnel", "bridge" ] ], "layout": {}, "paint": { "fill-color": "hsl(47, 26%, 88%)", "fill-opacity": 0.5 } }, { "id": "road_path", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "path", "track" ] ], "layout": { "line-cap": "square", "line-join": "bevel" }, "paint": { "line-color": "hsl(0, 0%, 97%)", "line-dasharray": [ 1, 1 ], "line-width": { "base": 1.55, "stops": [ [ 4, 0.25 ], [ 20, 10 ] ] } } }, { "id": "road_minor", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "minzoom": 13, "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "minor", "service" ] ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "hsl(0, 0%, 97%)", "line-width": { "base": 1.55, "stops": [ [ 4, 0.25 ], [ 20, 30 ] ] } } }, { "id": "tunnel_minor", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "tunnel" ], [ "==", "class", "minor_road" ] ], "layout": { "line-cap": "butt", "line-join": "miter" }, "paint": { "line-color": "#efefef", "line-dasharray": [ 0.36, 0.18 ], "line-width": { "base": 1.55, "stops": [ [ 4, 0.25 ], [ 20, 30 ] ] } } }, { "id": "tunnel_major", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "tunnel" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "layout": { "line-cap": "butt", "line-join": "miter" }, "paint": { "line-color": "#fff", "line-dasharray": [ 0.28, 0.14 ], "line-width": { "base": 1.4, "stops": [ [ 6, 0.5 ], [ 20, 30 ] ] } } }, { "id": "aeroway-area", "type": "fill", "metadata": { "mapbox:group": "1444849345966.4436" }, "source": "openmaptiles", "source-layer": "aeroway", "minzoom": 4, "filter": [ "all", [ "==", "$type", "Polygon" ], [ "in", "class", "runway", "taxiway" ] ], "layout": { "visibility": "visible" }, "paint": { "fill-color": "rgba(255, 255, 255, 1)", "fill-opacity": { "base": 1, "stops": [ [ 13, 0 ], [ 14, 1 ] ] } } }, { "id": "aeroway-taxiway", "type": "line", "metadata": { "mapbox:group": "1444849345966.4436" }, "source": "openmaptiles", "source-layer": "aeroway", "minzoom": 12, "filter": [ "all", [ "in", "class", "taxiway" ], [ "==", "$type", "LineString" ] ], "layout": { "line-cap": "round", "line-join": "round", "visibility": "visible" }, "paint": { "line-color": "rgba(255, 255, 255, 1)", "line-opacity": 1, "line-width": { "base": 1.5, "stops": [ [ 12, 1 ], [ 17, 10 ] ] } } }, { "id": "aeroway-runway", "type": "line", "metadata": { "mapbox:group": "1444849345966.4436" }, "source": "openmaptiles", "source-layer": "aeroway", "minzoom": 4, "filter": [ "all", [ "in", "class", "runway" ], [ "==", "$type", "LineString" ] ], "layout": { "line-cap": "round", "line-join": "round", "visibility": "visible" }, "paint": { "line-color": "rgba(255, 255, 255, 1)", "line-opacity": 1, "line-width": { "base": 1.5, "stops": [ [ 11, 4 ], [ 17, 50 ] ] } } }, { "id": "road_trunk_primary", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "trunk", "primary" ] ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "#fff", "line-width": { "base": 1.4, "stops": [ [ 6, 0.5 ], [ 20, 30 ] ] } } }, { "id": "road_secondary_tertiary", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "secondary", "tertiary" ] ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "#fff", "line-width": { "base": 1.4, "stops": [ [ 6, 0.5 ], [ 20, 20 ] ] } } }, { "id": "road_major_motorway", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "motorway" ] ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "hsl(0, 0%, 100%)", "line-offset": 0, "line-width": { "base": 1.4, "stops": [ [ 8, 1 ], [ 16, 10 ] ] } } }, { "id": "railway-transit", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "class", "transit" ], [ "!=", "brunnel", "tunnel" ] ], "layout": { "visibility": "visible" }, "paint": { "line-color": "hsl(34, 12%, 66%)", "line-opacity": { "base": 1, "stops": [ [ 11, 0 ], [ 16, 1 ] ] } } }, { "id": "railway", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "==", "class", "rail" ], "layout": { "visibility": "visible" }, "paint": { "line-color": "hsl(34, 12%, 66%)", "line-opacity": { "base": 1, "stops": [ [ 11, 0 ], [ 16, 1 ] ] } } }, { "id": "waterway-bridge-case", "type": "line", "source": "openmaptiles", "source-layer": "waterway", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "bridge" ] ], "layout": { "line-cap": "butt", "line-join": "miter" }, "paint": { "line-color": "#bbbbbb", "line-gap-width": { "base": 1.55, "stops": [ [ 4, 0.25 ], [ 20, 30 ] ] }, "line-width": { "base": 1.6, "stops": [ [ 12, 0.5 ], [ 20, 10 ] ] } } }, { "id": "waterway-bridge", "type": "line", "source": "openmaptiles", "source-layer": "waterway", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "bridge" ] ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "hsl(205, 56%, 73%)", "line-width": { "base": 1.55, "stops": [ [ 4, 0.25 ], [ 20, 30 ] ] } } }, { "id": "bridge_minor case", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "bridge" ], [ "==", "class", "minor_road" ] ], "layout": { "line-cap": "butt", "line-join": "miter" }, "paint": { "line-color": "#dedede", "line-gap-width": { "base": 1.55, "stops": [ [ 4, 0.25 ], [ 20, 30 ] ] }, "line-width": { "base": 1.6, "stops": [ [ 12, 0.5 ], [ 20, 10 ] ] } } }, { "id": "bridge_major case", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "bridge" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "layout": { "line-cap": "butt", "line-join": "miter" }, "paint": { "line-color": "#dedede", "line-gap-width": { "base": 1.55, "stops": [ [ 4, 0.25 ], [ 20, 30 ] ] }, "line-width": { "base": 1.6, "stops": [ [ 12, 0.5 ], [ 20, 10 ] ] } } }, { "id": "bridge_minor", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "bridge" ], [ "==", "class", "minor_road" ] ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "#efefef", "line-width": { "base": 1.55, "stops": [ [ 4, 0.25 ], [ 20, 30 ] ] } } }, { "id": "bridge_major", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "brunnel", "bridge" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "#fff", "line-width": { "base": 1.4, "stops": [ [ 6, 0.5 ], [ 20, 30 ] ] } } }, { "id": "admin_sub", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "filter": [ "in", "admin_level", 4, 6, 8 ], "layout": { "visibility": "visible" }, "paint": { "line-color": "hsla(0, 0%, 60%, 0.5)", "line-dasharray": [ 2, 1 ] } }, { "id": "admin_country_z0-4", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "minzoom": 0, "maxzoom": 5, "filter": [ "all", [ "<=", "admin_level", 2 ], [ "==", "$type", "LineString" ], [ "!has", "claimed_by" ] ], "layout": { "line-cap": "round", "line-join": "round", "visibility": "visible" }, "paint": { "line-color": "hsl(0, 0%, 60%)", "line-width": { "base": 1.3, "stops": [ [ 3, 0.5 ], [ 22, 15 ] ] } } }, { "id": "admin_country_z5-", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "minzoom": 5, "filter": [ "all", [ "<=", "admin_level", 2 ], [ "==", "$type", "LineString" ] ], "layout": { "line-cap": "round", "line-join": "round", "visibility": "visible" }, "paint": { "line-color": "hsl(0, 0%, 60%)", "line-width": { "base": 1.3, "stops": [ [ 3, 0.5 ], [ 22, 15 ] ] } } }, { "id": "poi_label", "type": "symbol", "source": "openmaptiles", "source-layer": "poi", "minzoom": 14, "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "rank", 1 ] ], "layout": { "icon-size": 1, "text-anchor": "top", "text-field": "{name:latin}\n{name:nonlatin}", "text-font": [ "Noto Sans Regular" ], "text-max-width": 8, "text-offset": [ 0, 0.5 ], "text-size": 11, "visibility": "visible" }, "paint": { "text-color": "#666", "text-halo-blur": 1, "text-halo-color": "rgba(255,255,255,0.75)", "text-halo-width": 1 } }, { "id": "airport-label", "type": "symbol", "source": "openmaptiles", "source-layer": "aerodrome_label", "minzoom": 10, "filter": [ "all", [ "has", "iata" ] ], "layout": { "icon-size": 1, "text-anchor": "top", "text-field": "{name:latin}\n{name:nonlatin}", "text-font": [ "Noto Sans Regular" ], "text-max-width": 8, "text-offset": [ 0, 0.5 ], "text-size": 11, "visibility": "visible" }, "paint": { "text-color": "#666", "text-halo-blur": 1, "text-halo-color": "rgba(255,255,255,0.75)", "text-halo-width": 1 } }, { "id": "road_major_label", "type": "symbol", "source": "openmaptiles", "source-layer": "transportation_name", "minzoom": 13, "filter": [ "==", "$type", "LineString" ], "layout": { "symbol-placement": "line", "text-field": "{name:latin} {name:nonlatin}", "text-font": [ "Noto Sans Regular" ], "text-letter-spacing": 0.1, "text-rotation-alignment": "map", "text-size": { "base": 1.4, "stops": [ [ 10, 8 ], [ 20, 14 ] ] }, "text-transform": "uppercase", "visibility": "visible" }, "paint": { "text-color": "#000", "text-halo-color": "hsl(0, 0%, 100%)", "text-halo-width": 2 } }, { "id": "place_label_other", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "minzoom": 8, "filter": [ "all", [ "==", "$type", "Point" ], [ "!in", "class", "city", "state", "country", "continent" ] ], "layout": { "text-anchor": "center", "text-field": "{name:latin}\n{name:nonlatin}", "text-font": [ "Noto Sans Regular" ], "text-max-width": 6, "text-size": { "stops": [ [ 6, 10 ], [ 12, 14 ] ] }, "visibility": "visible" }, "paint": { "text-color": "hsl(0, 0%, 25%)", "text-halo-blur": 0, "text-halo-color": "hsl(0, 0%, 100%)", "text-halo-width": 2 } }, { "id": "place_label_city", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "maxzoom": 16, "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "city" ] ], "layout": { "text-field": "{name:latin}\n{name:nonlatin}", "text-font": [ "Noto Sans Regular" ], "text-max-width": 10, "text-size": { "stops": [ [ 3, 12 ], [ 8, 16 ] ] } }, "paint": { "text-color": "hsl(0, 0%, 0%)", "text-halo-blur": 0, "text-halo-color": "hsla(0, 0%, 100%, 0.75)", "text-halo-width": 2 } }, { "id": "country_label-other", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "maxzoom": 12, "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "country" ], [ "!has", "iso_a2" ] ], "layout": { "text-field": "{name:latin}", "text-font": [ "Noto Sans Regular" ], "text-max-width": 10, "text-size": { "stops": [ [ 3, 12 ], [ 8, 22 ] ] }, "visibility": "visible" }, "paint": { "text-color": "hsl(0, 0%, 13%)", "text-halo-blur": 0, "text-halo-color": "rgba(255,255,255,0.75)", "text-halo-width": 2 } }, { "id": "country_label", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "maxzoom": 12, "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "country" ], [ "has", "iso_a2" ] ], "layout": { "text-field": "{name:latin}", "text-font": [ "Noto Sans Bold" ], "text-max-width": 10, "text-size": { "stops": [ [ 3, 12 ], [ 8, 22 ] ] }, "visibility": "visible" }, "paint": { "text-color": "hsl(0, 0%, 13%)", "text-halo-blur": 0, "text-halo-color": "rgba(255,255,255,0.75)", "text-halo-width": 2 } } ], "id": "basic" }

the error I get when starting the docker container is this (lots of them)

Starting tileserver-gl v3.1.1 Using specified config file from /config/config.json Starting server Listening at http://[::]:8080/ Startup complete mbgl: { class: 'Style', severity: 'ERROR', text: 'Failed to load source openmaptiles: The document is empty. at offset 0' } mbgl: { class: 'Style', severity: 'ERROR', text: 'Failed to load source openmaptiles: The document is empty. at offset 0' } mbgl: { class: 'Style', severity: 'ERROR', text: 'Failed to load source openmaptiles: The document is empty. at offset 0' } mbgl: { class: 'Style', severity: 'ERROR', text: 'Failed to load source openmaptiles: The document is empty. at offset 0' } mbgl: { class: 'Style', severity: 'ERROR', text: 'Failed to load source openmaptiles: The document is empty. at offset 0' }

ftballguy45 commented 3 years ago

I changed my config.json to this - changing the "sources" to map to the local mbtiles

{ "options": { "paths": { "root": "/data", "fonts": "/config/fonts", "sprites": "/config/sprites", "styles": "/config/styles", "mbtiles": "/data" }, "formatQuality": { "jpeg": 80, "webp": 90 }, "maxScaleFactor": 3, "maxSize": 2048, "pbfAlias": "pbf", "serveAllFonts": false, "serveAllStyles": false, "serveStaticMaps": true, "tileMargin": 0 }, "styles": { "Frank": { "style": "Frank/style.json", "tilejson": { "bounds": [ 87.99765, 18.58403, 92.69043, 26.64677 ] } } }, "sources": { "openmaptiles": { "url": "mbtiles://2017-07-03_north_america.mbtiles", "type": "vector" } }, "data": { "v3": { "mbtiles": "2017-07-03_north_america.mbtiles" } } }

then I also change the style.json

"sources": { "openmaptiles": { "type": "vector", "url": "mbtiles://2017-07-03_north_america.mbtiles" } },

The docker runs now without any errors, but theres nothing at localhost:8080 - its not responding to requests so there must be something else wrong but I dont know how/where to look

StefanBrand commented 3 years ago

You must expose port 8080 in docker run: -p 8080:8080

ftballguy45 commented 3 years ago

Ok thank you, that got me further down the road. Now I can get to the default home page and I can see my custom style.

However - I get a blank page when viewing the map.

Any thoughts on that?

StefanBrand commented 3 years ago

At this point, you must apply some styling. I would grab the TileJSON URL and add it as a data source in Maputnik. You can play around with the style their and then export the style.json.

ftballguy45 commented 3 years ago

I have a style I downloaded from MapBox - "Frank" and I tried to add it to the config. I can see that via WMTS I can get tiles, but there are no labels (no street names, city, state names, etc). The web page is blank though

ftballguy45 commented 3 years ago

sorry I must really be confused - pretty new to all this map tile server stuff. I'm trying to use a style from MapBox. But I've seen others mention using styles from the openmaptiles project - theres some special 'local' json files. Can I only use those?

StefanBrand commented 3 years ago

This is my (censored) minimal style.json:

{
  "version": 8,
  "name": "Demo",
  "metadata": {
    "maputnik:license": "https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md",
    "maputnik:renderer": "mbgljs",
    "openmaptiles:version": "3.x"
  },
  "sources": {
    "public": {
      "type": "vector",
      "tiles": [
        "https://path/to/tiles/{z}/{x}/{y}.pbf"
      ],
      "minZoom": 0,
      "maxZoom": 14
    }
  },
  "sprite": "https://maputnik.github.io/osm-liberty/sprites/osm-liberty",
  "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}",
  "layers": [
    {
      "id": "public",
      "type": "fill",
      "source": "public",
      "source-layer": "public.layer",
      "paint": {"fill-color": "rgba(41, 99, 39, 1)"}
    }
  ],
  "id": "demo"
}

Result:

I cannot help you any further as I'm not using tileserver-gl. I was just trying to get it to run. You must pay attention to all the ids...

ftballguy45 commented 3 years ago

Thank you. What are you running, if you don't mind me asking?

On Tue, Mar 30, 2021 at 5:45 AM, Stefan @.***> wrote:

This is my (censored) minimal style.json: { "version": 8, "name": "Demo", "metadata": { "maputnik:license": "https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md", "maputnik:renderer": "mbgljs", "openmaptiles:version": "3.x" }, "sources": { "public": { "type": "vector", "tiles": [ "https://path/to/tiles/{z}/{x}/{y}.pbf" ], "minZoom": 0, "maxZoom": 14 } }, "sprite": "https://maputnik.github.io/osm-liberty/sprites/osm-liberty", "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}", "layers": [ { "id": "public", "type": "fill", "source": "public", "source-layer": "public.layer", "paint": {"fill-color": "rgba(41, 99, 39, 1)"} } ], "id": "demo" }

I cannot help you any further as I'm not using tileserver-gl I was just trying to get it to run.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

StefanBrand commented 3 years ago

I was trying get tileserver-gl to render raster tiles from vector tiles served by pg_tileserv.

Turns out, it is not trivial: https://gis.stackexchange.com/questions/387442/render-raster-from-vector-tiles-in-wgs84-epsg4326-using-tileserver-gl

ftballguy45 commented 3 years ago

Ok thanks for the help so far

ftballguy45 commented 3 years ago

So does anyone involved intimately with this project have any thoughts or documentation on how users can provide custom styles? I feel like that would be highly valuable and almost a necessity of using this project. I guess some users might be ok with the "Basic-Preview" style.

rikMaz commented 3 years ago

I have exactly the same problem now. Could you (@ftballguy45 ) already create and use your own styles?

amorfinv commented 3 years ago

@rikardomarenzzi @ftballguy45

I was able to add my own style in a "hacky" way. It is not the right way but it kind of works for what I need. There is some weird stuff happening with the fonts with this method. I haven't really devoted time to figure out the fonts.

Also, I am assuming you already have an mbtiles file and are using opemaptiles.

The fast explanation:

1) Create your own style.json file 2) Change the tile source and glyph variables inside style.json file to point some stuff to the right location. 3) start your tile server with openmaptiles (make start-tileserver) 4) replace the style.json inside the docker container with your own. 5) restart the docker container and voila

Note that you pretty much have to do steps 3-5 every time you start the tile-server because server is deleted when closed.

The long explanation is below:

Step 1:

create map style with maputnik
I started with Dark-Matter GL style from openmaptiles and edited from there.
Export as style.json

Step 2:

Some changes need to be made inside the style.json file. Note that line numbers are for dark matter style.
Line 26 (tile source) delete: "url": "https://api.maptiler.com/tiles/v3/tiles.json?key={key}" replace: "url": "mbtiles://{v3}"
Line 30 (glyph source) delete: "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}" replace: "glyphs" "{fontstack}/{"range}.pbf"
Dark-Matter style uses Metropolis font so we need to place it in our server. However, this is not necessary because it will still run with a backup font.

Step 3:

Run make start-tileserver to create tile server. Creates docker container for server.
Go to http://localhost:8080
Vector and raster maps should be available there in basic preview.

Step 4:

Copy custom style.json into docker container. docker cp style.json [container_id]:/app/node_modules/tileserver-gl-styles/styles/basic-preview/style.json

Step 5:

Restart docker container (do not stop or delete)
Server should now show updated map style at http://localhost:8080
Note that this is the quick and easy way. And running make start-tileserver will delete container once you exit.

Hope it helps. I might try a figure out a better way but this was good enough for me.

Update for step 3:

There is a way to create the server without deleting it. When running make start-tileserver, you will see that it executes a really long docker command. Just copy the command and remove the --rm. Now you can close the server and start a new one using the copied docker command. It looks something like:

docker run --user=423:31 -it --name tileserver-gl -v $(pwd)/data:/data -p 8080:8080 maptiler/tileserver-gl --port 8080

I think the numbers after --user will probably be different for you. I am not sure what the user command does but you can look at the docker documentation if you are interested.
This will ensure that your server is not deleted when stopping and makes it easier for manipulation to add your own style and you can just turn it on in the future when you want to use it.

Update for dealing with font glyphs:

basic-preview seems to be using the Noto Sans Regular font glyphs. These are basically a bunch of *.pbf files that you can find inside your docker container at /app/node_modules/tileserver-gl-styles/fonts/Noto Sans Regular
so if you have your own glyph source you just need to have the correct path in your style.json file. If you don't really care about the fonts, you can just make the change I show on step 2. However, the glyphs from maptiler are accesible with a free account. I haven't really used mapbox but I guess they have their own glyph source that you can access.
You can also use OpenMapTiles fonts and then you will not need an api key from maptiler. Just set your glyph source to "glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf"
Although I haven't tried it, you can also create your own *.pbf files with this repository, it seems quite old so I am not sure if it will still work.

What I will try to do in the future:

I still haven't figured out how to start the tile server with the style I want. maybe it is not really a big deal, but I will try to figure this out. Seems like it should be the way to do things.
With this method I am just manipulating the basic-preview style. I might be able to create a new directory similar to /app/node_modules/tileserver-gl-styles/styles/basic-preview and just pop it in the docker container and name it /app/node_modules/tileserver-gl-styles/styles/custom/

amorfinv commented 3 years ago

It seems like this issue got me hooked because I can't stop working on it.

Ok figured out how to get a bunch of different styles with the tile server.

styles

Follow the steps above and create the tile server however you like. I will use the long docker command rather than make start-tileserver so I can turn it on whenever I need it.

Instead of copying the custom style.json file into /app/node_modules/tileserver-gl-styles/styles/basic-preview you can create a directory and put your style.json file in there. So your custom style.json file would be in /app/node_modules/tileserver-gl-styles/styles/custom inside the docker container.

You can put a bunch of different directories with different styles. Just make sure the glyph and tile source paths are correct. Also make sure to restart the server any time you change something inside the container.

Hope it is clear. Good luck.

Maybe someone explains how to start the tile server with a desired style.

amorfinv commented 3 years ago

----New update----

I started looking at some of the mapbox styles from their website, like Decimal and Frank.

I could not get the map to render correctly using the *.mbtiles file that I generated locally from openmaptiles. Basically, the server was running fine for these styles but the map was not rendering any glyphs, sprites and some layers. Pretty much only the background was visible.

However, if I change my source url to the one recommended by the particular style (a mapbox tileset) then everything worked fine. The obvious difference is that I am not using the tiles I generated. Also, now it is subject to the mapbox api requests limits.

Screen Shot 2021-04-18 at 10 43 58 PM

If you want easy control over your tiles and styles it is better to just create a fresh style with maputnik and make sure you are using maptiler as the source since those tiles are compatible with openmaptiles.

Why don't mapbox styles work with tiles generated from openmaptiles?

Openmaptiles and maptiler use the same tile layer scheme. Mapbox has a similar yet different standard.

If you try to use your openmaptiles *.mbtiles file with a mapbox style, you might not get any errors but the map will not render what you want. You should manually change the mapbox style.json, like in maputnik. There you can manually change the source, layer names, and filters so that they are compatible with openmaptiles. This will be a tedious process but maybe it is worth it, up to you. I guess it might take a similar amount of time as starting with a clean style.json file. You would also need to figure out your sprites and glyphs and make sure the style.json is reading the sprite sheet correctly.

Another way that might work would be to use openmaptiles-tools and change the layer scheme so that it matches mapbox. But this way seems way too complicated for me.

zcemycl commented 3 years ago

@amorfinv Thanks for your reply. Really appreciate. Follow all the steps, it works, to restart the container, I did,

Let the container running with make start-tileserver. Maybe in tmux running as background.
Restart it via docker restart container_id.

Will try out the other ways you mentioned later.

BBoldenow commented 2 years ago

This is driving me nuts, I have the same problem as @zcemycl - my styles show up blank (mostly). Even if I download the "basic-preview" style directly from the default, and reuse it (without changing a single line), basic preview ends up being blank...except at zoom 0. Then land borders, and water show up.

has anyone else encountered this? @amorfinv (tagging you since you seem to have gotten the farthest)

amorfinv commented 2 years ago

Hey @BBoldenow ,

That is a bit strange. It sounds like your data is incomplete (mbtiles file)? Can you a bit more specific explaining what you have tried?

I finally figured out a way to start the tileserver correctly without the "hack". Currently working on a tutorial for it. I am hoping to finish it in a week or two. It will be here once it is finished.

-Andres

BBoldenow commented 2 years ago

@amorfinv,

Thanks for all of your effort with this. I actually got it mostly working this morning - it works for vector tiles, but not raster tiles (and raster is what I'm really after, so I'll need to sort that out). I'm happy to explain what I did. First off, I did not add a directory to:

/app/node_modules/tileserver-gl-styles/styles

This is probably the main difference between what you explained in your post and what I did. I was having permissions issues with adding a new directory, so I just decided to modify the config.json to add the new styles. My config ends up looking like this:

{ "options": { "paths": { "root": "", "fonts": "", "styles": "styles", "mbtiles": "" }, "serveStaticMaps": true, "formatQuality": { "jpeg": 90, "webp": 90 }, "maxSize": 8192, "pbfAlias": "pbf" }, "styles": { "basic-preview": { "style": "basic-preview/style.json", "tilejson": { "bounds": [60.8786, 23.32744, 77.83562, 37.09664] } }, "my-style": { "style": "acmi-osm/style.json", "tilejson": { "bounds": [60.8786, 23.32744, 77.83562, 37.09664] } } }, "data": { "v3": { "mbtiles": "tiles.mbtiles" } } }

As a result I need to add fonts to my data's root directory, which causes my directory structure to look like this:

data --styles ----acmi-osm ----basic-preview --fonts ----Noto Sans Regular

I am not 100% sure what's going on with the raster tiles - I would think it uses the same data, but raster tiles are definitely not there (except at zoom 0). Vector tiles seem to work as expected though.

Hours later and I still haven't sorted out the raster generation. So if anyone figures that out let me know please.

amorfinv commented 2 years ago

@BBoldenow

I think adding the directory was my way of hacking the tileserver since I did not know how it worked before...I think the way you are doing it is better and the correct way.

Good to hear you made some progress.

That is weird about the raster tiles. I am not sure what could be wrong with it.

BBoldenow commented 2 years ago

@amorfinv - I have this totally working now, so if you want a 2nd pair of eyes on your tutorial, let me know.

amorfinv commented 2 years ago

Awesome..Yeah that would be cool..I haven't gotten around to it this week...but hoping maybe I can continue tomorrow

amorfinv commented 2 years ago

Hello @BBoldenow and everyone else in this thread.

I made a tutorial for custom styles for vector tiles. See here. Still needs some through proofreading

I hope this can close the issue.

BBoldenow commented 2 years ago

@amorfinv - I'm happy to read through it for you, but this is something I also got working. Sorry I didn't see your comment earlier!

BBoldenow commented 2 years ago

@amorfinv - This looks good to me. It's a lot more in depth than just styling, but good stuff.

mchourot commented 2 years ago

The Maputnik editor is a great tool to build a style in a easier way https://maputnik.github.io/editor/#0.84/0/0

prusswan commented 2 years ago

There may have been changes to the docker images over time, so the instructions that worked for some people may not be working now. In the end I extracted the default configuration by getting into the container and running node /app/src/main.js --verbose:

Starting tileserver-gl v3.1.1
No MBTiles specified, using tiles.mbtiles
[INFO] Automatically creating config file for tiles.mbtiles
[INFO] Only a basic preview style will be used.
[INFO] See documentation to learn how to create config.json file.
{
  "options": {
    "paths": {
      "root": "/app/node_modules/tileserver-gl-styles",
      "fonts": "fonts",
      "styles": "styles", 
      "mbtiles": "/data"
    }
  },
  "styles": {
    "basic-preview": {
      "style": "basic-preview/style.json",
      "tilejson": {
        "bounds": [
           ...
        ]
      }
    }
  },
  "data": {
    "v3": {
      "mbtiles": "tiles.mbtiles"
    }
  }
}

The config.json should be saved under /data (same location as tiles.mbtiles). With this it is easy to add additional styles (and leave basic-preview untouched as a working example). Just update the "style" config as needed as you likely want to place options.paths.styles under "/data/styles".

maptiler / tileserver-gl

Add custom style(s) - how? #530