Building navigation controls with MapLibre

Introduction to MapLibre

MapLibre is an open-source TypeScript library for publishing maps on your website. MapLibre also supports navigation controls that use API familiar to ones provided by strues-maps.lt. We recommend using API throttling configuration in user zone to prevent excesive flow of navigation requests. Below you can see an example map of Baltic states and the JavaScript navigation plugin in action. Also, strues-maps.lt indirectly uses OpenStreetMap data, which requires copyright attribution. Example uses MapLibre directions plugin developed by MapLibre organization under MIT license.

Example map for navigation

Example MapLibre code v5.2.0

<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.js'></script>
<div id='map' style='width:100%;height:512px;border:1px;z-index: 99;'></div> 

<script type="module">
    import MapLibreGlDirections from "https://unpkg.com/@maplibre/maplibre-gl-directions@0.8.0/dist/maplibre-gl-directions.js";

    var API_KEY = 'API_KEY';
    var SIG = 'SIG';
    
    var centerPoint = [24.06, 56.57];
    var leftBottom = [19.7225, 52.4849];
    var rightTop = [30.9395, 60.2197];

    const map = new maplibregl.Map({
        container: 'map', // container id
        style: {
            'version': 8,
            'sources': {
                'raster-tiles': {
                    'type': 'raster',
                    'tiles': [
                        'https://api.strues-maps.lt/v1/tms/{z}/{x}/{y}.jpeg?api_key='+API_KEY+'&signature='+SIG
                    ],
                    'tileSize': 256,
                    'scheme': 'tms',
                    'attribution':
                        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }
            },
            'layers': [
                {
                    'id': 'simple-tiles',
                    'type': 'raster',
                    'source': 'raster-tiles',
                }
            ],
        },
        maxBounds: [leftBottom, rightTop],
        center: centerPoint,    // starting position
        zoom: 6,                // starting zoom
        minZoom: 6,
        maxZoom: 9
    });
    
    map.on("load", function () {
        var directions = new MapLibreGlDirections(map, {
            api: "https://api.strues-maps.lt/v1",
            profile: "route",
            requestOptions: {api_key: API_KEY, signature: SIG},
        });

        directions.setWaypoints([
            [25.281633, 54.670557],
            [24.114171, 56.945039],
        ]);

        directions.interactive = true;
    });
</script>

API_KEY and SIG variables

In the example code above, two custom variables are used: API_KEY and SIG. In order to display interactive maps on your website, you must get a free API key. Depending on your map traffic some costs may incur.