solution without additional plugins. only Leaflet and pure JavaScript. dragging the marker or entering an address gives you coordinates. if you have problems with the nominatim request just change https to http. demo here : http://yellowthailand.com/leafletgeo.html
<html>
<head>
<title>Leaflet Address Lookup and Coordinates</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style type="text/css">
html, body { width:100%;padding:0;margin:0; }
.container { width:95%;max-width:980px;padding:1% 2%;margin:0 auto }
#lat, #lon { text-align:right }
#map { width:100%;height:50%;padding:0;margin:0; }
.address { cursor:pointer }
.address:hover { color:#AA0000;text-decoration:underline }
</style>
</head>
<body>
<div class="container">
<b>Coordinates</b>
<form>
<input type="text" name="lat" id="lat" size=12 value="">
<input type="text" name="lon" id="lon" size=12 value="">
</form>
<b>Address Lookup</b>
<div id="search">
<input type="text" name="addr" value="" id="addr" size="58" />
<button type="button" onclick="addr_search();">Search</button>
<div id="results"></div>
</div>
<br />
<div id="map"></div>
</div>
<script type="text/javascript">
// New York
var startlat = 40.75637123;
var startlon = -73.98545321;
var options = {
center: [startlat, startlon],
zoom: 9
}
document.getElementById('lat').value = startlat;
document.getElementById('lon').value = startlon;
var map = L.map('map', options);
var nzoom = 12;
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: 'OSM'}).addTo(map);
var myMarker = L.marker([startlat, startlon], {title: "Coordinates", alt: "Coordinates", draggable: true}).addTo(map).on('dragend', function() {
var lat = myMarker.getLatLng().lat.toFixed(8);
var lon = myMarker.getLatLng().lng.toFixed(8);
var czoom = map.getZoom();
if(czoom < 18) { nzoom = czoom + 2; }
if(nzoom > 18) { nzoom = 18; }
if(czoom != 18) { map.setView([lat,lon], nzoom); } else { map.setView([lat,lon]); }
document.getElementById('lat').value = lat;
document.getElementById('lon').value = lon;
myMarker.bindPopup("Lat " + lat + "<br />Lon " + lon).openPopup();
});
function chooseAddr(lat1, lng1)
{
myMarker.closePopup();
map.setView([lat1, lng1],18);
myMarker.setLatLng([lat1, lng1]);
lat = lat1.toFixed(8);
lon = lng1.toFixed(8);
document.getElementById('lat').value = lat;
document.getElementById('lon').value = lon;
myMarker.bindPopup("Lat " + lat + "<br />Lon " + lon).openPopup();
}
function myFunction(arr)
{
var out = "<br />";
var i;
if(arr.length > 0)
{
for(i = 0; i < arr.length; i++)
{
out += "<div class='address' title='Show Location and Coordinates' onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ");return false;'>" + arr[i].display_name + "</div>";
}
document.getElementById('results').innerHTML = out;
}
else
{
document.getElementById('results').innerHTML = "Sorry, no results...";
}
}
function addr_search()
{
var inp = document.getElementById("addr");
var xmlhttp = new XMLHttpRequest();
var url = "https://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + inp.value;
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</body>
</html>There is a great geocoder already developed for Leaflet.
https://github.com/smeijer/L.GeoSearch
You can use the results easily like
map.on('geosearch_showlocation', function (result) {
L.marker([result.x, result.y]).addTo(map)
});
One more solution without using any plugins. I am reading the data from the Mongo DB and then use Javascript, Angular(not necessaril ) and Leaflet libraries to draw the marker for the coordinates that we get from the Mongo DB.
HTML
Just displaying the leaflet div and the onclick event where we pass the date and email of a user. This information will be passed to the MongoDB to fetch the set of latitudes and longitudes of the user for the given time frame
<div class="map" leaflet [leafletOptions]="historicalOptions">
<div *ngFor="let l of historicalLayers" [leafletLayer]="l"></div>
</div>
<div class="col-lg-3 d-flex justify-content-center align-items-center">
<button type="button" (click)="getHistoricalData(onDate,fromTime,toTime,user.email)" class="btn btn-primary p-4">
Get Map
</button>
</div>
Code
ngOnInit() {
this.historicalOptions = {
layers: [
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '...' }),
this.heatmapLayer
],
center: latLng(xxxxxxx, xxxxxxx),
zoom: 16
};
}
public getHistoricalData(onDate: Date, fromTime: Date, toTime: Date, userEmail) {
this.historicalLayers = [];
this.apiService.getGPSLocations(fromDate.toISOString(), toDate.toISOString(), userEmail)
.subscribe(data => {
if (data && data.length) {
const markerLayers = this.drawMarkerPlotline(data, 'blue');
this.historicalLayers = markerLayers;
}
}
}
private drawMarkerPlotline(data, color) {
if (data) {
let rawData;
if (typeof data === 'string')
rawData = JSON.parse(data);
else
rawData = data;
const layers = [];
if (rawData.length) {
this.heatmapData.data = [];
rawData.forEach((point, index) => {
if (point && point.sensorValue && point.sensorValue.attr_lat && point.sensorValue.attr_lng) {
const markerLayer = marker([point.sensorValue.attr_lat, point.sensorValue.attr_lng], {
icon: icon({
iconSize: [15, 15],
iconAnchor: [7, 7],
iconUrl: this.getIconPath(color)
}),
title: new Date(point.observationTimestamp).toLocaleString(),
});
markerLayer.userId = point.userAccount.userId;
layers.push(markerLayer);
this.heatmapData.data.push({
lat: point.sensorValue.attr_lat,
lng: point.sensorValue.attr_lng,
// count: 1
});
}
});
this.heatmapLayer.setData(this.heatmapData);
return [layerGroup(layers)];
}
}
return null;
}
private getIconPath(color) {
let icon: string;
switch (color) {
case 'green':
icon = 'assets/green-circle.png'
break;
case 'orange':
icon = 'assets/orange-circle.png'
break;
default:
icon = 'assets/blue-circle.png'
break;
}
return icon;
}
Note
Code snippets are directly taken from my sample application. Hence make changes wherever required in order to suit your requirements.
