Search Filtering
This sample demonstrates using an address filter to find a city, and a region priority to limit search results to only those specifically within a given region.
This sample demonstrates using an address filter to find a city, and a region priority to limit search results to only those specifically within a given region.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
}
@media (prefers-color-scheme: dark) {
body {
background-color: rgb(0, 0, 0);
}
}
#map {
width: 100dvw;
height: 100dvh;
}
</style>
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
crossorigin async
data-callback="initMapKit"
data-libraries="full-map,services"
data-token="IMPORTANT: ADD YOUR TOKEN HERE">
</script>
<script type="module">
// Wait for MapKit JS to be ready to use.
const setupMapKitJs = async() => {
// If MapKit JS is not yet loaded...
if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
// ...await <script>'s data-callback (window.initMapKit).
await new Promise(resolve => { window.initMapKit = resolve });
// Clean up.
delete window.initMapKit;
}
};
/**
* Script Entry Point
*/
const main = async() => {
await setupMapKitJs();
const addressFilter = mapkit.AddressFilter.including([
mapkit.AddressCategory.Locality
]);
const citySearch = new mapkit.Search({ addressFilter });
citySearch.search("Cupertino", showMap);
};
const showMap = (error, cities) => {
// Draw a map centered on the city.
const center = cities.places[0].coordinate;
const span = new mapkit.CoordinateSpan(0.02, 0.02);
const region = new mapkit.CoordinateRegion(center, span);
const map = new mapkit.Map("map", { region });
const searchSpan = new mapkit.CoordinateSpan(0.01, 0.01);
const searchRegion = new mapkit.CoordinateRegion(center, span);
// Draw an overlay (visually represent search bounds).
const minX = center.longitude - searchSpan.longitudeDelta;
const maxX = center.longitude + searchSpan.longitudeDelta;
const minY = center.latitude - searchSpan.latitudeDelta;
const maxY = center.latitude + searchSpan.latitudeDelta;
const points = [
new mapkit.Coordinate(minY, minX),
new mapkit.Coordinate(minY, maxX),
new mapkit.Coordinate(maxY, maxX),
new mapkit.Coordinate(maxY, minX)
];
const style = new mapkit.Style({
lineWidth: 2,
strokeColor: "#FF0000",
fillColor: null
});
map.addOverlay(new mapkit.PolygonOverlay(points, { style }));
// Search for coffee in `searchRegion`.
const coffeeSearch = new mapkit.Search({
region: searchRegion,
regionPriority: mapkit.Search.RegionPriority.Required
});
coffeeSearch.search("coffee", (error, results) => {
for (const place of results.places) {
const marker = new mapkit.PlaceAnnotation(place);
map.addAnnotation(marker);
}
});
};
main();
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>