Search Bar Example

A demo for the Search API to add a search bar to a map.

Select Country

HTML Code

The below example uses the Search API, and some functions from the Slpy JS library, to power a search bar and fly to its results.

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">
		//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('form');
			this._container.id = 'api-search-form';
			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');

		//performs a request to the Search API, then uses Slpy JS - Markers and flyTo
		var markers = [];
		map.on('load', function() {

			var form = document.getElementById("api-search-form");
			form.addEventListener("submit", function(event) {
				event.preventDefault();
				if (!document.activeElement.matches("input")) {
					return;
				}

				var search = document.getElementById("api-search-input").value;

				var xhr = new XMLHttpRequest();
				xhr.open("POST", "https://api.slpy.com/v1/search?country=" + cntry + "&key=" + apiKey, true);
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4 && xhr.status === 200) {
						slpy.removeMarker(markers, 0);
						var obj = JSON.parse(xhr.responseText);
						if (obj.lat !== '') {
							slpy.removeMarker(markers, 0);
							markers = [{
								"name": "",
								"data": [obj.lat, obj.lon]
							}];
							slpy.addMarkers(markers, map);
							slpy.flyTo(obj, view);
						} else {
							alert("Location not found. Please check your spelling and try again.");
						}
					}
				};
				xhr.send("query=" + encodeURIComponent(search));
			});
		});

	</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