Add custom semantics overlays

You can take profit of Panoramax Tags in your own web viewer using Semantics overlays. They allow to display pictures having specific tags directly over the map, like traffic signs overlay.

This can be done after viewer initial load:

var viewer = document.getElementById("viewer");

viewer.onceMapReady().then(() => {
    viewer.map.addSemanticOverlay(
        // Overlay ID, used by MapLibre and for URL
        "animals",

        // API semantics filter
        "\"semantics.osm|traffic_sign\"='FR:A15b'",

        // MapLibre layer style, with custom metadata for viewer widget
        {
            metadata: { "name": "Wild animals" },
            type: "circle",
            paint: {
                "circle-color": "blue"
            }
        }
    );
});

You can have any kind of complex MapLibre style rendering, including sprites. For example, that's how we manage the traffic signs overlay:

var viewer = document.getElementById("viewer");

viewer.onceMapReady().then(() => {
    viewer.map.addSemanticOverlay(
        // Overlay ID, used by MapLibre and for URL
        "tfsigns",

        // API semantics filter
        "\"semantics.osm|traffic_sign\" IS NOT NULL",

        // MapLibre layer style, with custom metadata for viewer widget
        {
            metadata: { "name": "Traffic signs" },
            type: "symbol",
            layout: {
                visibility: "none",
                "icon-overlap": "never",
                // Icon based on sprite defined below, with conditional rendering
                "icon-image": ["case",
                    // Many signs
                    ["in", ";", ["get", "osm|traffic_sign"]],
                    "pnx-tfsigns-fr:0_many",
                    // Single FR sign
                    ["==", ["slice", ["get", "osm|traffic_sign"], 0, 2], "FR"],
                    ["concat", "pnx-tfsigns-fr:", ["slice", ["get", "osm|traffic_sign"], 3]],
                    // Generic value
                    ["==", ["get", "osm|traffic_sign"], "yes"],
                    "pnx-tfsigns-fr:0_unknown",
                    // Fallbacks
                    ["has", "osm|traffic_sign"],
                    "pnx-tfsigns-fr:0_unknown",
                    ""
                ]
            }
        },

        // Required sprites, you can even define many if necessary
        { "pnx-tfsigns-fr": "https://presets.panoramax.fr/sprites/trafficsigns_fr" }
    );
});