Skip to main content

README

#Set the labeling direction

Supports vertical text annotation.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Set label direction</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>
        let map = new mapmost.Map({
            container: 'map',  
            style: "<your style url>", 
            center: [120.71549790686834,31.32506315112795], 
            zoom: 15.707368891180728, 
            pitch: 59.48725112156901, 
            bearing: -54.10626584095007, 
            userId: '***', // Authorization code
        });

        map.on('load', function () {

            map.addSource('roadCross', {
                "type": "geojson",
                data: "../example_data/road_cross.geojson"
            })

            map.loadImage("./pin.png", function (err, image) {
                if (err) throw err;
                map.addImage('roadCross', image)
            })
            
            map.addLayer({
                "id": "roadCross",
                "type": 'symbol',
                "source": "roadCross",
                "layout": {
                    "text-field": "Test",
                    "text-writing-mode": ['vertical'], // Text is in vertical mode

                    // "text-rotate":90, // Rotate text 90deg
                    // "text-rotation-alignment": 'map', // Text rotation alignment default value auto map|viewport
                    // The top of the text is placed closest to the anchor point
                    // "text-anchor": "top",
                    
                    "text-offset": [2, 0], // When the offset array is all positive numbers, it means the lower right
                    "icon-image": 'roadCross',
                    "icon-size": 0.5,
                },
                "paint": {
                    'text-color': "#000000"
                }
            })
        })
    </script>
</body>
</html>