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 rounded-lg border-white"></div>

	<script type="text/javascript">
		//map settings
		var apiKey = 'your_api_key';
		var targetDivId = 'map';

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

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

		//add basic search bar input
		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');

		//demo function that generates three example locations.
		//This would be replaced with your own code for finding nearby locations
		var markers = [];
		function lookupLocations(returnInput, selectedItem) {
			var qual = selectedItem["quality"];
			var lat = parseFloat(selectedItem["lat"]);
			var lon = parseFloat(selectedItem["lon"]);
			var 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 (var 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: qual
				}, map);
			}
		}

		//initialize autocomplete on the search bar and use lookupLocations to process the selection
		var formAutocomplete = slpy.addAutocomplete("api-search-input", {
				apiKey: 'your_api_key',
				country: 'us',
				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