Building navigation controls with OpenLayers

Introduction to OpenLayers

OpenLayers is a Javascript library that allows you to put any map on the website. OpenLayers 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 openlayers-routing-machine plugin developed by Per Liedman under ISC license.

Example map for navigation

Example OpenLayers code v4.6.5

<link href="https://cdn.jsdelivr.net/npm/ol@v10.4.0/ol.css" rel="stylesheet" type="text/css">
<link href="https://www.liedman.net/openlayers-routing-machine/dist/openlayers-routing-machine.css" rel="stylesheet">
<script src="https://unpkg.com/openlayers@4.6.5/dist/ol-debug.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.15.0/proj4.js"></script>
<script src="https://www.liedman.net/openlayers-routing-machine/dist/openlayers-routing-machine.js"></script>

<div id='map' style='width:100%;height:512px;border:1px;'></div>       
<div id='mouse-position'></div>
<script type="text/javascript">
    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];

    var source = new ol.source.XYZ({
        url: 'https://api.strues-maps.lt/v1/tms/{z}/{x}/{-y}.jpeg?api_key='+API_KEY+
                '&signature='+SIG,
        attributions: '&#169; <a href="https://www.openstreetmap.org/copyright"'+
                ' target="_blank">OpenStreetMap</a> contributors.',
        attributionsCollapsible: false
    });
    
    var WGS84 = 'EPSG:4326';
    var EPSG3857 = 'EPSG:3857';
    var projection = new ol.proj.Projection({
        code: 'EPSG:3857',
        units: 'm',
        axisOrientation: 'neu'
    });
    
    centerPoint = proj4(WGS84, EPSG3857, centerPoint);
    leftBottom = proj4(WGS84, EPSG3857, leftBottom);
    rightTop = proj4(WGS84, EPSG3857, rightTop);

    var layer = new ol.layer.Tile({source: source});
    var maxExtent = [leftBottom[0], leftBottom[1], rightTop[0], rightTop[1]];
    var maxZoom = 9;
    var minZoom = 7;

    var view = new ol.View({
        center: centerPoint,
        zoom: 7,
        projection: projection,
        maxZoom: maxZoom, // Maximum zoom level
        minZoom: minZoom, // Minimum zoom level
        extent: maxExtent // Limit map to the specified extent
    });

    var map = new ol.Map({
        layers: [layer],
        target: 'map',
        view: view
    });

    var waypoints = [
        [25.281633, 54.670557],
        [24.114171, 56.945039]
    ];

    var control = new olrm.Control({
        map,
        waypoints,
        serviceUrl: 'https://api.strues-maps.lt/v1',
        profile: 'route',
        requestParameters: {api_key: API_KEY, signature: SIG},
    });

    map.addControl(control);
</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.