slutske22 / leaflet-arrowheads Goto Github PK

I use leaflet-arrowheads in an Angular project. Angular builds are handled by webpack, which in turn uses the Terser library for compressing source files. Terser seems to have trouble with one particular bit of syntax in leaflet-arrowheads 1.4.0 (line 134 of leaflet-arrowheads.js):

if (offsets?.start || offsets?.end) {

I think the trouble is that Terser doesn't know how to handle the optional chaining operator "?."

This is the error I get from the Angular build:

Unexpected token: punc (.) [node_modules/leaflet-arrowheads/src/leaflet-arrowheads.js:134,0][scripts.5f6e7ccbb6980d219a8b.js:930,14]

I'm using Terser 5.7.2, but I also tested with 3.16

I imagine the problem is with Terser, but perhaps leaflet-arrowheads could avoid the "?." syntax too?

Hi,

first of all, thanks for your excellent work.

Secondly, I have a problem with your package when I want to use it with leaflet 1.6.0. in webpack built file. It works fine with the latest version of leaflet (1.7.1), but for lower versions (even 1.7.0) I get the error "leaflet__WEBPACK_IMPORTED_MODULE_0___default.a.polyline(...).arrowheads is not a function".

import * as L from 'leaflet';
import 'leaflet-arrowheads';

const polyline = L.polyline(latLng, options)
.arrowheads({ ... });

I am trying to use this library with leaflet-geoman. Leaflet geoman has an option allowEditing: false to disable editing for selected layers. It works in general, but for some reason it doesn't work for layers generated by arrowheads. I am not sure if this is good place to ask this question.

jsfiddle

L.PM.Utils.findLayers(map).forEach((layer) => {
   if (layer?._arrowheads){
  	const arrows = layer.getArrowheads()
        console.log({arrows})
  	arrows?.pm.setOptions({ allowEditing: false })
        arrows?.eachLayer(arrowLayer => {
    	   console.log({arrowLayer})
           arrowLayer?.pm.setOptions({ allowEditing: false })
        })
  }
})

Recently updated to Leaflet 1.9.1 and the L object does not have GeometryUtil, which this package relies on to work.
I could not find a way to get this working without just downgrading Leaflet.

Also do you plan to update this for React 17/18 ?

Hi everyone
i'm using leaflet.bezier with ngx-leaflet in my angular project and i want show truck icon instead plane icon from side view but when drawed curve line is like valley my truck has incorrect rotate

i can set frequency to "endonly" to get an arrowhead at the end of the line, pointing to the right. but, there doesn't seem to be an option like "startonly" to get an arrowhead at the start of the line? and what about pointing to the left instead of the right? i don't see anything like that in the examples or documentation.

Hello,

My code display a real-time GPS track on a map. Each time I receive a GPS position, I update the polyline. Sometimes, I observe that the previous arrow disappear when the new polyline is displayed.

Example :

Two GPS positions received =>

A new GPS position is received : the previous arrow disappears =>

My code is the following :

`map = L.map('map').setView([43.001359, 6.233636], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a', 'b', 'c'],
}).addTo(map);

polyline = new L.polyline([], {
        color:'red',
        weight: 2,
        opacity:0.8,
        smoothFactor: 1.0
});
polyline.arrowheads({yawn: 40, fill: true, size: '12px'}).addTo(map)`

...

`// called when a message arrives
function onMessageArrived(message) {
    console.log("onMessageArrived:"+message.payloadString);
    let messageElem = document.createElement('div');
    messageElem.textContent = message.payloadString;
    document.getElementById('messages').prepend(messageElem);
    obj = JSON.parse(message.payloadString);
    console.log(obj.lat, obj.lng);

    polyline.addLatLng([Number(obj.lat), Number(obj.lng)]);
    polyline.arrowheads({yawn: 40, fill: true, size: '12px'}).addTo(map);
}`

i do not want to run my program by npm,but i can not find the source of leaflet-arrowheads.

Are you compatible with CRS Simple?

My arrows on polylines look like this for some reason:
https://i.imgur.com/l8sYZk4.png

No arrows are present, just these long lines going down.

I am just invoking with .arrowheads(). No special options.

Lots of orphaned arrows, at the wrong size, are produced when a LayerGroup is removed and immediately re-added to the map.

Steps to reproduce:
(Leaflet 1.7.1)

layerGroup = new L.LayerGroup();
layerGroup.addTo(map);

marker = new L.Polyline(...).arrowheads(...);
marker.addTo(layerGroup);

Add several of these polylines to the layergroup. Remove them all with:

layerGroup.removeLayer(marker);

Then...

map.removeLayer(layerGroup);
layerGroup.addTo(map);

Hey hope you are still active on this, works pretty clean and easier to implement than other similar plugins.

Just wondering if you could add a way to draw the arrow a certain distance from the end of the polyline or vertices?

Many similar libraries have this, cause some developers customize their markers the polylines point to and those overlap the arrow unless you can offset it back a bit.

Maybe allow this if they only have allVertices or endOnly option enabled? Then they can give a endOffset option of a pixel number or percentage?

Error message:
Cannot read property 'forEach' of undefined

Steps to reproduce:
(Leaflet 1.7.1)

layerGroup = new L.LayerGroup();

marker = new L.Polyline(...).arrowheads(...);
marker.addTo(layerGroup);

Works fine if the layerGroup is currently added to the map, fails if it's currently not added, e.g. because the overlay is not selected in the layer chooser.

For Leaflet plugins its common to define AMD, CommonJS and ESM exports.
It just needs this wrapper around the Code:

(function (factory, window) {
    /*globals define, module, require*/

    // define an AMD module that relies on 'leaflet'
    if (typeof define === 'function' && define.amd) {
        define(['leaflet'], factory);


    // define a Common JS module that relies on 'leaflet'
    } else if (typeof exports === 'object') {
        module.exports = factory(require('leaflet'));
    }

    // attach your plugin to the global 'L' variable
    if(typeof window !== 'undefined' && window.L){
        factory(window.L);
    }

}(function (L) {

    // L. ... 
}, window));

Hello, did you consider approach to provide just one <path> element instead of the separate one for every arrow? Maybe it would improve the performance because in my case I have hundred of arrows.

• textpath even after optimization is not enough - just because of SVG, it freezes my screen.
• Polylinedecorator is better because it at least renders and allows some interaction, but lags when I change view - same as your lib.

So I assume it is also about the elements count; the best solution would be to use webgl but, we are in leaflet. So maybe limitting the elements size is the solution? Without any arrows (just a polyline) there is no lag in my case.

i am creating arrowheads with Leaflet.L.polyline() and then attaching arrowheads with .arrowheads(). works great.

but, i am allowing the user to edit a line and like change the color and the style of the arrowhead. doing this:

const arrowheads = polyline.getArrowheads();
const arrowLayer = arrowheads.getLayers()[0];
arrowLayer.setStyle({ color: xxxx });

works great. but, it doesn't seem correct. it seems like there should be a more "correct" way to update the arrowhead style?

also, this doesn't work for like yawn, for example. passing in yawn to setStyle() does nothing. my guess is that yawn changes the geometry and therefore setStyle() doesn't cause the recalc of the geometry or something? So, is there a way to tell an existing arrowhead to change it's geometry?

Trying to import this. Had to addtype="module" to <script type="module" src="/iStats/js/leaflet-arrowheads.js"></script> and change the import path inside it to import { } from './leaflet.geometryutil.js'. Now I'm getting L.polyline(...).arrowheads is not a function
Any idea what the problem is?

Thank you for great plugin,

do you think it would be possible to add arrowheads also to other shapes like curve, for examples ones constructed with:
https://github.com/elfalem/Leaflet.curve

The problem with straight lines is that if you have two polylines
A -> B B -> A
One of the path would be overlapped

I am updating my coords from the socket connection and drawing polyline regards to these coordinates. Whenever I give size as 50px and frequency as 500 px it works okay in the low zoom level. However when I zoom in UI crashes and I am getting blank page. Example polyline code is like this:
L.Polyline([[0, 0]], { color: 'black' }).arrowheads({ size: '50px', frequency: '500px', }
My default max zoom level on leaflet map is 20

This is my piece of code that I am using to add polyline arrowheads and remove on state change but I am unable to remove my arrowheads.

Using the following -
"leaflet-arrowheads": "^1.4.0",
"react-leaflet": "^4.2.1",
"react": "^18.2.0",

const ArrowHeadsPolyline = ({ positions, visible }) => {
const map = useMap();
const polyline = L.polyline(positions);

useEffect(() => {
  if (visible) {
    polyline.arrowheads({ size: "15px" });
    polyline.addTo(map);
  } else {
    polyline.remove();
    polyline.removeFrom(map);
    polyline.arrowheads("remove");
    map.removeLayer(polyline);
  }
}, [visible]);

return null;

};

How do I add different status colors to the markers? Like, I have icons with different status which should be displayed with different colors.

Hello, apologies for raising an issue again but I have created a sandbox with the issue

https://codesandbox.io/s/kind-hellman-f62nq7

I am using .remove as mentioned in the docs but the polyline is not getting removed.

Requesting your help with this.

Thank you so much for your time! :)

The example demo site shows all arrowheads as static layers. When I do map.pm.enableDraw() to create a line, for example, or map.pm.enable() to edit a line, the arrowheads are not there. I can't find anything about this in the docs. Is this not available, or am I just missing something?

For now, the offset option can only take a given offset from the start or the end of the line in either meters or pixels.
But is it possible to write something like
var polyline = L.polyline(latlngs).arrowheads({offsets: {end: '50%'}})
?
Or maybe a way to get the polyline length and calculate an offset from there ?
Thanks in advance

Hello

i am facing the following error in angular project, i have tried upgrade newer version of leaflet-arrowheads, it dint work, please help, thanks in advance.

Error: node_modules/leaflet-arrowheads/src/index.d.ts:12:9 - error TS1110: Type expected.
[1]
[1] 12 size?: ${number}px | ${number}% | ${number}m;
[1] ~~~
[1] node_modules/leaflet-arrowheads/src/index.d.ts:13:1 - error TS1128: Declaration or statement expected.
[1]
[1] 13 }
[1] ~
[1] node_modules/leaflet-arrowheads/src/index.d.ts:20:23 - error TS1110: Type expected.
[1]
[1] 20 frequency?: number | ${number}px | ${number}m | 'allvertices' | 'endonly';
[1] ~~~
[1] node_modules/leaflet-arrowheads/src/index.d.ts:26:22 - error TS1109: Expression expected.
[1]
[1] 26 proportionalToTotal?: boolean;
[1] ~
[1] node_modules/leaflet-arrowheads/src/index.d.ts:31:10 - error TS1109: Expression expected.
[1]
[1] 31 offsets?: {
[1] ~
[1] node_modules/leaflet-arrowheads/src/index.d.ts:32:39 - error TS1005: ',' expected.
[1]
[1] 32 start?: ${number}px | ${number}m;
[1] ~
[1] node_modules/leaflet-arrowheads/src/index.d.ts:33:37 - error TS1005: ',' expected.
[1]
[1] 33 end?: ${number}px | ${number}m;
[1] ~
[1] node_modules/leaflet-arrowheads/src/index.d.ts:39:22 - error TS1109: Expression expected.
[1]
[1] 39 perArrowheadOptions?: (
[1] ~
[1] node_modules/leaflet-arrowheads/src/index.d.ts:42:1 - error TS1128: Declaration or statement expected.
[1]
[1] 42 }
[1] m~

Package Version

@angular-devkit/architect 0.1100.7
@angular-devkit/build-angular 0.1100.7
@angular-devkit/core 11.0.7
@angular-devkit/schematics 11.0.7
@angular/cdk 11.2.13
@angular/cli 11.2.19
@angular/material 11.2.13
@schematics/angular 11.0.7
@schematics/update 0.1102.19
ng-packagr 11.2.4
rxjs 6.5.5
typescript 4.0.8
webpack 4.46.0

Hi, library seems great! However, the arrow bearings seem wrong at least on the scale I'm testing on.

This is what Taipei -> Helsinki looks like with .arrowheads({ frequency: "1000000m", size: "15px", fill: true })

Omitting frequency makes it look wrong, but in a different way

Since leaflet uses spherical mercator, I assume it is the straightforward geometrical angle calculation in bearing breaking on maps with small enough zoom.

Hi,

It has been a long time since this project was last modified, but I was just wondering if you could add the mouse event onto the arrow as well.

When I'm using the mouse event on the polyline it works, but then the arrow doesn't change with it.

It there another way to deal with mouse event for the arrow or is it just not added ?

Thanks for advance

Do not hesitate to ask question if you do not understand what I'm asking as I am not a native English speaker

I was wondering if I could use this in a Vue (3) application, as it looks really nice and should provide everything I need to draw arrows on a map.

The vue-plugin I use (https://vue2-leaflet.netlify.app/ but forked for vue 3 compatiblity: https://github.com/vue-leaflet/vue-leaflet) allows access to the underlying Leaflet object. I'd hoped that this was enough to add arrowheads using this lib.

I have something like the following:

<template>
    <l-map
        ref="trackingMap"
        @ready="onLeafletReady"
    >
        <l-polyline ref="myPolyline" :lat-lngs="polylines"></l-polyline>
    </l-map>
</template>
<script>
import { LMap, LMarker, LPolyline, LPopup, LTileLayer } from '@vue-leaflet/vue-leaflet';
import 'leaflet-arrowheads';

methods: {
    async onLeafletReady() {
        await this.$nextTick();

        let polyline = this.$refs.myPolyline.leafletObject;
        polyline.arrowheads();
    },
}
</script>

Unfortunately this doesn't work and results in the following error:
Uncaught (in promise) TypeError: polyline.arrowheads is not a function

Any ideas on what could cause this? I am aware that this might be an issue on the Vue side (or me misusing this). However I couldn't find any info on how to integrate this and would appreciate any input.

Hi, I am using angular and using https://github.com/Asymmetrik/ngx-leaflet wrapper to show some routes on the leaflet map.

I wanted to use arrowheads to show the routes but I am getting typescript errors "Property 'arrowheads' does not exist on type 'Polyline<LineString | MultiLineString, any>".

Any help would be appreciated.

Hi,
I want to ask if there is an option to add arrowheads to both the start point of a polyline and at the end of the set polyline.
Thank you so much for your time.

Is there a simple way of using the arrowheads within a react-leaflet GeoJSON component? In your deprecated react-leaflet-arrowheads repo it states it can be used simply as follows:

<GeoJSON data={data} arrowheads={{ options }} />

Likewise this issue states something similar.

However this doesn't seem to work for react-leaflet v4.

To complicate things slightly further, my use case has two types of geoJSON lineStrings. So ideally it would be based on a property of the lineString if the arrows show or not, rather than all lineStrings showing the arrows.

When i'm trying to open the map with leaflet-arrowheads
I got this error

Example of my code:

This code i put inside MapContainer from react-leaflet 4.2.1 version

Currently, when you do .arrowheads() on the polyline, it draws the tip of the arrowhead at the end of the line, and therefore the base of the arrowhead is actually on the line. This is not an issue for non-filled arrowheads (it looks better if the line goes to the tip), or filled arrowheads there the opacity is 1 (since the line is obscured by the fully opaque arrowhead).

However, if the opacity is like .5 on a filled arrowhead, the line shows through underneath. This doesn't look so good. At least in my opinion. Is there an option I'm just not seeing to draw the arrowhead so the base is at the end of the line instead of the tip being at the end of the line?

It has a performance problem when using arrows on L.geoJSON containing a LineString with 10,000 or more coordinates.
After zooming in on the map for a detailed view, all the arrows are apparently calculated, even if they are not in the viewport. The browser is at 100% CPU for tens of seconds.

Hi slutske22, thanks for this plugin.

I want to draw a temporary arrow, updated and changed periodically. In my periodic callback I do :

  if(arrow !== undefined)
  {
    mymap.removeLayer(arrow);
   }
  arrow = L.polyline([ [from.lat, from.lng],[to.lat, to.lng] ]).arrowheads().addTo(mymap);

But the redraw caused by the removeLayer remove the main polyline part but not the arrow part.
Do you have an idea ?

How to scale arrow (map zoom level).