Can a curved line be drawn between two adjacent points in Leaflet? For example, using the following coordinates:
point_1 = (23.634501, -102.552783)
point_2 = (17.987557, -92.929147)
Appreciate any help.
Can a curved line be drawn between two adjacent points in Leaflet? For example, using the following coordinates:
point_1 = (23.634501, -102.552783)
point_2 = (17.987557, -92.929147)
Appreciate any help.
By following @Wrokar's suggestion, you can utilize the functionality of the Leaflet.curve library to achieve this. Simply replace your coordinates with those specified in variables latlng1 & latlng2 by referring to this gist.
var latlng1 = [LATITUDE, LONGTITUDE],
latlng2 = [LATITUDE, LONGTITUDE];
An example showcasing the implementation:
var map = L.map('mapid').setView([51.505, -10], 1);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var latlngs = [];
var latlng1 = [23.634501, -102.552783],
latlng2 = [17.987557, -92.929147];
var offsetX = latlng2[1] - latlng1[1],
offsetY = latlng2[0] - latlng1[0];
var r = Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)),
theta = Math.atan2(offsetY, offsetX);
var thetaOffset = (3.14 / 10);
var r2 = (r / 2) / (Math.cos(thetaOffset)),
theta2 = theta + thetaOffset;
var midpointX = (r2 * Math.cos(theta2)) + latlng1[1],
midpointY = (r2 * Math.sin(theta2)) + latlng1[0];
var midpointLatLng = [midpointY, midpointX];
latlngs.push(latlng1, midpointLatLng, latlng2);
var pathOptions = {
color: 'red',
weight: 3
}
var curvedPath = L.curve(
[
'M', latlng1,
'Q', midpointLatLng,
latlng2
], pathOptions).addTo(map);body {
padding: 0px;
margin: 0px;
}
#mapid {
height: 300px;
}<link rel="stylesheet" type="text/css" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8c4cdc9cec4cddce899869b869b">[email protected]</a>/dist/leaflet.css">
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b272e2a2d272e3f0b7a65786578">[email protected]</a>/dist/leaflet.js"></script>
<script src="https://elfalem.github.io/Leaflet.curve/src/leaflet.curve.js"></script>
<div id="mapid"></div>I am encountering a compilation error while using "if" and "else-if". [Vue warn]: Failed to resolve directive: else-if Here is the code I am working with: var app = new Vue({ el:"#app", data:{ lab_status : 2 } }); <script src="https: ...
Recently, I created a React+Webpack project and noticed that it takes 60 seconds to build the initial bundle, and only 1 second to append incremental changes. Surprisingly, this is without even adding my application code yet! It seems that the node_modules ...
Is there a way to reorder multiple ul-lists on my website using JavaScript? An example of the lists may be as follows: $(document).ready(function() { var ul = $('ul.filelist'); for (let u = 0; u < ul.length; u++) { const element = ul[ ...
Typical manual bootstrapping examples often use the same pattern: angular.module('myApp', []); angular.bootstrap(document, ['myApp']); However, I only need Angular to trigger a popup using the ui-bootstrap module. The closest solutio ...
There is an alert that pops up on a website only on specific days of the year. My query is: How can I make the alert hidden if the date is not one of those special days? I attempted the code below, but it seems to just delay the alert based on certain con ...
Similar Question: Using socket.io standalone without node.js How to run socket.io (client side only) on apache server My website is hosted on a Linux server with shared hosting. Since I don't have the ability to install node.js, I am looking ...
Currently, I am in the process of developing an app using angularjs. In my json data, I have timestamps and corresponding values like below: { "dps": { "1455719820": 0, "1455720150": 0, "1455720480": 0, "1455720810": 0, " ...
I am looking to create a unique loading page that conceals itself once all requests and static data have been loaded, including static images and libraries. How can I determine when all requests and static data have finished loading? I have attempted the ...
All browsers are working with the loop except for Internet Explorer, which does not seem to support forEach. Here is the JavaScript code: function validate() { var msg = ''; var i = 0; arr.forEach( function validateinfo(){ ...
My webpage contains a form with the following structure: <form action="/" method="post"> <select id="SelectedMonth" name="SelectedMonth"> <option>7/1/2017</option> <option>6/1/2017</option> </select> </form> ...
After referencing error handling methods from the prisma documentation, I encountered an issue with my code: try { prisma.daRevisionare.create({ data: { "idTweet": tweet.id, "testo": testotweet, url } }).then((dati) => { bo ...
Struggling to make the following code work in my ASP.NET demo application, looking for some guidance here. Check out the javascript code below: function checkUserName() { var request = createRequest(); if (request == null) { alert("Unable ...
For a while now, I have been using various SVGs from Inkscape and loading them into a specific container element with the .load method. Recently, I decided to switch things up and use AJAX's .get method instead, primarily because I wanted to prepend t ...
I am currently developing multiple NPM packages using TypeScript and I am exploring the most effective strategies for supporting various target architectures. When compiling to ES3, there is extensive support but it comes with additional boilerplate for c ...
I am currently working on a multipart form that includes 'Name', 'Email', and 'Phone Number' fields. It's important to note that the phone number field is actually composed of 10 individual single-digit fields. To enhan ...
While searching for the source code of express router, I came across this interesting piece: var debug = require('debug')('express:router:route'); I am curious to know more about this unusual way of passing arguments. Can someone ...
I have a nested JSON structure running on my local server, and I'm using React to practice displaying this nested data. Currently, I am focusing on showing the day and the available time slots for that day. I have managed to extract the "days" (mon, t ...
I've integrated Material-UI's <Table/> (http://www.material-ui.com/#/components/table) component with <TableRow/> containing checkboxes in a ReactJS project. While I can successfully select rows by checking the boxes, I am struggling ...
let $button = $('<input/>').attr({ type: 'button', value: data.styleData, id: buttonId, data - bind: event: { click: $parent.submitPopUp } }); An error is being displayed. ...
I've been on the hunt for a solution to this unique format challenge, but have hit a dead end so far. The issue at hand is that I'm dealing with a JSON format that doesn't play nicely with mongoDB. My goal is to convert the JSON data into a ...