Stores Nearby Geolocation
Sample code for Woosmap Map JavaScript API
author(s):
Woosmap
HTML
<!DOCTYPE html>
<html>
<head>
<title>Stores Nearby Geolocation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div
class="flex space-between"
style="
background: url("https://developers.woosmap.com/assets/images/woman-coffee.jpg")
no-repeat;
background-size: contain;
min-height: 250px;
"
>
<div style="text-align: right; padding: 1em">
<strong>Take a little Coffee Break</strong>
<div>
<div id="recommendation-placeholder">
<img
src="https://developers.woosmap.com/assets/images/loader.svg"
alt="loader"
/>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.flex {
display: flex;
flex-direction: column;
}
.space-between {
justify-content: space-between;
}
JavaScript
const woosmap_key = "YOUR_API_KEY";
let placeholder;
const radiusMeters = 50000;
function distance(dist) {
if (dist > 1000) {
return `${Math.round(dist / 100) / 10} km`;
}
return `${Math.round(dist)} m`;
}
function renderHTML(properties) {
let content = `<b>${properties.name}</b><br/>`;
if (properties.address.lines.hasOwnProperty.call(0)) {
content += `${properties.address.lines[0]}<br/>`;
}
content += `${properties.address.city}<br>`;
content += `at <b>${distance(properties.distance)}</b><br/>`;
return content;
}
function displayNearestStore(stores) {
if (stores && stores.features && stores.features.length > 0) {
const store = stores.features[0];
const properties = store.properties;
if (placeholder) {
placeholder.innerHTML = renderHTML(properties);
}
} else {
placeholder.innerHTML = "<p>No Stores returned... (insufficient accuracy)";
}
}
document.addEventListener("DOMContentLoaded", () => {
placeholder = document.getElementById("recommendation-placeholder");
fetchNearbyStores();
});
function fetchNearbyStores() {
fetch(
`https://api.woosmap.com/geolocation/stores/?key=${woosmap_key}&radius=${radiusMeters}`,
)
.then((result) => {
return result.json();
})
.then(({ stores }) => {
displayNearestStore(stores);
});
}