Skip to content

Instantly share code, notes, and snippets.

@LouisaKB

LouisaKB/Reverse geocoding - full code 2

Created August 23, 2018 12:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LouisaKB/447d2664872dbe129673ec8fb6f59f60 to your computer and use it in GitHub Desktop.
Save LouisaKB/447d2664872dbe129673ec8fb6f59f60 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Reverse geocoding - full code 2
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.3.0/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.3.0/leaflet.js"></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>"
};
function sendGeocodingRequest(locationCoordinates) {
var request = {
lat: locationCoordinates.lat,
lng: locationCoordinates.lng
};
$.ajax({
url : "http://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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment