Skip to content

Instantly share code, notes, and snippets.

@juaoose

juaoose/mapbox-address.html

Last active June 13, 2021 22:52
Show Gist options
  • Save juaoose/d0c21967aaf9d80e179194ed0e18ed33 to your computer and use it in GitHub Desktop.
Save juaoose/d0c21967aaf9d80e179194ed0e18ed33 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mapbox-address.html
<!DOCTYPE html>
<html>
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<script src="https://unpkg.com/@rtirl/api@latest/lib/index.min.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div id="address"></div>
<script>
var mapboxClient = mapboxSdk({
accessToken:
"pk.eyJ1Ijoia2V2bW8zMTQiLCJhIjoiY2oyMDFlMGpsMDN3bTJ4bjR1MzRrbDFleCJ9.7XEB3HHBGr-N6ataUZh_6g",
});
var i = 0;
var params = new URLSearchParams(window.location.search);
const pullKey = new URLSearchParams(window.location.search).get("key");
RealtimeIRL.forPullKey(pullKey).addLocationListener(function (location) {
if (i++ % 50 == 0) {
mapboxClient.geocoding
.reverseGeocode({
query: [location.longitude, location.latitude],
language: [params.get("lang") || "en"],
})
.send()
.then((response) => {
var address = response.body.features.find((feature) =>
feature.place_type.includes("address")
)
if(address) {
document.getElementById("address").innerHTML = address.text;
}
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment