Finish Map Styling in Protomaps

[queeringthemap]

No description provided.

[queeringthemap]

I have almost completed the styling of the Protomaps with the QTM colour scheme ~ will pop the code in here once it is finished.

@nielsbom the only thing I could not figure out is adding the sprites for the metro systems to the map. Would you be able to help me with this?

[jokroese]

@queeringthemap, have you asked about the metro sprites on the Protomaps slack channel?

[nielsbom]

Lucas and I will look at the metro sprites together (right now).

[queeringthemap]

I just asked in the maplibre-gl-js thread, and Ni and I were working on this this morning. Have almost got a .json file finished that can be used for the PMTiles instance, yahoo!

[jokroese]

Great. Will we host that .json in this repo?

[nielsbom]

After some flailing of mine yesterday I discovered today that there's a tool for creating styles: https://maplibre.org/maputnik/ (https://github.com/maplibre/maputnik). How it works exactly, esp around sources is not clear to me yet. But I'll dive into that more tomorrow.

[nielsbom]

Great. Will we host that .json in this repo?

Yes, because it's part of the configuration we do in the browser. Example:

const map = new maplibregl.Map({
    container: 'map',
    style: // This here
       'https://api.maptiler.com/maps/streets/style.json?key=get_your_own',
    center: [12.550343, 55.665957],
    zoom: 8
});

[nielsbom]

I've learned a lot today about MapLibre styling. If helpful I can add some notes to Notion.

Styling in MapLibre GL JS is not just styling. Very short:

• index.html loads script.js
• script.js tells MapLibre GL JS to use a "style file" (in this case style.json)
• the style file defines the following, which MapLibre GL JS will use to show the map
  • sources: where to get the data and how it should behave
  • layers: how to display data from a source, design, also some behaviour.

So to style (verb) the map we need to have both 1..n sources and then let the layers (which contain most of the design) use those sources.

What now

The styling file that Lucas worked on (and I helped a bit with) unfortunately doesn't load in Maputnik. That work was based on this code. I'm gonna see if I can use the sources that are currently used on https://queeringthemap.netlify.app/. And then when we have a tileserver running somewhere we can switch to that. The tileserver does not need to generate the data we're styling tho 😃.

[nielsbom]

So what I'm (slowly) doing now is:

1. In Maputnik
2. Import the style.json work in progress. I started with this one.
3. Look at tiles.json to see which vector layers we have to style (examples: aerodrome_label, aeroway, boundary.
4. Then configure the layer for each vector-layer based on the styling file Lucas sent me (can't add it, so below).

I'm probably gonna work on it tomorrow a bit too.

qtm_generate_styles.js

const t = {
  background: "#ecbfd7",
  earth: "#ecbfd7",
  park_a: "#B8C08C",
  park_b: "#B8C08C",
  hospital: "#e4dad9",
  industrial: "#dd89b7",
  school: "#e4ded7",
  wood_a: "#B8C08C",
  wood_b: "#B8C08C",
  pedestrian: "#e3e0d4",
  scrub_a: "#B8C08C",
  scrub_b: "#B8C08C",
  glacier: "#FFE5F3",
  sand: "#FFE5F3",
  beach: "#e8e4d0",
  aerodrome: "#dadbdf",
  runway: "#e9e9ed",
  water: "#788BF2",
  pier: "#e0e0e0",
  zoo: "#c6dcdc",
  military: "#dcdcdc",

  tunnel_other_casing: "#e0e0e0",
  tunnel_minor_casing: "#e0e0e0",
  tunnel_link_casing: "#e0e0e0",
  tunnel_medium_casing: "#e0e0e0",
  tunnel_major_casing: "#e0e0e0",
  tunnel_highway_casing: "#e0e0e0",
  tunnel_other: "#d5d5d5",
  tunnel_minor: "#d5d5d5",
  tunnel_link: "#d5d5d5",
  tunnel_medium: "#d5d5d5",
  tunnel_major: "#d5d5d5",
  tunnel_highway: "#d5d5d5",

  transit_pier: "#e0e0e0",
  buildings: "#f2a0cd",

  minor_service_casing: "#e0e0e0",
  minor_casing: "#f2a0cd",
  link_casing: "#e0e0e0",
  medium_casing: "#e0e0e0",
  major_casing_late: "#e0e0e0",
  highway_casing_late: "#e88749",
  other: "#ebebeb",
  minor_service: "#F3D8E9",
  minor_a: "#F3D8E9",
  minor_b: "#F3D8E9",
  link: "#ffffff",
  medium: "#f5f5f5",
  major_casing_early: "#e0e0e0",
  major: "#ffffff",
  highway_casing_early: "#e88749",
  highway: "#fcc68d",

  railway: "red",
  boundaries: "#adadad",
  waterway_label: "#ffffff",

  bridges_other_casing: "#e0e0e0",
  bridges_minor_casing: "#e0e0e0",
  bridges_link_casing: "#e0e0e0",
  bridges_medium_casing: "#e0e0e0",
  bridges_major_casing: "#e0e0e0",
  bridges_highway_casing: "#e0e0e0",
  bridges_other: "#ebebeb",
  bridges_minor: "#ffffff",
  bridges_link: "#ffffff",
  bridges_medium: "#f0eded",
  bridges_major: "#f5f5f5",
  bridges_highway: "#ffffff",

  roads_label_minor: "#974367",
  roads_label_minor_halo: "#F3D8E9",
  roads_label_major: "#000000",
  roads_label_major_halo: "#ffffff",
  ocean_label: "#ffffff",
  peak_label: "#7e9aa0",
  subplace_label: "#974367",
  subplace_label_halo: "#F3D8E9",
  city_circle: "#ffffff",
  city_circle_stroke: "#a3a3a3",
  city_label: "#000000",
  city_label_halo: "#e0e0e0",
  state_label: "#000000",
  state_label_halo: "#e0e0e0",
  country_label: "#000000",
};

const source = "maplibre";

const style = {
  version: 8,
  name: "qtm",
  layers: [
    {
      id: "background",
      type: "background",
      paint: {
        "background-color": t.background,
      },
    },
    {
      id: "earth",
      type: "fill",
      source: source,
      "source-layer": "earth",
      paint: {
        "fill-color": t.earth,
      },
    },
    {
      id: "landuse_park",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: [
        "any",
        [
          "in",
          "pmap:kind",
          "national_park",
          "park",
          "cemetery",
          "protected_area",
          "nature_reserve",
          "forest",
          "golf_course",
        ],
      ],
      paint: {
        "fill-color": [
          "interpolate",
          ["linear"],
          ["zoom"],
          0,
          t.park_a,
          12,
          t.park_b,
        ],
      },
    },
    {
      id: "landuse_urban_green",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: [
        "any",
        ["in", "pmap:kind", "allotments", "village_green", "playground"],
      ],
      paint: {
        "fill-color": t.park_b,
        "fill-opacity": 0.7,
      },
    },
    {
      id: "landuse_hospital",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: ["any", ["==", "pmap:kind", "hospital"]],
      paint: {
        "fill-color": t.hospital,
      },
    },
    {
      id: "landuse_industrial",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: ["any", ["==", "pmap:kind", "industrial"]],
      paint: {
        "fill-color": t.industrial,
      },
    },
    {
      id: "landuse_school",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: ["any", ["in", "pmap:kind", "school", "university", "college"]],
      paint: {
        "fill-color": t.school,
      },
    },
    {
      id: "landuse_beach",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: ["any", ["in", "pmap:kind", "beach"]],
      paint: {
        "fill-color": t.beach,
      },
    },
    {
      id: "landuse_zoo",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: ["any", ["in", "pmap:kind", "zoo"]],
      paint: {
        "fill-color": t.zoo,
      },
    },
    {
      id: "landuse_military",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: [
        "any",
        ["in", "pmap:kind", "military", "naval_base", "airfield"],
      ],
      paint: {
        "fill-color": t.zoo,
      },
    },
    {
      id: "natural_wood",
      type: "fill",
      source: source,
      "source-layer": "natural",
      filter: ["any", ["in", "pmap:kind", "wood", "nature_reserve", "forest"]],
      paint: {
        "fill-color": [
          "interpolate",
          ["linear"],
          ["zoom"],
          0,
          t.wood_a,
          12,
          t.wood_b,
        ],
      },
    },
    {
      id: "natural_scrub",
      type: "fill",
      source: source,
      "source-layer": "natural",
      filter: ["in", "pmap:kind", "scrub", "grassland", "grass"],
      paint: {
        "fill-color": [
          "interpolate",
          ["linear"],
          ["zoom"],
          0,
          t.scrub_a,
          12,
          t.scrub_b,
        ],
      },
    },
    {
      id: "natural_glacier",
      type: "fill",
      source: source,
      "source-layer": "natural",
      filter: ["==", "pmap:kind", "glacier"],
      paint: {
        "fill-color": t.glacier,
      },
    },
    {
      id: "natural_sand",
      type: "fill",
      source: source,
      "source-layer": "natural",
      filter: ["==", "pmap:kind", "sand"],
      paint: {
        "fill-color": t.sand,
      },
    },
    {
      id: "landuse_aerodrome",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: ["any", ["in", "pmap:kind", "aerodrome"]],
      paint: {
        "fill-color": t.aerodrome,
      },
    },
    {
      id: "transit_runway",
      type: "line",
      source: source,
      "source-layer": "transit",
      filter: ["any", ["in", "pmap:kind_detail", "runway"]],
      paint: {
        "line-color": t.runway,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          10,
          0,
          12,
          4,
          18,
          30,
        ],
      },
    },
    {
      id: "transit_taxiway",
      type: "line",
      source: source,
      "source-layer": "transit",
      minzoom: 13,
      filter: ["any", ["in", "pmap:kind_detail", "taxiway"]],
      paint: {
        "line-color": t.runway,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          1,
          15,
          6,
        ],
      },
    },
    // {
    //   id: "landuse_runway",
    //   type: "fill",
    //   source: source,
    //   "source-layer": "landuse",
    //   minzoom: 14,
    //   filter: [
    //     "any",
    //     ["in", "pmap:kind_detail", "runway", "taxiway"],
    //   ],
    //   paint: {
    //     "fill-color": t.runway,
    //   },
    // },
    {
      id: "water",
      type: "fill",
      source: source,
      "source-layer": "water",
      paint: {
        "fill-color": t.water,
      },
    },
    {
      id: "physical_line_stream",
      type: "line",
      source: source,
      "source-layer": "physical_line",
      minzoom: 14,
      filter: ["all", ["in", "pmap:kind", "stream"]],
      paint: {
        "line-color": t.water,
        "line-width": 0.5,
      },
    },
    {
      id: "physical_line_river",
      type: "line",
      source: source,
      "source-layer": "physical_line",
      minzoom: 9,
      filter: ["all", ["in", "pmap:kind", "river"]],
      paint: {
        "line-color": t.water,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          9,
          0,
          9.5,
          1.0,
          18,
          12,
        ],
      },
    },
    {
      id: "landuse_pedestrian",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: ["any", ["==", "pmap:kind", "pedestrian"]],
      paint: {
        "fill-color": t.pedestrian,
      },
    },
    {
      id: "landuse_pier",
      type: "fill",
      source: source,
      "source-layer": "landuse",
      filter: ["any", ["==", "pmap:kind", "pier"]],
      paint: {
        "fill-color": t.pier,
      },
    },
    {
      id: "roads_tunnels_other_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["in", "pmap:kind", "other", "path"],
      ],
      paint: {
        "line-color": t.tunnel_other_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          14,
          0,
          20,
          7,
        ],
      },
    },
    {
      id: "roads_tunnels_minor_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["==", "pmap:kind", "minor_road"],
      ],
      paint: {
        "line-color": t.tunnel_minor_casing,
        "line-dasharray": [3, 2],
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          11,
          0,
          12.5,
          0.5,
          15,
          2,
          18,
          11,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          12,
          0,
          12.5,
          1,
        ],
      },
    },
    {
      id: "roads_tunnels_link_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:link", 1]],
      paint: {
        "line-color": t.tunnel_link_casing,
        "line-dasharray": [3, 2],
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          1,
          18,
          11,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          12,
          0,
          12.5,
          1,
        ],
      },
    },
    {
      id: "roads_tunnels_medium_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["==", "pmap:kind", "medium_road"],
      ],
      paint: {
        "line-color": t.tunnel_medium_casing,
        "line-dasharray": [3, 2],
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          7.5,
          0.5,
          18,
          13,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          10,
          0,
          10.5,
          1,
        ],
      },
    },
    {
      id: "roads_tunnels_major_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["==", "pmap:kind", "major_road"],
      ],
      paint: {
        "line-color": t.tunnel_major_casing,
        "line-dasharray": [3, 2],
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          7.5,
          0.5,
          18,
          13,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          9,
          0,
          9.5,
          1,
        ],
      },
    },
    {
      id: "roads_tunnels_highway_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["==", "pmap:kind", "highway"],
        ["!=", "pmap:link", 1],
      ],
      paint: {
        "line-color": t.tunnel_highway_casing,
        "line-dasharray": [6, 0.5],
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          3,
          0,
          3.5,
          0.5,
          18,
          15,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          7.5,
          1,
          20,
          15,
        ],
      },
    },
    {
      id: "roads_tunnels_other",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["in", "pmap:kind", "other", "path"],
      ],
      paint: {
        "line-color": t.tunnel_other,
        "line-dasharray": [4.5, 0.5],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          14,
          0,
          20,
          7,
        ],
      },
    },
    {
      id: "roads_tunnels_minor",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["==", "pmap:kind", "minor_road"],
      ],
      paint: {
        "line-color": t.tunnel_minor,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          11,
          0,
          12.5,
          0.5,
          15,
          2,
          18,
          11,
        ],
      },
    },
    {
      id: "roads_tunnels_link",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: ["all", ["<", "pmap:level", 0], ["==", "pmap:link", 1]],
      paint: {
        "line-color": t.tunnel_minor,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          1,
          18,
          11,
        ],
      },
    },
    {
      id: "roads_tunnels_medium",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["==", "pmap:kind", "medium_road"],
      ],
      paint: {
        "line-color": t.tunnel_medium,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          12,
          1.2,
          15,
          3,
          18,
          13,
        ],
      },
    },
    {
      id: "roads_tunnels_major",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["==", "pmap:kind", "major_road"],
      ],
      paint: {
        "line-color": t.tunnel_major,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          6,
          0,
          12,
          1.6,
          15,
          3,
          18,
          13,
        ],
      },
    },
    {
      id: "roads_tunnels_highway",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["<", "pmap:level", 0],
        ["==", "pmap:kind", "highway"],
        ["!=", "pmap:link", 1],
      ],
      paint: {
        "line-color": t.tunnel_highway,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          3,
          0,
          6,
          1.1,
          12,
          1.6,
          15,
          5,
          18,
          15,
        ],
      },
    },
    {
      id: "buildings",
      type: "fill",
      source: source,
      "source-layer": "buildings",
      paint: {
        "fill-color": t.buildings,
        "fill-opacity": 0.5,
      },
    },
    {
      id: "transit_pier",
      type: "line",
      source: source,
      "source-layer": "transit",
      filter: ["any", ["==", "pmap:kind", "pier"]],
      paint: {
        "line-color": t.transit_pier,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          12,
          0,
          12.5,
          0.5,
          20,
          16,
        ],
      },
    },
    {
      id: "roads_minor_service_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 13,
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "minor_road"],
        ["==", "pmap:kind_detail", "service"],
      ],
      paint: {
        "line-color": t.minor_service_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          18,
          8,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          0.8,
        ],
      },
    },
    {
      id: "roads_minor_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "minor_road"],
        ["!=", "pmap:kind_detail", "service"],
      ],
      paint: {
        "line-color": t.minor_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          11,
          0,
          12.5,
          0.5,
          15,
          2,
          18,
          11,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          12,
          0,
          12.5,
          1,
        ],
      },
    },
    {
      id: "roads_link_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 13,
      filter: ["all", ["==", "pmap:link", 1]],
      paint: {
        "line-color": t.minor_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          1,
          18,
          11,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          1.5,
        ],
      },
    },
    {
      id: "roads_medium_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "medium_road"],
      ],
      paint: {
        "line-color": t.medium_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          12,
          1.2,
          15,
          3,
          18,
          13,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          10,
          0,
          10.5,
          1.5,
        ],
      },
    },
    {
      id: "roads_major_casing_late",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "major_road"],
      ],
      paint: {
        "line-color": t.major_casing_late,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          6,
          0,
          12,
          1.6,
          15,
          3,
          18,
          13,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          9,
          0,
          9.5,
          1,
        ],
      },
    },
    {
      id: "roads_highway_casing_late",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "highway"],
        ["!=", "pmap:link", 1],
      ],
      paint: {
        "line-color": t.highway_casing_late,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          3,
          0,
          3.5,
          0.5,
          18,
          15,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          7.5,
          1,
          20,
          15,
        ],
      },
    },
    {
      id: "roads_other",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["in", "pmap:kind", "other", "path"],
      ],
      paint: {
        "line-color": t.other,
        "line-dasharray": [3, 1],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          14,
          0,
          20,
          7,
        ],
      },
    },
    {
      id: "roads_link",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: ["all", ["==", "pmap:link", 1]],
      paint: {
        "line-color": t.link,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          1,
          18,
          11,
        ],
      },
    },
    {
      id: "roads_minor_service",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "minor_road"],
        ["==", "pmap:kind_detail", "service"],
      ],
      paint: {
        "line-color": t.minor_service,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          18,
          8,
        ],
      },
    },
    {
      id: "roads_minor",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "minor_road"],
        ["!=", "pmap:kind_detail", "service"],
      ],
      paint: {
        "line-color": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          11,
          t.minor_a,
          16,
          t.minor_b,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          11,
          0,
          12.5,
          0.5,
          15,
          2,
          18,
          11,
        ],
      },
    },
    {
      id: "roads_medium",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "medium_road"],
      ],
      paint: {
        "line-color": t.medium,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          12,
          1.2,
          15,
          3,
          18,
          13,
        ],
      },
    },
    {
      id: "roads_major_casing_early",
      type: "line",
      source: source,
      "source-layer": "roads",
      maxzoom: 12,
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "major_road"],
      ],
      paint: {
        "line-color": t.major_casing_early,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          7.5,
          0.5,
          18,
          13,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          9,
          0,
          9.5,
          1,
        ],
      },
    },
    {
      id: "roads_major",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "major_road"],
      ],
      paint: {
        "line-color": t.major,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          6,
          0,
          12,
          1.6,
          15,
          3,
          18,
          13,
        ],
      },
    },
    {
      id: "roads_highway_casing_early",
      type: "line",
      source: source,
      "source-layer": "roads",
      maxzoom: 12,
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "highway"],
        ["!=", "pmap:link", 1],
      ],
      paint: {
        "line-color": t.highway_casing_early,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          3,
          0,
          3.5,
          0.5,
          18,
          15,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          7.5,
          1,
        ],
      },
    },
    {
      id: "roads_highway",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        ["==", "pmap:level", 0],
        ["==", "pmap:kind", "highway"],
        ["!=", "pmap:link", 1],
      ],
      paint: {
        "line-color": t.highway,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          3,
          0,
          6,
          1.1,
          12,
          1.6,
          15,
          5,
          18,
          15,
        ],
      },
    },
    {
      id: "transit_railway",
      type: "line",
      source: source,
      "source-layer": "transit",
      filter: ["all", ["==", "pmap:kind", "rail"]],
      paint: {
        "line-dasharray": [0.3, 0.75],
        "line-opacity": 0.5,
        "line-color": t.railway,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          3,
          0,
          6,
          0.15,
          18,
          9,
        ],
      },
    },
    // {
    //   id: "transit_railway_tracks",
    //   type: "line",
    //   source: source,
    //   "source-layer": "transit",
    //   filter: ["all", ["==", "pmap:kind", "rail"]],
    //   paint: {
    //     "line-color": t.railway_tracks,
    //     "line-width": 0.8,
    //     "line-dasharray": [6, 10],
    //   },
    // },
    {
      id: "boundaries_country",
      type: "line",
      source: source,
      "source-layer": "boundaries",
      filter: ["<=", "pmap:min_admin_level", 2],
      paint: {
        "line-color": t.boundaries,
        "line-width": 1,
        "line-dasharray": [3, 2],
      },
    },
    {
      id: "boundaries",
      type: "line",
      source: source,
      "source-layer": "boundaries",
      filter: [">", "pmap:min_admin_level", 2],
      paint: {
        "line-color": t.boundaries,
        "line-width": 0.5,
        "line-dasharray": [3, 2],
      },
    },
    {
      id: "roads_bridges_other_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["in", "pmap:kind", "other", "path"],
      ],
      paint: {
        "line-color": t.bridges_other_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          14,
          0,
          20,
          7,
        ],
      },
    },
    {
      id: "roads_bridges_link_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: ["all", [">", "pmap:level", 0], ["==", "pmap:link", 1]],
      paint: {
        "line-color": t.bridges_minor_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          1,
          18,
          11,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          12,
          0,
          12.5,
          1.5,
        ],
      },
    },
    {
      id: "roads_bridges_minor_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["==", "pmap:kind", "minor_road"],
      ],
      paint: {
        "line-color": t.bridges_minor_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          11,
          0,
          12.5,
          0.5,
          15,
          2,
          18,
          11,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          0.8,
        ],
      },
    },
    {
      id: "roads_bridges_medium_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["==", "pmap:kind", "medium_road"],
      ],
      paint: {
        "line-color": t.bridges_medium_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          12,
          1.2,
          15,
          3,
          18,
          13,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          10,
          0,
          10.5,
          1.5,
        ],
      },
    },
    {
      id: "roads_bridges_major_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["==", "pmap:kind", "major_road"],
      ],
      paint: {
        "line-color": t.bridges_major_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          7.5,
          0.5,
          18,
          10,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          9,
          0,
          9.5,
          1.5,
        ],
      },
    },
    // {
    //   id: "roads_bridges_highway_casing",
    //   type: "line",
    //   source: source,
    //   "source-layer": "roads",
    //   minzoom: 12,
    //   filter: ["all", [">", "pmap:level", 0], ["==", "pmap:kind", "highway"], ["!=", "pmap:link", 1]],
    //   paint: {
    //     "line-color": t.bridges_highway_casing,
    //     "line-gap-width": [
    //       "interpolate",
    //       ["exponential", 1.6],
    //       ["zoom"],
    //       3,
    //       0,
    //       3.5,
    //       0.5,
    //       18,
    //       32,
    //     ],
    //     "line-width": [
    //       "interpolate",
    //       ["exponential", 1.6],
    //       ["zoom"],
    //       7,
    //       0,
    //       7.5,
    //       1,
    //     ],
    //   },
    //   layout: {
    //     visibility: casingVisibility,
    //   },
    // },
    {
      id: "roads_bridges_other",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["in", "pmap:kind", "other", "path"],
      ],
      paint: {
        "line-color": t.bridges_other,
        "line-dasharray": [2, 1],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          14,
          0,
          20,
          7,
        ],
      },
    },
    {
      id: "roads_bridges_minor",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["==", "pmap:kind", "minor_road"],
      ],
      paint: {
        "line-color": t.bridges_minor,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          11,
          0,
          12.5,
          0.5,
          15,
          2,
          18,
          11,
        ],
      },
    },
    {
      id: "roads_bridges_link",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: ["all", [">", "pmap:level", 0], ["==", "pmap:link", 1]],
      paint: {
        "line-color": t.bridges_minor,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          13,
          0,
          13.5,
          1,
          18,
          11,
        ],
      },
    },
    {
      id: "roads_bridges_medium",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["==", "pmap:kind", "medium_road"],
      ],
      paint: {
        "line-color": t.bridges_medium,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          12,
          1.2,
          15,
          3,
          18,
          13,
        ],
      },
    },
    {
      id: "roads_bridges_major",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["==", "pmap:kind", "major_road"],
      ],
      paint: {
        "line-color": t.bridges_major,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          6,
          0,
          12,
          1.6,
          15,
          3,
          18,
          13,
        ],
      },
    },
    {
      id: "roads_bridges_highway_casing",
      type: "line",
      source: source,
      "source-layer": "roads",
      minzoom: 12,
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["==", "pmap:kind", "highway"],
        ["!=", "pmap:link", 1],
      ],
      paint: {
        "line-color": t.bridges_highway_casing,
        "line-gap-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          3,
          0,
          3.5,
          0.5,
          18,
          15,
        ],
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          7,
          0,
          7.5,
          1,
          20,
          15,
        ],
      },
    },
    {
      id: "roads_bridges_highway",
      type: "line",
      source: source,
      "source-layer": "roads",
      filter: [
        "all",
        [">", "pmap:level", 0],
        ["==", "pmap:kind", "highway"],
        ["!=", "pmap:link", 1],
      ],
      paint: {
        "line-color": t.bridges_highway,
        "line-width": [
          "interpolate",
          ["exponential", 1.6],
          ["zoom"],
          3,
          0,
          6,
          1.1,
          12,
          1.6,
          15,
          5,
          18,
          15,
        ],
      },
    },
  ],
  sources: {
    maplibre: {
      url: "https://demotiles.maplibre.org/tiles/tiles.json",
      type: "vector",
    },
  },
};

