Using a custom Places search service with the Searchbar
This example demonstrates the use of a custom Places search service with the Searchbar.
Try performing an 'Around Me' search from the 'Find' menu to view all available Places results.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/wrld.js@1.x.x"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
<link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/v1/latest/css/wrld.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/searchbar/v1/latest/searchbar.js"></script>
<script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/marker_controller/v1/latest/marker_controller.js"></script>
</head>
<body>
<div style="position: relative">
<div id="widget-container" class="wrld-widget-container"></div>
<div id="map" style="height: 400px"></div>
<script>
var map = Wrld.map("map", "your_api_key_here", {
center: [37.794, -122.41],
zoom: 15
});
var tags = [
{name: "Around Me", searchTag: "", iconKey: "aroundme"},
{name: "Accommodation", searchTag: "accommodation", iconKey: "accommodation"},
{name: "Burgers", searchTag: "burgers", iconKey: "burgers"},
{name: "Food & Drink", searchTag: "food_drink", iconKey: "food_drink"},
{name: "Hotel", searchTag: "hotel", iconKey: "hotel"},
{name: "Tourism", searchTag: "tourist_info", iconKey: "tourist_info"},
{name: "Wine", searchTag: "wine", iconKey: "wine"}
];
var places = [
{title: "Transamerica Pyramid", location: { latLng: Wrld.latLng(37.7952, -122.4028) , elevation: 260 }, tags: ["tourist_info"], iconKey: "tourist_info"},
{title: "A Place to Stay", location: { latLng: Wrld.latLng(37.7918, -122.401) }, tags: ["accommodation"], iconKey: "accommodation"},
{title: "A Grand Hotel", location: { latLng: Wrld.latLng(37.7928, -122.402) }, tags: ["hotel", "accommodation"], iconKey: "hotel"},
{title: "Wine & Dine", subtitle: "California St, San Francisco", location: { latLng: Wrld.latLng(37.7922, -122.406) }, tags: ["wine", "food_drink"], iconKey: "wine"},
{title: "San Fran Burgers", subtitle: "Powell St, San Francisco", location: { latLng: Wrld.latLng(37.7905, -122.409) }, tags: ["burgers", "food_drink"], iconKey: "burgers"}
];
var sort = function(arrayToSort) {
return arrayToSort.sort(function(lhs, rhs) {
if (lhs.pos === rhs.pos) {
if (!("distSqr" in lhs)) return 0;
return lhs.distSqr - rhs.distSqr;
}
return lhs.pos - rhs.pos;
});
};
var calculateDistSqr = function(latLng1, latLng2) {
return Math.pow(latLng1.lat - latLng2.lat, 2) + Math.pow(latLng1.lng - latLng2.lng, 2);
};
var placesSearchService = {
fetchAllNearbyPlaces: function(latLng, callback) {
var results = places.map(function(place, index) {
return Object.assign({}, place, {
sourceId: index,
distSqr: calculateDistSqr(latLng, place.location.latLng)
});
});
callback(sort(results));
},
fetchNearbyPlacesByTerm: function(latLng, term, callback) {
term = term.trim().toLowerCase();
var results = [];
if (term.length > 0) {
places.forEach(function(place, index) {
var termPos = place.title.toLowerCase().indexOf(term);
if (termPos !== -1) {
results.push(Object.assign({}, place, {
sourceId: index,
pos: termPos,
distSqr: calculateDistSqr(latLng, place.location.latLng)
}));
}
});
}
callback(sort(results));
},
fetchNearbyPlacesByTag: function(latLng, tag, callback) {
var results = [];
places.forEach(function(place, index) {
var tagPos = place.tags.indexOf(tag);
if (tagPos !== -1) {
results.push(Object.assign({}, place, {
sourceId: index,
pos: tagPos,
distSqr: calculateDistSqr(latLng, place.location.latLng)
}));
}
});
callback(sort(results));
},
fetchAutocompleteOptions: function(latLng, term, callback) {
term = term.trim().toLowerCase();
var options = [];
if (term.length > 0) {
places.forEach(function(place, index) {
var termPos = place.title.toLowerCase().indexOf(term);
if (termPos !== -1) {
options.push(Object.assign({}, place, {
pos: termPos,
distSqr: calculateDistSqr(latLng, place.location.latLng)
}));
}
});
}
callback(sort(options));
},
fetchTagOptions: function(term, callback) {
term = term.trim().toLowerCase();
var options = [];
if (term.length > 0) {
tags.forEach(function(tag, index) {
var termPos = tag.name.toLowerCase().indexOf(term);
if (termPos !== -1) {
options.push(Object.assign({}, tag, {pos: termPos}));
}
});
}
callback(sort(options));
}
};
var searchbarConfig = {
outdoorSearchMenuItems: tags,
placesSearchService: placesSearchService
};
var searchbar = new WrldSearchbar("widget-container", map, searchbarConfig);
new WrldMarkerController(map, { searchbar: searchbar });
</script>
</div>
</body>
</html>