Drawing an arc from point A from point B with leaflet-search.
345 views
Skip to first unread message
Alex
Jul 25, 2022, 6:26:12 PM7/25/22
to Leaflet
Hey guys! I'm currently making a little project where you can plot flight paths by selecting the markers utilizing Stefano's leaflet-search.
.png?part=0.1&view=1)
I've added two search bars, one of which is meant for point A, and the other is meant for point B.
Since I'm learning Python, I know very little about JavaScript in general.
I do know about event listeners, however I do not know to what should I attach an event listener to, so that when I click on the option as shown in the image, it defines the coordinates of that marker as "Point A", and the same happening to Point B.
My second issue that I'm figuring out afterwards is how I'm going to plot an arc given two markers and its coordinates.
Can anyone give me some pointers on how to approach this?
Bodo Minea
Jul 25, 2022, 7:08:54 PM7/25/22
to leafl...@googlegroups.com
From stefanocudini's leaflet-search Github and Stack Overflow I found out you can attach to the locationfound event - https://stackoverflow.com/a/48653951 (look at the part starting with map.on('locationfound', function(ev){ ).
Get the coordinates or point object as part of that callback.
And for calculating and drawing the „flight like” arc, take a look at Leaflet.Geodesic - https://github.com/henrythasler/Leaflet.Geodesic
If you have trouble getting them to work together, post your current code and I'll take a shot at combining the functions you need.
--
---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/95b86b43-09d7-4f2a-876f-d538a5ee0192n%40googlegroups.com.
Cu stimă,
Minea Claudiu Bogdan
Alex
Jul 25, 2022, 8:12:41 PM7/25/22
to Leaflet
I feel like I'm getting closer as I'm trying what I'm learning, but so far still no luck.
I know what to do but since I'm a complete beginner at JavaScript, I'm not familiar with how you write code (something I want to start doing very soon ^^ )
Here's the code as I left it before I started toying with it to see what sticks. Apologies in advance for the sloppy coding as it's currently out of my depth.
I'm almost certain that to generate an arc with Geodesic, I need an event listener tied to it.
<head>
<title>Flight Paths</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lea...@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<link rel="stylesheet" href="leaflet-search.css">
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
</head>
<script src="https://unpkg.com/lea...@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<script src="leaflet-search.js"></script>
<script>
//sample data values for populate map
var data = [
{"loc":[38.769620,-9.12684], "title":"LIS"},
{"loc":[41.240514,-8.65780], "title":"OPO"},
{"loc":[38.088848,-7.92474], "title":"BYJ"},
{"loc":[32.693507,-16.77470], "title":"FNC"},
{"loc":[37.749533,-25.71061], "title":"PDL"},
{"loc":[40.501764,-3.55614], "title":"MAD"},
{"loc":[39.551715,2.73618], "title":"PMI"},
{"loc":[37.419979,-5.89304], "title":"SVQ"},
{"loc":[41.296913,2.08357], "title":"BCN"},
{"loc":[36.677110,-4.49223], "title":"AGP"},
{"loc":[38.282222,-0.55806], "title":"ALC"},
{"loc":[27.931944,-15.38667], "title":"LPA"},
{"loc":[43.301111,-2.91056], "title":"BIO"},
{"loc":[28.452778,-13.86389], "title":"FUE"},
{"loc":[38.872778,1.37583], "title":"IBZ"},
{"loc":[28.945556,-13.60528], "title":"ACE"},
{"loc":[28.482778,-16.34167], "title":"TFN"},
{"loc":[28.044444,-16.57250], "title":"TFS"},
{"loc":[39.489444,-0.48167], "title":"VLC"},
{"loc":[41.666111,-1.04167], "title":"ZAZ"},
{"loc":[43.301944,-8.37722], "title":"LCG"},
{"loc":[36.843889,-2.37000], "title":"LEI"},
{"loc":[43.563611,-6.03472], "title":"OVD"},
{"loc":[41.900833,2.76056], "title":"GRO"},
{"loc":[37.188611,-3.77722], "title":"GRX"},
{"loc":[36.744722,-6.06000], "title":"XRY"},
{"loc":[41.706111,-4.85194], "title":"VLL"},
{"loc":[28.626389,-17.75556], "title":"SPC"},
{"loc":[39.862500,4.21861], "title":"MAH"},
{"loc":[37.802583,-1.12539], "title":"RMU"},
{"loc":[41.147500,1.16722], "title":"REU"},
{"loc":[43.426944,-3.82000], "title":"SDR"},
{"loc":[42.896389,-8.41528], "title":"SCQ"},
{"loc":[37.014444,-7.96583], "title":"FAO"},
{"loc":[33.070833,-16.34972], "title":"PXO"},
{"loc":[38.761944,-27.09083], "title":"TER"},
];
</script>
<div id="map"></div>
<style>
#map { height: 1080px; }
</style>
<title>Flight Paths</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lea...@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<link rel="stylesheet" href="leaflet-search.css">
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
</head>
<script src="https://unpkg.com/lea...@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<script src="leaflet-search.js"></script>
<script>
//sample data values for populate map
var data = [
{"loc":[38.769620,-9.12684], "title":"LIS"},
{"loc":[41.240514,-8.65780], "title":"OPO"},
{"loc":[38.088848,-7.92474], "title":"BYJ"},
{"loc":[32.693507,-16.77470], "title":"FNC"},
{"loc":[37.749533,-25.71061], "title":"PDL"},
{"loc":[40.501764,-3.55614], "title":"MAD"},
{"loc":[39.551715,2.73618], "title":"PMI"},
{"loc":[37.419979,-5.89304], "title":"SVQ"},
{"loc":[41.296913,2.08357], "title":"BCN"},
{"loc":[36.677110,-4.49223], "title":"AGP"},
{"loc":[38.282222,-0.55806], "title":"ALC"},
{"loc":[27.931944,-15.38667], "title":"LPA"},
{"loc":[43.301111,-2.91056], "title":"BIO"},
{"loc":[28.452778,-13.86389], "title":"FUE"},
{"loc":[38.872778,1.37583], "title":"IBZ"},
{"loc":[28.945556,-13.60528], "title":"ACE"},
{"loc":[28.482778,-16.34167], "title":"TFN"},
{"loc":[28.044444,-16.57250], "title":"TFS"},
{"loc":[39.489444,-0.48167], "title":"VLC"},
{"loc":[41.666111,-1.04167], "title":"ZAZ"},
{"loc":[43.301944,-8.37722], "title":"LCG"},
{"loc":[36.843889,-2.37000], "title":"LEI"},
{"loc":[43.563611,-6.03472], "title":"OVD"},
{"loc":[41.900833,2.76056], "title":"GRO"},
{"loc":[37.188611,-3.77722], "title":"GRX"},
{"loc":[36.744722,-6.06000], "title":"XRY"},
{"loc":[41.706111,-4.85194], "title":"VLL"},
{"loc":[28.626389,-17.75556], "title":"SPC"},
{"loc":[39.862500,4.21861], "title":"MAH"},
{"loc":[37.802583,-1.12539], "title":"RMU"},
{"loc":[41.147500,1.16722], "title":"REU"},
{"loc":[43.426944,-3.82000], "title":"SDR"},
{"loc":[42.896389,-8.41528], "title":"SCQ"},
{"loc":[37.014444,-7.96583], "title":"FAO"},
{"loc":[33.070833,-16.34972], "title":"PXO"},
{"loc":[38.761944,-27.09083], "title":"TER"},
];
</script>
<div id="map"></div>
<style>
#map { height: 1080px; }
</style>
<script>
var map = L.map('map').setView([38.769620, -9.12684], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
var markersLayer = new L.LayerGroup(); //layer contain searched elements
map.addLayer(markersLayer);
var controlSearch = new L.Control.Search({
position:'topleft',
layer: markersLayer,
initial: false,
zoom: 12,
marker: false
});
var controlSearch2 = new L.Control.Search({
position:'topleft',
layer: markersLayer,
initial: false,
zoom: 12,
marker: false
});
map.addControl( controlSearch );
map.addControl( controlSearch2 );
////////////populate map with markers from sample data
for(i in data) {
var title = data[i].title, //value searched
loc = data[i].loc, //position found
marker = new L.Marker(new L.latLng(loc), {title: title} );//se property searched
marker.bindPopup(title);
markersLayer.addLayer(marker);
}
var PointA;
map.on('locationfound', function(ev){
if (!marker) {
marker = L.marker(ev.latlng);
} else {
marker.setLatLng(ev.latlng);
}
})
var PointB;
map.on('locationfound', function(ev) {
if (!marker) {
marker = L.marker(ev.latlng);
} else {
marker.setLatLng(ev.latlng)
}
})
var pointList = [PointA, PointB];
const geodesicLine = L.geodesic().addTo(map);
const geodesic = new L.Geodesic([PointA, PointB]).addTo(map)
</script>
var map = L.map('map').setView([38.769620, -9.12684], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
var markersLayer = new L.LayerGroup(); //layer contain searched elements
map.addLayer(markersLayer);
var controlSearch = new L.Control.Search({
position:'topleft',
layer: markersLayer,
initial: false,
zoom: 12,
marker: false
});
var controlSearch2 = new L.Control.Search({
position:'topleft',
layer: markersLayer,
initial: false,
zoom: 12,
marker: false
});
map.addControl( controlSearch );
map.addControl( controlSearch2 );
////////////populate map with markers from sample data
for(i in data) {
var title = data[i].title, //value searched
loc = data[i].loc, //position found
marker = new L.Marker(new L.latLng(loc), {title: title} );//se property searched
marker.bindPopup(title);
markersLayer.addLayer(marker);
}
var PointA;
map.on('locationfound', function(ev){
if (!marker) {
marker = L.marker(ev.latlng);
} else {
marker.setLatLng(ev.latlng);
}
})
var PointB;
map.on('locationfound', function(ev) {
if (!marker) {
marker = L.marker(ev.latlng);
} else {
marker.setLatLng(ev.latlng)
}
})
var pointList = [PointA, PointB];
const geodesicLine = L.geodesic().addTo(map);
const geodesic = new L.Geodesic([PointA, PointB]).addTo(map)
</script>
Thank you so much for your help so far :)
Mark Lawton
Jul 26, 2022, 12:14:19 AM7/26/22
to leafl...@googlegroups.com
if you want the actual trajectory of the flight, that is more difficult because they don’t follow a single curve
if you want a general idea, you can just draw a great circle between the two points.
you can also use a leaflet plug in called swoopy to draw some nice arcs
On Jul 25, 2022, at 3:26 PM, Alex <alex...@gmail.com> wrote:
Hey guys! I'm currently making a little project where you can plot flight paths by selecting the markers utilizing Stefano's leaflet-search.
<unknown (1).png>
I've added two search bars, one of which is meant for point A, and the other is meant for point B.Since I'm learning Python, I know very little about JavaScript in general.I do know about event listeners, however I do not know to what should I attach an event listener to, so that when I click on the option as shown in the image, it defines the coordinates of that marker as "Point A", and the same happening to Point B.My second issue that I'm figuring out afterwards is how I'm going to plot an arc given two markers and its coordinates.Can anyone give me some pointers on how to approach this?
--
---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/95b86b43-09d7-4f2a-876f-d538a5ee0192n%40googlegroups.com.
<unknown (1).png>
Reply all
Reply to author
Forward
0 new messages