console.log(JSON.stringify(style));

[jokroese]

Wow, what an adventure! And all for a few icons of metro stations 🚂

[queeringthemap]

Have the styling 95% finished, in the correct format:
qtm_styles_april24_morning.json

Still remaining is:

1. Making custom sprites for the metro stations, because the ones being pulled currently are not cute.
2. Figuring out how to separate the loading of POI's so that the names of parks will be displayed, but not business' (which are all currently being pulled by poi_level_1.
3. Figuring out how to style Parks independently(image attached)...this one is driving me crazy, and I have reached out for help on the MapLibre GL JS Slack channel, and on Stack Overflow, because I cannot for the life of me figure it out. It should be able to be pulled through the leisure=park class, but for some reason this isn't working. Right now they are being subsumed into landuse=residential, or as the background. If you have an idea what I might be doing wrong, would love your advice :)

[queeringthemap]

2 is now solved :)

[jokroese]

I guess the image you're showing for 3 is made through Maputnik? I'm not familiar with it as a tool but looking at it, it doesn't look like it's pulling in a leisure layer. And for some reason it doesn't look like it's an option to add a 'leisure' layer from the input options. So 3 might be more a feature of Maputnik than an issue with your json.

[jokroese]

Idea for 1:

[queeringthemap]

a fabulous idea, i like it better than the current one ;)

