Documentation

Store Locator Example

A demo for the add Autocomplete function to create a basic store locator.

Select Country

HTML Code

The below example uses the Slpy JS library to enable address autocomplete.

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

<!DOCTYPE html>
<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 and Search Bar -->
	<style>
		.map {
			width: 100%;
			height: 500px;
		}
		.api-search {
			width: 275px;
			box-shadow: 0 1px 1px rgba(50, 50, 93, 0.3), 0 1px 0 rgba(0, 0, 0, 0.1);
			border-radius: 0.25rem;
			border: 0px;
			margin: 10px 0 0 10px;
			background: #fff;
		}
		#api-search-input {
			width: calc(100% - 35px);
			padding: 10px;
			border-radius: 0.25rem;
			border: 0px;
			font-size: 14px;
			pointer-events: auto;
		}
		#api-search-input:focus {
			outline-width: 0;
			outline: none;
		}
	</style>

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

	<script type="text/javascript">
		//first, customize settings and initialize the map
		//map settings
		const apiKey = 'your_api_key';
		const targetDivId = 'map';
		const country = 'global'; //change to target country for better matching

		const latitude = '38.0'; //latitude of your map center
		const longitude = '-100.0'; //longitude of your map center
		const startZoom = '3';

		//initalize the map, and move default map controls to bottom-right
		const center = [longitude, latitude];
		const map = slpy.maplibreMap({
							apiKey: apiKey,
							container: targetDivId,
							center: center,
							zoom: startZoom,
							navControl: 'bottom-right'
						});

		//Second, lets add a basic search box using MapLibre's control class
		function searchBarControl() {}
		searchBarControl.prototype.onAdd = function(map) {
			this._map = map;
			this._container = document.createElement('div');
			this._container.classList.add('api-search');
			this._container.innerHTML = '<input placeholder="City or Postcode" id="api-search-input">';
			return this._container;
		};
		searchBarControl = new searchBarControl();
		map.addControl(searchBarControl, 'top-left');

		//Here is our function we create to handle the autocompleted user location.  
		//You will need to create your own function to lookup or add your nearby results based on the users selection.
		//in the example, we use the coordinates and level to flyto the area and place some markers.
		let markers = [];
		function lookupLocations(returnInput, selectedItem) {
			let level = selectedItem["level"];
			let lat = parseFloat(selectedItem["lat"]);
			let lon = parseFloat(selectedItem["lon"]);
			let examplePopup = `<div><span style="font-style:bold;font-size:1.5em">Department Store</span>
									<br>1234 Example St, Hometown, US
									<br><span style="color:green">Open</span> till 10pm</div>`;

			for (let i = 0; i < markers.length; i++) {
				slpy.removeMarker(markers, [i]);
			}
			markers = [{
					"name": "",
					"data": [lat, lon, examplePopup]
				},
				{
					"name": "",
					"data": [lat - 0.01, lon - 0.025, examplePopup]
				},
				{
					"name": "",
					"data": [lat - 0.015, lon + 0.02, examplePopup]
				}
			];
			slpy.addMarkers(markers, map);
			slpy.setMarkerOpen(markers, 0);

			if (slpy.mapState.maplibreLoaded) {
				slpy.flyTo({
					lat: lat,
					lon: lon,
					quality: level
				}, map);
			}
		}

		//Lastly we initialize autocomplete on the search bar and use the above funtion to process the selection
		const formAutocomplete = slpy.addAutocomplete("api-search-input", {
				apiKey: apiKey,
				country: country,
				autocompleteType: 'admin',
				filter: 'postcode,city'
			},
			lookupLocations);

	</script>
</body>
</html>

Autocomplete Reference

Visit the Autocomplete and Autofill 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