Building navigation controls with Leaflet

Introduction to Leaflet

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Leaflet 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 leaflet-control-geocoder plugin developed by Per Liedman under BSD-2-Clause license and leaflet-routing-machine plugin developed by Per Liedman under ISC license.

Example map for navigation

Example Leaflet code v1.9.4

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>

<div id='map' style='width:100%;height:512px;border:1px;'></div>                                  
<script type="text/javascript">                                
    var API_KEY = 'API_KEY';
    var SIG = 'SIG';
    
    var centerPoint = [56.57, 24.06];
    var leftBottom = [52.4849, 19.7225];
    var rightTop = [60.2197, 30.9395];

    var map = L.map(
        'map',
        {
            maxZoom: 9,
            minZoom: 7,
            maxBounds: L.latLngBounds(leftBottom, rightTop)
        }
    ).setView(centerPoint, 7);
    
    L.tileLayer('https://api.strues-maps.lt/v1/tms/{z}/{x}/{-y}.jpeg?api_key='+API_KEY+'&signature='+SIG, 
        {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }
    ).addTo(map);

    var geocoder = L.Control.Geocoder.pelias({
        serviceUrl: "https://api.strues-maps.lt/v1",
        apiKey: API_KEY,
        geocodingQueryParams: {signature: SIG, size: "5"},
        reverseQueryParams: {signature: SIG, size: "5"},
    });

    var router = new L.Routing.OSRMv1({
        serviceUrl: 'https://api.strues-maps.lt/v1',
        profile: 'route',
        requestParameters: { api_key: API_KEY, signature: SIG },
    });

    var control = L.Routing.control(
        {
            waypoints: [
                {latLng: L.latLng(54.670557, 25.281633), name: 'Vilniaus autobusų stotis'},
                {latLng: L.latLng(56.945039, 24.114171), name: 'Rīgas Starptautiskā autoosta'},
            ],
            geocoder: geocoder,
            router: router,
            routeWhileDragging: true,
            reverseWaypoints: true,
            showAlternatives: true,
            autocompleteOptions: {
                resultFn: async function (text, callback, context) { 
                    var response = await geocoder.geocode(text);
                    callback.call(context, response, text, context); 
                },
                autocompleteFn: async function (text, callback, context) {
                    var response = await geocoder.geocode(text);
                    callback.call(context, response, text, context);
                },
            },
            altLineOptions: {
                    styles: [
                            {color: 'black', opacity: 0.15, weight: 9},
                            {color: 'white', opacity: 0.8, weight: 6},
                            {color: 'blue', opacity: 0.5, weight: 2}
                    ]
            }
        }
    ).addTo(map);
    
    L.Routing.errorControl(control).addTo(map);
</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.