[queeringthemap]

the image is being pulled through the Sprite source layer, so I think it can be customized, I just have to figure out how to make my own sprite sheet.

[queeringthemap]

hmm so if it is a Maputnik issue, do you think it will display the parks correctly once it is live via the json?

[jokroese]

hmm so if it is a Maputnik issue, do you think it will display the parks correctly once it is live via the json?

This week I'll move the tiles to use the free tier of Protomaps while we are developing and we can find out :)

[queeringthemap]

Amazing, thank you :)

[nielsbom]

I've configured Cloudflare to allow requests from MapLibre.org (for now) so we can use Maputnik to edit the styles with the right datasource.

To do this in Maputnik:

1. Remove all current data sources.
2. Add this PMTiles-autogenerated JSON file as the single remaining data source (just point to the URL).
3. Now for each layer find the right source layer and filtering. This is a little different from the datasources upon which the style file above was created so use this guide to the PMTiles basemap layers to find out what's there and how to use it. The Maputnik "inspect map" option is also very practical for this.

[nielsbom]

The branch for PR #33 now uses the new tileserver, so that branch can now be used to develop the style.json file which is also in that branch of the repository.

[jokroese]

I did a first LLM-based adaption of @queeringthemap's qtm_styles_april24_morning.json to follow the style spec required from Protomaps: style.json. There are a bunch of things it didn't carry over correctly but it is a start and will probably be a better point to continue from, using Maputnik.

