Skip to content

Instantly share code, notes, and snippets.

@zyzo
Last active July 15, 2019 11:09
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save zyzo/143e2d8ec67f7c316ae2 to your computer and use it in GitHub Desktop.
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
</head>
<body>
<label for="latInput">Latitude</label>
<input id="latInput"/>
<label for="lngInput">Longitude</label>
<input id="lngInput"/>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function addMapPicker() {
var mapCenter = [22, 87];
var map = L.map('map', {center : mapCenter, zoom : 3});
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i875mjb7',
noWrap : true
}).addTo(map);
var marker = L.marker(mapCenter).addTo(map);
var updateMarker = function(lat, lng) {
marker
.setLatLng([lat, lng])
.bindPopup("Your location : " + marker.getLatLng().toString())
.openPopup();
return false;
};
map.on('click', function(e) {
$('#latInput').val(e.latlng.lat);
$('#lngInput').val(e.latlng.lng);
updateMarker(e.latlng.lat, e.latlng.lng);
});
var updateMarkerByInputs = function() {
return updateMarker( $('#latInput').val() , $('#lngInput').val());
}
$('#latInput').on('input', updateMarkerByInputs);
$('#lngInput').on('input', updateMarkerByInputs);
}
$(document).ready(function() {
addMapPicker();
});
</script>
<style>
input {
margin-bottom : 2px;
}
#map {
width : 600px;
height : 200px;
}
</style>
<body>
</html>
@tuytoosh
Copy link

Thanks for your good job, but it is not working in my case, for all requests for images of map, it returns following response:

{
message: "Tileset does not exist"
}

I checked out your JSFilldle code but it is no longer works...

Have you any suggestion for me?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment