# Add custom semantics overlays

You can take profit of [Panoramax Tags](https://docs.panoramax.fr/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:

```js
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:

```js
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" }
	);
});
```