Geocoding addresses with Leaflet

Introduction to Leaflet

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Leaflet 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 leaflet-geocoder-mapzen plugin developed by Pelias under MIT license.

Example map for geocoding

Example Leaflet code v1.9.4

<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    rel="stylesheet"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin="" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.css"
    rel="stylesheet" />

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.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 options = {
        url: "https://api.strues-maps.lt/v1",
        params: {signature: SIG, size: "5"},
        attribution: '&copy; &a href="http://www.openstreetmap.org/copyright">'+
            'OpenStreetMap&/a>'
    };
    L.control.geocoder(API_KEY, options).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.