Displaying interactive maps with MapLibre

Introduction to MapLibre

MapLibre is an open-source TypeScript library for publishing maps on your website. MapLibre also support XYZ raster tiles that strues-maps.lt can provide. We recommend using EPSG:3857 projection for strues-maps, and minimum-maximum zoom levels together with the maximum bounds to limit the number of tiles a visitor might request while browsing your map. Center view and maximum bounds are set using standard latitude and longitude degrees. Below you can see an example map of Baltic states and the JavaScript code used to render it. Also, strues-maps.lt indirectly uses OpenStreetMap data, which requires copyright attribution.

Example map of Baltic states

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.15.0/proj4.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 = [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
    });
</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.