Skip to content

Instantly share code, notes, and snippets.

@TravelTime-Frontend

TravelTime-Frontend/reverse_geocoding-full-code.html

Last active February 21, 2023 08:23
Show Gist options
  • Save TravelTime-Frontend/167c6546312458d539390419643ba1a0 to your computer and use it in GitHub Desktop.
Save TravelTime-Frontend/167c6546312458d539390419643ba1a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
reverse_geocoding-full-code.html
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="map" style="height: 100%;"></div>
<script>
var locationCoordinates = {
lat: 43.722952,
lng: 10.396596999999929
};
var authHeaders = {
"X-Application-Id": "<your app id>",
"X-Api-Key": "<your app key>",
"Accept-Language": "en-US"
};
function sendGeocodingRequest(locationCoordinates) {
var request = {
lat: locationCoordinates.lat,
lng: locationCoordinates.lng
};
$.ajax({
url: "https://api.traveltimeapp.com/v4/geocoding/reverse",
type: "get",
headers: authHeaders,
data: request,
contentType: "application/json; charset=UTF-8",
success: drawMarker
})
};
function drawMarker(response) {
var name = response.features[0].properties.name;
var latLng = L.latLng(locationCoordinates.lat, locationCoordinates.lng);
var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var osmTileLayer = L.tileLayer(osmUrl, { minZoom: 8, maxZoom: 17 });
var map = L.map("map").addLayer(osmTileLayer);
map.setView(latLng, 16);
var marker = L.marker(latLng);
marker.addTo(map);
marker.bindTooltip(name, { permanent: true });
};
sendGeocodingRequest(locationCoordinates);
</script>
<style>
html,
body,
#mapid {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#error {
position: absolute;
width: 80%;
margin: 0px;
z-index: 2000;
width: 270px;
border-radius: 5px;
max-width: 500px;
font-family: sans-serif;
font-size: 12px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 10px;
display: none;
text-align: center;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment