Geocoding addresses with MapLibre

Introduction to MapLibre

MapLibre is an open-source TypeScript library for publishing maps on your website. MapLibre also supports geocoding 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 geocoding requests. Below you can see an example map of Baltic states and the JavaScript geocoder plugin in action. Also, strues-maps.lt indirectly uses OpenStreetMap data, which requires copyright attribution.

Example map of Baltic states

Example MapLibre code v5.2.0

<link href='https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.css' rel='stylesheet' />
<link href="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.5.0/dist/maplibre-gl-geocoder.css" rel="stylesheet" />
<script src='https://unpkg.com/maplibre-gl@5.2.0/dist/maplibre-gl.js'></script>
<script src="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.5.0/dist/maplibre-gl-geocoder.min.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 size = 5;
    
    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
    });
    
    const geocoderApi = {
        forwardGeocode: async (config) => {
            const features = [];
            try {
                const request = `https://api.strues-maps.lt/v1/autocomplete?text=${config.query}&api_key=${API_KEY}&signature=${SIG}&size=${size}`;
                const response = await fetch(request);
                const geojson = await response.json();
                for (const feature of geojson.features) {
                    const center = feature.geometry.coordinates;
                    const point = {
                        type: 'Feature',
                        geometry: {type: 'Point', coordinates: center},
                        place_name: feature.properties.name,
                        properties: feature.properties,
                        text: feature.properties.name,
                        place_type: ['place'],
                        center
                    };
                    features.push(point);
                }
            } catch (e) {
                console.error(`Failed to forwardGeocode with error: ${e}`);
            }

            return {features};
        }
    };
    map.addControl(new MaplibreGeocoder(geocoderApi, {maplibregl: maplibregl}));
</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.