DIY vector mapping :: David Grierson

Intro⌗

This post is testing HTML-in-Markdown embedding of a custom MapLibre GL Map. I’ll probably use this code in future to add some flair to flight simulator posts.

Points are filtered in order of:

Large Airports
Medium Airports
Small airports
Everything else (e.g. heliports, seaplane bases)

Map vector tiles were created from raw data using the MapBox Tippecanoe tool.

Static Maps⌗

Tileserver-GL can render static images based on parameters given in the URL.

Interactive Maps⌗

It can also serve vector tiles to an embedded map renderer, like Maplibre GL.

Click, drag, and scroll to see how the map filters data points based on zoom-level.

Zoom right in and you should see taxiway-level features.

Attributions⌗

Airport metadata courtesy of OurAirports.

Made with Natural Earth.

The map style is my own work. The JSON code is below, if you wish to recreate it. Any use of OSM data must have appropriate attribution.

Code sample⌗

json Radar Style


{
  "version": 8,
  "name": "Radar",
  "metadata": {"maputnik:renderer": "mbgljs"},
  "sources": {
    "natural_earth.vector": {
      "type": "vector",
      "url": "https://{your_tile_source.json}"
    },
    "latest.planet": {
      "type": "vector",
      "attribution": "<a href='http://openstreetmap.org/copyright'>© OpenStreetMap contributors</a>",
      "url": "https://{your_tile_source.json}"
    },
    "ICAO": {
      "type": "vector",
      "url": "https://{your_tile_source.json}"
    },
    "Graticules_20": {
      "type": "vector",
      "url": "https://{your_tile_source.json}"
    }
  },
  "sprite": "https://{your_url}/sprites/",
  "glyphs": "https://{your_url}/fonts/{fontstack}/{range}.pbf",
  "layers": [
    {"id": "terrain", "type": "background"},
    {
      "id": "water",
      "type": "fill",
      "source": "natural_earth.vector",
      "source-layer": "water",
      "paint": {
        "fill-color": "rgba(0, 7, 79, 1)",
        "fill-outline-color": "rgba(24, 125, 0, 1)"
      }
    },
    {
      "id": "graticules",
      "type": "line",
      "source": "Graticules_20",
      "source-layer": "ne_50m_graticules_20",
      "paint": {
        "line-color": "rgba(191, 180, 155, 1)",
        "line-dasharray": [50, 50],
        "line-width": 0.5,
        "line-opacity": 0.5
      }
    },
    {
      "id": "aeroways_2",
      "type": "line",
      "source": "latest.planet",
      "source-layer": "osm",
      "filter": ["all", ["==", "aeroway", "taxiway"]],
      "layout": {"line-cap": "butt", "line-join": "round"},
      "paint": {
        "line-color": "rgba(175, 175, 63, 1)",
        "line-dasharray": [1],
        "line-opacity": 0.5,
        "line-width": 2,
        "line-gap-width": 3
      }
    },
    {
      "id": "aeroways_1",
      "type": "line",
      "source": "latest.planet",
      "source-layer": "osm",
      "filter": ["all", ["==", "aeroway", "runway"]],
      "layout": {
        "line-cap": "square",
        "line-join": "miter",
        "line-round-limit": 10
      },
      "paint": {
        "line-color": "rgba(255, 255, 255, 1)",
        "line-width": 6,
        "line-dasharray": [1],
        "line-opacity": 0.5,
        "line-gap-width": 2
      }
    },
    {
      "id": "ICAO_points_else",
      "type": "circle",
      "source": "ICAO",
      "source-layer": "gps_codes",
      "minzoom": 9,
      "filter": [
        "!",
        [
          "any",
          [
            "case",
            ["==", ["typeof", ["get", "type"]], "string"],
            ["==", ["get", "type"], "small_airport"],
            false
          ],
          [
            "case",
            ["==", ["typeof", ["get", "type"]], "string"],
            ["==", ["get", "type"], "medium_airport"],
            false
          ],
          [
            "case",
            ["==", ["typeof", ["get", "type"]], "string"],
            ["==", ["get", "type"], "large_airport"],
            false
          ]
        ]
      ],
      "paint": {
        "circle-color": "rgba(149, 0, 255, 0)",
        "circle-stroke-color": "rgba(206, 255, 0, 1)",
        "circle-stroke-width": 1,
        "circle-radius": 2
      }
    },
    {
      "id": "ICAO_points_small",
      "type": "circle",
      "source": "ICAO",
      "source-layer": "gps_codes",
      "minzoom": 6,
      "filter": ["all", ["has", "gps_code"], ["==", "type", "small_airport"]],
      "paint": {
        "circle-color": "rgba(149, 0, 255, 0)",
        "circle-stroke-color": "rgba(0, 79, 255, 1)",
        "circle-stroke-width": 1,
        "circle-radius": 2
      }
    },
    {
      "id": "ICAO_points_medium",
      "type": "circle",
      "source": "ICAO",
      "source-layer": "gps_codes",
      "minzoom": 5,
      "filter": ["all", ["has", "gps_code"], ["==", "type", "medium_airport"]],
      "paint": {
        "circle-color": "rgba(149, 0, 255, 1)",
        "circle-stroke-color": "rgba(136, 192, 218, 1)",
        "circle-stroke-width": 1,
        "circle-radius": 2
      }
    },
    {
      "id": "ICAO_points_large",
      "type": "circle",
      "source": "ICAO",
      "source-layer": "gps_codes",
      "filter": ["all", ["has", "gps_code"], ["==", "type", "large_airport"]],
      "paint": {
        "circle-color": "rgba(235, 0, 255, 1)",
        "circle-stroke-color": "rgba(3, 20, 189, 1)",
        "circle-stroke-width": 1,
        "circle-radius": 4,
        "circle-blur": 0.5
      }
    },
    {
      "id": "ICAO_labels_else",
      "type": "symbol",
      "source": "ICAO",
      "source-layer": "gps_codes",
      "minzoom": 9.5,
      "filter": [
        "!",
        [
          "any",
          [
            "case",
            ["==", ["typeof", ["get", "type"]], "string"],
            ["==", ["get", "type"], "small_airport"],
            false
          ],
          [
            "case",
            ["==", ["typeof", ["get", "type"]], "string"],
            ["==", ["get", "type"], "medium_airport"],
            false
          ],
          [
            "case",
            ["==", ["typeof", ["get", "type"]], "string"],
            ["==", ["get", "type"], "large_airport"],
            false
          ]
        ]
      ],
      "layout": {
        "text-field": [
          "step",
          ["zoom"],
          ["get", "gps_code"],
          0,
          ["get", "gps_code"],
          9,
          ["concat", ["get", "gps_code"], "\n", ["get", "name"]]
        ],
        "text-allow-overlap": false,
        "text-ignore-placement": false,
        "symbol-z-order": "auto",
        "text-padding": 10,
        "text-anchor": "top",
        "text-optional": true,
        "text-variable-anchor": ["left", "right", "top", "bottom"],
        "icon-allow-overlap": true,
        "text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
        "symbol-avoid-edges": true,
        "symbol-spacing": 100,
        "text-size": 12
      },
      "paint": {"text-color": "rgba(206, 255, 0, 1)", "text-opacity": 1}
    },
    {
      "id": "ICAO_labels_small",
      "type": "symbol",
      "source": "ICAO",
      "source-layer": "gps_codes",
      "minzoom": 8,
      "filter": ["all", ["has", "gps_code"], ["==", "type", "small_airport"]],
      "layout": {
        "text-field": [
          "step",
          ["zoom"],
          ["get", "gps_code"],
          0,
          ["get", "gps_code"],
          9,
          ["concat", ["get", "gps_code"], "\n", ["get", "name"]]
        ],
        "text-allow-overlap": false,
        "text-ignore-placement": false,
        "symbol-z-order": "auto",
        "text-padding": 10,
        "text-anchor": "top",
        "text-optional": true,
        "text-variable-anchor": ["left", "right", "top", "bottom"],
        "icon-allow-overlap": true,
        "text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
        "symbol-avoid-edges": true,
        "symbol-spacing": 100,
        "text-size": 12
      },
      "paint": {"text-color": "rgba(0, 79, 255, 1)", "text-opacity": 1}
    },
    {
      "id": "ICAO_labels_medium",
      "type": "symbol",
      "source": "ICAO",
      "source-layer": "gps_codes",
      "minzoom": 6,
      "filter": ["all", ["has", "gps_code"], ["==", "type", "medium_airport"]],
      "layout": {
        "text-field": [
          "step",
          ["zoom"],
          ["get", "gps_code"],
          0,
          ["get", "gps_code"],
          8,
          ["concat", ["get", "gps_code"], "\n", ["get", "name"]]
        ],
        "text-allow-overlap": false,
        "text-ignore-placement": false,
        "symbol-z-order": "auto",
        "text-padding": 10,
        "text-anchor": "top",
        "text-optional": true,
        "text-variable-anchor": ["left", "right", "top", "bottom"],
        "icon-allow-overlap": true,
        "text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
        "symbol-avoid-edges": true,
        "symbol-spacing": 100,
        "text-size": 12
      },
      "paint": {"text-color": "rgba(167, 62, 173, 1)", "text-opacity": 1}
    },
    {
      "id": "ICAO_labels_large",
      "type": "symbol",
      "source": "ICAO",
      "source-layer": "gps_codes",
      "minzoom": 4,
      "filter": ["all", ["has", "gps_code"], ["==", "type", "large_airport"]],
      "layout": {
        "text-field": [
          "step",
          ["zoom"],
          ["get", "gps_code"],
          0,
          ["get", "gps_code"],
          6,
          ["concat", ["get", "gps_code"], "\n", ["get", "name"]]
        ],
        "text-allow-overlap": false,
        "text-ignore-placement": false,
        "symbol-z-order": "auto",
        "text-padding": 10,
        "text-anchor": "top",
        "text-optional": true,
        "text-variable-anchor": ["left", "right", "top", "bottom"],
        "icon-allow-overlap": true,
        "text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
        "symbol-avoid-edges": true,
        "symbol-spacing": 100,
        "text-size": ["literal", 15],
        "icon-anchor": "left",
        "text-justify": "center"
      },
      "paint": {
        "text-color": "rgba(235, 0, 255, 1)",
        "text-opacity": 1,
        "text-translate": [0, 0]
      }
    },
    {
      "id": "rivers",
      "type": "line",
      "source": "natural_earth.vector",
      "source-layer": "river",
      "minzoom": 4,
      "paint": {"line-color": "rgba(3, 11, 96, 1)"}
    }
  ],
  "attribution": "<a href='http://openstreetmap.org/copyright'>© OpenStreetMap contributors</a>",
  "id": "j148gjx7r",
  "owner": "David Grierson"
}

DIY vector mapping

Table of Contents

Intro⌗

Static Maps⌗

Interactive Maps⌗

Attributions⌗

Code sample⌗