Small library that turns an input field into a GPS picker using only Leaflet.
This project doesn't try to be exhaustive in providing a library that can be used everywhere. The goal is to provide a nice, easy to understand library boilerplate that you can modify to create a customized one for your own use.
Include Leaflet JS&CSS and the minified or unminfied version of osmpicker.js
<head>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet">
</head>
<body>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="osmpicker.js"></script>
</body>Create an input element with an id and call the lib on it:
<input type="text" id="location">
<script>
new OsmPicker({
selector: 'location',
defaultView: {
latLng: ['47.50737', '19.04611'],
zoom: 5,
}
});
</script>For greater flexibility you can pass an input element and an output element where the map should be rendered:
<input type="text" id="location">
<div id="location-map" style="height:300px;cursor:crosshair;"></div>
<script>
new OsmPicker({
inputElement: document.getElementById('location'),
mapElement: document.getElementById('location-map'),
defaultView: {
latLng: ['47.50737', '19.04611'],
zoom: 5,
}
});
</script>If the input has a GPS value in it, it will preselected that on the map:
<input type="text" id="location" value="47.486980809455176,19.046259276129007">Licensed under MIT