Geocoding addresses with OpenLayers

Introduction to OpenLayers

OpenLayers is a Javascript library that allows you to put any map on the website. OpenLayers 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 uses ol-geocoder plugin developed by Dominique92 under MIT license.

Example map of Baltic states

Example OpenLayers code v10.4.0

<link href="https://cdn.jsdelivr.net/npm/ol@v10.4.0/ol.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/ol-geocoder/dist/ol-geocoder.min.css" rel="stylesheet">
<link href="https://unpkg.com/ol-popup@5.0.0/src/ol-popup.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/ol@v10.4.0/dist/ol.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.15.0/proj4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-geocoder/dist/ol-geocoder.js"></script>
<script src="https://unpkg.com/ol-popup@5.0.0/dist/ol-popup.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.'
    });
    
    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
    });

    const popup = new ol.Overlay.Popup();

    const provider = StruesMapsSearch({api_key: API_KEY, signature: SIG, size: 5});

    const geocoder = new Geocoder('nominatim', {
        provider,
        targetType: 'text-input',
        lang: 'en',
        keepOpen: false,
        preventDefault: true,
    });
    
    map.addControl(geocoder);
    map.addOverlay(popup);

    geocoder.on('addresschosen', (evt) => {
        if (evt.bbox) {
            popup.show(evt.coordinate, evt.address.formatted);
            map.getView().fit(evt.bbox, {
                duration: 500
            });
        } else {
            popup.show(evt.coordinate, evt.address.formatted);
            map.getView().animate({
                zoom: 9,
                center: evt.coordinate
            });
        }
    });

    function StruesMapsSearch(options) {
        const {
            api_key,
            signature,
            size
        } = options;

        return {
            getParameters(opt) {
                return {
                    url: 'https://api.strues-maps.lt/v1/autocomplete',

                    params: {
                        text: opt.query,
                        api_key: api_key,
                        signature: signature,
                        size: size,
                    },
                };
            },

            handleResponse(results) {
                if (results && results.features && results.features.length !== 0) {
                    return results.features.map((feature) => {
                        return {
                            lon: feature.geometry.coordinates[0],
                            lat: feature.geometry.coordinates[1],

                            address: {
                                // Simply return a name in this case, could also return road,
                                // building, house_number, city, town, village, state,
                                // country
                                name: feature.properties.name,
                            },

                            bbox: feature.bbox,
                        };
                    });
                }

              return [];
            },
        };
    }
 </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.