[nielsbom]

I worked with Lucas today, gave them a high level overview of how Maplibre is connected to the style file and the PMTiles Cloudflare business. We also looked at how to explore and style the source layers that the PMTiles provide.

The step-by-step process for styling is:

• what do I want to show on the map? (what kinds of "features")
• find which source layer those things are on
• what kind of source layer is it? (point, line, polygon)
• add a layer for the specific feature
  • name the layer
  • use the right source layer
  • use the right kind: (symbol, line, fill)
  • move the layer in the right position wrt other layers
• if you want only specific features of that source layer
  • add a filter, or multiple, using the right "operator": ==, in etc
  • when using multiple filters: combine in the way you want (every, any, none)
• style it: give it color, line width, stroke, etc etc

Lucas now feels enlightened and empowered and is roaring to apply the styles to the PMTiles. They'll drop the updated styles here.

[jokroese]

Thanks for collecting and making sense of all of that information. Love having a diagram for this too! Would be great to include one with mermaid.js in the documentation.

[queeringthemap]

Hiya! Almost finished with all of the polygons and lines in the new style :)

I am having trouble figuring out how to add the labels (for countries, roads, etc) from the Protomaps documentation. Do you know how this is done?

[nielsbom]

I don't know but I can help figure it out tomorrow.

[nielsbom]

Oh and please drop any progress here pls, then I can work with that.

[queeringthemap]

here is where I am at so far!

Going to continue adding details tomorrow, but dropping this here now for progress~

QTM_newstyle_may26_1.14.json

[nielsbom]

Hey nice, looking good! I've added this WIP to the branch and consequently the PR.

[queeringthemap]

Thanks! Here is a new version of the .json file:

QTM_newstyle_may28_12.22.json

A few issues I am having:

1. I've set the places_city to a min zoom of 4, but for some reason they are only appearing on a min zoom of 7, which makes navigating the map significantly more challenging. Is there a way to force them to appear at a min zoom level of 4?

2. Some of the Labels only have either {name} or {name:en}, or sometimes both. Is there a way to filter so that it displays either one, but not both at the same time?

3. In this version of the map, both in Maputnik and in the branch, the change in tiles from zooming seems to load very slowly. Is there a way we can increase the speed of this?

[nielsbom]

Hi!

I've set the places_city to a min zoom of 4, but for some reason they are only appearing on a min zoom of 7, which makes navigating the map significantly more challenging. Is there a way to force them to appear at a min zoom level of 4?

This is because under "Text layout properties" you set it to interpolate from zoomlevel 7. Changing that to 4 will show city names at zoomlevel 4.

Some of the Labels only have either {name} or {name:en}, or sometimes both. Is there a way to filter so that it displays either one, but not both at the same time?

I think the best way to do this is with an expression. Click the expression icon (fx) and you can write a bit of JSON in the field.

As an example I think this is the JSON that says "if there's an {name:en} use that, else use {name}":

["string", ["get", "name:en"], ["get", "name"]]

In this version of the map, both in Maputnik and in the branch, the change in tiles from zooming seems to load very slowly. Is there a way we can increase the speed of this?

Jo and I noticed this too. I'll investigate, I'll put a bit of time into that Friday morning.

[nielsbom]

My solution in the previous comment wrt places_city didn't actually fix it. Lucas and I investigated for an hour but couldn't find a solution. Asked a question here now.

[jokroese]

Can we split this into separate issues to help track what's going on here? It seems to be tracking a few different things at the moment.

[nielsbom]

Update on the sprite styling: #31 (comment)

[nielsbom]

The "places_city" problem has been solved, see our question and the answer.

[nielsbom]

Can we split this into separate issues to help track what's going on here? It seems to be tracking a few different things at the moment.

I've created #50 for PMTiles tiles speed.

I don't think there are other open (sub-)issues flowing out of this issue right now.

[queeringthemap]

here is the final .json, with everything working well :)
qtm_newstyle_june4_final.json

[jokroese]

here is the final .json, with everything working well :) qtm_newstyle_june4_final.json

Do you want to commit this to the pull request #33? I can do it but thought you might like to claim all of that work with a commit in your name :)