Skip to content

Instantly share code, notes, and snippets.

@zyzo

zyzo/map-picker-example.html

Last active July 15, 2019 11:09
Show Gist options
  • Save zyzo/143e2d8ec67f7c316ae2 to your computer and use it in GitHub Desktop.
Save zyzo/143e2d8ec67f7c316ae2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
map-picker-example.html
<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>
@hamidhaghdoost
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