Skip to content

Variable label placement

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

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Variable label placement</title>
        <meta property="og:description" content="Use text-variable-anchor to allow high priority labels to shift position to stay on the map." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
        <script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            html,
            body,
            #map {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>

        <script>
            const places = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {
                            "description": "Sai Gon Grill Restaurant",
                            "icon": "restaurant"
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                106.699271,
                                10.776905
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {
                            "description": "Bach Tung Diep Park",
                            "icon": "park"
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                106.699072,
                                10.776388
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {
                            "description": "Duc Ba Church",
                            "icon": "church"
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                106.699164,
                                10.779592
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {
                            "description": "Bike Party",
                            "icon": "bicycle"
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                106.696013,
                                10.775508
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {
                            "description": "Opera Ho Chi Minh",
                            "icon": "music"
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [
                                106.70327,
                                10.776694
                            ]
                        }
                    }
                ]
            };

            const map = new trackasiagl.Map({
                container: 'map',
                style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',
                center: [106.696652, 10.777563],
                zoom: 13
            });

            map.on('load', () => {
                // 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'], '-11']
                    }
                });

                map.rotateTo(180, { duration: 10000 });
            });
        </script>

    </body>

</html>