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 to convert some known addresses to latitude and longitude coordinates for display on the 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">
		//First, customize settings and set variables
		const apiKey = 'your_api_key';
		const cntry = 'global';  //change to target country for better matching

		const 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'
			}
		];
		let markers = [];

		//Next we create a function that uses the Search API to lookup our addresses and return their coordinates.
		//The results are pushed/added to the makers array for display on the map.
		//When done, it runs the callback function to create the map with the new markers
		async function processAddresses(addresses, callback) {
			let completedRequests = 0;

			const fetchAddress = async (address, index) => {
				const response = await fetch(`https://api.slpy.com/v1/search?street=${address.street}&city=${address.city}®ion=${address.region}&postcode=${address.postcode}&country=${cntry}&key=${apiKey}`);
				if (response.ok) {
					const data = await response.json();
					markers.push({
						'name': index,
						'data': [data.lat, data.lon, `<div><p>${address.street}</p></div>`]
					});
				}
				if (++completedRequests === addresses.length) {
					callback();
				}
			};

			for (const [index, address] of addresses.entries()) {
				fetchAddress(address, index);
			}
		}

		//Lastly we run our above function with the callback for createing the map.
		processAddresses(Addresses, function() {

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

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

			//map code
			const 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