Address Locator Example

A demo for Geocoding an Address and adding the points to a map.

HTML Code

The below example uses the Search API and some simple functions from the Slpy JS library to geocode addresses and add them to a map.

Also available from NPM with npm install slpy. See the Slpy JS Github for more info.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello World!</title>
    <!-- CSS -->
    <link href="https://api.slpy.com/lib/slpy/latest/slpy-style.css" rel="stylesheet">
	<link href="https://api.slpy.com/lib/mlgl/latest/maplibre-gl.css" rel="stylesheet" />

    <!-- JS -->
    <script src="https://api.slpy.com/lib/slpy/latest/slpy.js"></script>
    <script src='https://api.slpy.com/lib/mlgl/latest/maplibre-gl.js'></script>
</head>

<body>
    <!-- Example Styling for Map-->
    <style>
        .map {
            width: 100%;
            height: 500px;
        }
    </style>

    <div id="map" class="map"></div>

    <script type="text/javascript">
        //initialize our variables for your Api Key, the addresses, and the markers array.
        var apiKey = 'a44d8d571b6262af3dfda8599';

        var Addresses = [{
                'street': '4522 Fredericksburg Rd',
                'city': 'Balcones Heights',
                'region': 'TX',
                'postcode': '78201'
            },
            {
                'street': '746 NW Loop 410',
                'city': 'San Antonio',
                'region': 'TX',
                'postcode': '78216'
            },
            {
                'street': '1223 Austin Hwy',
                'city': 'San Antonio',
                'region': 'TX',
                'postcode': '78209'
            }
        ];
        var markers = [];

        //this function requests a geocode result for each address and adds the result to the markers array.
        //once completed it triggers the callback so we can initialize the map.
        //if you dont need older browser compatibilty, consider using Javascript's more modern fetch()
        function processAddresses(addresses, callback) {
            var completedRequests = 0;

            addresses.forEach(function(address, index) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        markers.push({
                            'name': index,
                            'data': [response.lat, response.lon, '<div><p>' + address.street + '</p></div>']
                        });

                        if (++completedRequests === addresses.length) {
                            callback();
                        }
                    }
                };
                xhr.open("GET", "https://api.slpy.com/v1/search?street=" + address.street + "&city=" + address.city + "&region=" + address.region + "&postcode=" + address.postcode + "&country=US&key=" + apiKey, true);
                xhr.send();
            });
        }

        processAddresses(Addresses, function() {

            var targetDivId = 'map';
           
            //here we use the Slpy JS function to automatically find the map center and recommended zoom level.
            var latlonzoom = slpy.quickMarkersCenter(markers);

            var latitude = latlonzoom[0];
            var longitude = latlonzoom[1];
            var startZoom = latlonzoom[2];

            //map code
            center = [longitude, latitude];
            const map = slpy.maplibreMap({
							apiKey: apiKey,
							container: targetDivId,
							center: center,
							zoom: startZoom
						});

            //run the Slpy JS function to add the results to the map.
            slpy.addMarkers(markers, map);

        });
    </script>
</body>
</html>

Geocoding Reference

Visit the Search and Geocoding Documentation for more information about settings and features.

Next Steps

Enhance your search with Maps or Autocomplete

Search & Geocoding

Add a search bar to your map.
Translate addresses to coordinates
Search for points of interest.

Maps

Display your location
Provide context to an address
Add popups for more information