Skip to content

Instantly share code, notes, and snippets.

@answerquest

answerquest/leaflet-center-location-picker.html

Created June 10, 2022 04:56
Show Gist options
  • Save answerquest/aa134d51a7ce2292fee80b7cc503d048 to your computer and use it in GitHub Desktop.
Save answerquest/aa134d51a7ce2292fee80b7cc503d048 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet map location picker POC with fixed center - better for mobile browsers than drag-drop
Raw
leaflet-center-location-picker.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
<title>Leaflet location picker</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
#map {
position: absolute;
bottom: 0;
top: 0;
width: 100%;
}
#title_container {
z-index: 1000;
position: fixed;
background-color: rgba(255,255,255,0.7);
color: black;
padding: 5px;
width: 200px;
bottom: 0;
left:40%;
/*bottom: 10px;*/
margin: auto;
}
#title_container a:link, #title_container a:visited {
color: white;
}
.centered {
z-index: 1000;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
font-size: 50px;
color: black;
text-shadow: 1px 0 0;
}
</style>
</head>
<body>
<div id="title_container">
<small><p>Location: <span id="location">10.857721,76.270475</span>
</p>
</small>
<p align="center">Move the map to your location</p>
</div>
<div class="centered">+</div>
<div id='map'></div>
<script>
// ************************
// INITIAL
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
var baseLayers = {
"OpenStreetMap": OpenStreetMap_Mapnik
};
var map = L.map('map', {layers: [OpenStreetMap_Mapnik]}).setView([10.857721,76.270475], 10);
var overlays = { };
var layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map);
function onMapClick(e) {
map.panTo(e.latlng);
}
map.on('click', onMapClick);
map.on("move", function () {
var x = map.getCenter();
var lat = Math.floor(x.lat * 10000) / 10000 ;
var lng = Math.floor(x.lng * 10000) / 10000 ;
// Here! export these lat and lng variables to your field etc.
document.getElementById('location').innerHTML = lat + ',' + lng;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment