Skip to content

Instantly share code, notes, and snippets.

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
What would you like to do?
<link rel="stylesheet" href=""/>
<label for="latInput">Latitude</label>
<input id="latInput"/>
<label for="lngInput">Longitude</label>
<input id="lngInput"/>
<div id="map"></div>
<script src=""></script>
<script src=""></script>
function addMapPicker() {
var mapCenter = [22, 87];
var map ='map', {center : mapCenter, zoom : 3});
L.tileLayer('https://{s}{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, ' +
'<a href="">CC-BY-SA</a>, ' +
'Imagery © <a href="">Mapbox</a>',
id: '',
noWrap : true
var marker = L.marker(mapCenter).addTo(map);
var updateMarker = function(lat, lng) {
.setLatLng([lat, lng])
.bindPopup("Your location : " + marker.getLatLng().toString())
return false;
map.on('click', function(e) {
updateMarker(, e.latlng.lng);
var updateMarkerByInputs = function() {
return updateMarker( $('#latInput').val() , $('#lngInput').val());
$('#latInput').on('input', updateMarkerByInputs);
$('#lngInput').on('input', updateMarkerByInputs);
$(document).ready(function() {
input {
margin-bottom : 2px;
#map {
width : 600px;
height : 200px;
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