Adding and styling Metro Stations on Basemap

[queeringthemap]

Hello!

I am editing the style of the basemap to fit my needs, and am not able to figure out a way to make the metro stations both visible and style-able (adding a color).

Could someone please let me know how this can be done?

Best,
Lucas

[bdon]

What data layer are you referring to (pois, landuse) and what symbology do you want? text, polygon, icon sprite?

[queeringthemap]

I would like to add POIs with text and icon sprite.

…

On Mon, Feb 12, 2024 at 10:32 PM Brandon Liu ***@***.***> wrote: What data layer are you referring to (pois, landuse) and what symbology do you want? text, polygon, icon sprite? — Reply to this email directly, view it on GitHub <#218 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIVDBKUEK7JNY2MZ74ICMW3YTLUGHAVCNFSM6AAAAABDFWMOYSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DINBZGI3DM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- *Lucas LaRochelle* Founder, Queering The Map <http://www.queeringthemap.com> Love Queering The Map? Support the project by contributing to our Patreon <http://patreon.com/queeringthemap> and sharing it in your networks <3

[bdon]

The POIs layer of the tileset has a pmap:kind tag which can be used for icon styling - this isn't yet implemented for the basemap style here, but you can definitely achieve this with your own custom style. You'll need to generate a custom maplibre spritesheet, refer to it in the sprite top-level key of the style, and then add a MapLibre style layer similar to:

    {
      "id": "pois_icons_label",
      "type": "symbol",
      "source": "protomaps",
      "minzoom": 12,
      "source-layer": "pois",
      "paint": {
        "text-halo-color": "white",
        "text-color": [
          "match",
          [
            "get",
            "pmap:kind"
          ],
          "station",
          "blue",
          "gray"

        ]
      },
      "layout": {
        "text-size": 11,
        "text-variable-anchor": [
          "left",
          "right"
        ],
        "icon-image": [
          "match",
          [
            "get",
            "pmap:kind"
          ],
          "station",
          "train_station",
          "generic"
        ],
        "text-font": [
          "Noto Sans Medium"
        ],
        "text-justify": "auto",
        "visibility": "visible",
        "text-offset": [
          1,
          0
        ],
        "icon-size": 0.8,
        "text-field": [
          "get",
          "name"
        ]
      }
    },

[queeringthemap]

Thank you! Where exactly do I add the "sprite": " https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite". ? when I add it in base_layers.ts, it does not work.

…

On Tue, Feb 13, 2024 at 3:20 AM Brandon Liu ***@***.***> wrote: The POIs layer of the tileset has a pmap:kind tag which can be used for icon styling - this isn't yet implemented for the basemap, but you can definitely achieve this with your own custom style. You'll need to generate a custom maplibre spritesheet <https://maplibre.org/maplibre-style-spec/sprite/>, refer to it in the sprite top-level key of the style, and then add a MapLibre style layer similar to: { "id": "pois_icons_label", "type": "symbol", "source": "protomaps", "minzoom": 12, "source-layer": "pois", "paint": { "text-halo-color": "white", "text-color": [ "match", [ "get", "pmap:kind" ], "station", "blue", "gray" ] }, "layout": { "text-size": 11, "text-variable-anchor": [ "left", "right" ], "icon-image": [ "match", [ "get", "pmap:kind" ], "station", "train_station", "generic" ], "text-font": [ "Noto Sans Medium" ], "text-justify": "auto", "visibility": "visible", "text-offset": [ 1, 0 ], "icon-size": 0.8, "text-field": [ "get", "name" ] } }, [image: Uploading Screenshot 2024-02-13 at 17.19.59.png…] — Reply to this email directly, view it on GitHub <#218 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIVDBKVLISTH7P7W53Z2MHLYTMV6RAVCNFSM6AAAAABDFWMOYSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DINJRGMYTC> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- *Lucas LaRochelle* Founder, Queering The Map <http://www.queeringthemap.com> Love Queering The Map? Support the project by contributing to our Patreon <http://patreon.com/queeringthemap> and sharing it in your networks <3

[bdon]

The TypeScript code in this repo generates a JSON MapLibre style.

If you use "Get Style JSON" on https://maps.protomaps.com/ it will open up the result JSON. the sprite key goes at the top-level of that JSON document, sibling to glyphs, sources, etc.

[bdon]

a spritesheet sprite was added as part of protomaps-themes-base v3.0.0 - for townspot only right now, but POIs are next. #246