Variable label placement | UNL Map JS Docs

Use text-variable-anchor to allow high priority labels to shift position to stay on the map.

Note

If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Variable label placement</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script>
<link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" />
<link
href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
 
<script>
var places = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
description: "Ford's Theater",
icon: "theatre",
},
geometry: {
type: "Point",
coordinates: [-77.038659, 38.931567],
},
},
{
type: "Feature",
properties: {
description: "The Gaslight",
icon: "theatre",
},
geometry: {
type: "Point",
coordinates: [-77.003168, 38.894651],
},
},
{
type: "Feature",
properties: {
description: "Horrible Harry's",
icon: "bar",
},
geometry: {
type: "Point",
coordinates: [-77.090372, 38.881189],
},
},
{
type: "Feature",
properties: {
description: "Bike Party",
icon: "bicycle",
},
geometry: {
type: "Point",
coordinates: [-77.052477, 38.943951],
},
},
{
type: "Feature",
properties: {
description: "Rockabilly Rockstars",
icon: "music",
},
geometry: {
type: "Point",
coordinates: [-77.031706, 38.914581],
},
},
{
type: "Feature",
properties: {
description: "District Drum Tribe",
icon: "music",
},
geometry: {
type: "Point",
coordinates: [-77.020945, 38.878241],
},
},
{
type: "Feature",
properties: {
description: "Motown Memories",
icon: "music",
},
geometry: {
type: "Point",
coordinates: [-77.007481, 38.876516],
},
},
],
};
 
var map = new UnlSdk.Map({
container: "map",
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
center: [-77.04, 38.907],
zoom: 11.15,
});
 
map.on("load", function () {
// Add a GeoJSON source containing place coordinates and information.
map.addSource("places", {
type: "geojson",
data: places,
});
 
map.addLayer({
id: "poi-labels",
type: "symbol",
source: "places",
layout: {
"text-field": ["get", "description"],
"text-variable-anchor": ["top", "bottom", "left", "right"],
"text-radial-offset": 0.5,
"text-justify": "auto",
"icon-image": ["concat", ["get", "icon"], "-15"],
"text-font": ["Fira GO Regular"],
},
});
 
map.rotateTo(180, { duration: 10000 });
});
</script>
 
</body>
</html>