I want to create a arrow in leaflet using poly lines of multipolylines whichever suits..

The arrow class should take in following param

baselatitude = base of the arrow where the arrow will be on map

baselongitude = base of the arrow where the arrow will be on map

pointlatitude = the tip of the arrow on the map

pointlongitude = the tip of the arrow on the map

apointlatitude

apointlongitude

bpointlatitude

bpointlongitude

angle = rotation degree

can anyone please provide guidance on creating the arrow using following param . It would be nice to if you can create a leaflet class extension L.arrow

I want to create a arrow in leaflet using poly lines of multipolylines whichever suits..

The arrow class should take in following param

baselatitude = base of the arrow where the arrow will be on map

baselongitude = base of the arrow where the arrow will be on map

pointlatitude = the tip of the arrow on the map

pointlongitude = the tip of the arrow on the map

apointlatitude

apointlongitude

bpointlatitude

bpointlongitude

angle = rotation degree

can anyone please provide guidance on creating the arrow using following param . It would be nice to if you can create a leaflet class extension L.arrow

• javascript
• maps
• leaflet

Share Improve this question Follow asked Nov 11, 2014 at 6:47 ChiefChief 91411 gold badge99 silver badges2626 bronze badges 1

• What are points a and b? – Codebling Commented Dec 1, 2019 at 9:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

did that myself for fit my requirement .. pasting in if somebody finds it useful someday feature.geometry.coordinates[0] is the geoJson collection where all the coordinates are retrieved

L.Playback.WindArrowMarker = L.Marker.extend({
    initialize: function (startLatLng, options, feature) {

        this._min = 99;
        this._max = 0;

        this._arrowStyleOptions = [
        { color: '#ffff00' },
        { color: '#00ffff' },
        { color: '#00ff00' }];         


        var ArrowData = feature.geometry.coordinates[0];

        var ArrowBaseLon = ArrowData[0];
        var ArrowBaseLat = ArrowData[1];
        var ArrowPointLat = ArrowData[2];
        var ArrowPointLon = ArrowData[3];
        var ArrowPointALat = ArrowData[4];
        var ArrowPointALon = ArrowData[5];
        var ArrowPointBLat = ArrowData[6];
        var ArrowPointBLon = ArrowData[7];
        var ArrowHeight = ArrowData[8];
        var ArrowMagnitude = ArrowData[9];
        var ArrowBearing = ArrowData[10];

        if (ArrowMagnitude > this._max) this._max = ArrowMagnitude;
        if (ArrowMagnitude < this._min) this._min = ArrowMagnitude;

        var styleToUse=this._getArrowStyle(ArrowMagnitude);

        //Create Arrow structure and assign first value from the playback data
        //baseLtlg                     //PointLtlg
        this._arrowbase = L.polyline([[ArrowBaseLat, ArrowBaseLon], [ArrowPointLat, ArrowPointLon]], styleToUse);
        //PointLtlg                    //PointAtLtlg
        this._arrowpointA = L.polyline([[ArrowPointLat, ArrowPointLon], [ArrowPointALat, ArrowPointALon]], styleToUse);
        //PointLtlg                    //PointBLtlg
        this._arrowpointB = L.polyline([[ArrowPointLat, ArrowPointLon], [ArrowPointBLat, ArrowPointBLon]], styleToUse);


        //Call leaflet marker initialization to attach this as marker
        L.Marker.prototype.initialize.call(this, [ArrowBaseLat, ArrowBaseLon], {});

        //Calculate windspeed     
        var windspeed = this._calculateWindspeed(ArrowMagnitude, feature.modeldata.Adder, feature.modeldata.Multiplier)

        //Attach a popup
        this._arrowbase.bindPopup(this.getPopupContent(ArrowBearing, windspeed));


    },

    _calculateWindspeed: function (magnitude, adder, multiplier) {
        return (magnitude - parseFloat(adder)) / multiplier
    },

    _getArrowStyle: function (magnitude) {

        this._arrowMagMed = 7;
        this._arrowMagHigh = 10;

        if (magnitude > this._arrowMagHigh)
            styleToUse = this._arrowStyleOptions[2];
        else if (magnitude > this._arrowMagMed)
            styleToUse = this._arrowStyleOptions[1];
        else
            styleToUse = this._arrowStyleOptions[0];

        return styleToUse;
    },

    getPopupContent: function (bearing, windspeed) {
        return sprintf("Wind blowing from: %s deg(from North)<br> Wind Speed(m/s): %s", bearing.toFixed(1), windspeed.toFixed(1));
    },

    addTo: function (map) {
        this._arrowbase.addTo(map);
        this._arrowpointA.addTo(map);
        this._arrowpointB.addTo(map);
    },   

    move: function (windData,transitionTime, modelData) {

        var ArrowBaseLon = windData[0];
        var ArrowBaseLat = windData[1];
        var ArrowPointLat = windData[2];
        var ArrowPointLon = windData[3];
        var ArrowPointALat = windData[4];
        var ArrowPointALon = windData[5];
        var ArrowPointBLat = windData[6];
        var ArrowPointBLon = windData[7];
        var ArrowHeight = windData[8];
        var ArrowMagnitude = windData[9];
        var ArrowBearing = windData[10];

        var styleToUse = this._getArrowStyle(ArrowMagnitude);

        //Assign color based on magnitude
        this._arrowbase.setStyle(styleToUse);
        this._arrowpointA.setStyle(styleToUse);
        this._arrowpointB.setStyle(styleToUse);


        //Set Base,Apoint,Bpoint LatLongs as they are the ones changing 
        this._arrowbase.setLatLngs([[ArrowBaseLat, ArrowBaseLon], [ArrowPointLat, ArrowPointLon]])
        this._arrowpointA.setLatLngs([[ArrowPointLat, ArrowPointLon], [ArrowPointALat, ArrowPointALon]])
        this._arrowpointB.setLatLngs([[ArrowPointLat, ArrowPointLon], [ArrowPointBLat, ArrowPointBLon]])

        //Calculate windspeed     
        var windspeed = this._calculateWindspeed(ArrowMagnitude, modelData.Adder, modelData.Multiplier)

        //Check if popup is attached
        if (this._arrowbase._popup) {
            //Set popup content while moving
            this._arrowbase._popup.setContent(this.getPopupContent(ArrowBearing, windspeed));
        }
    }
});

It would be nice to if you can create a leaflet class extension L.arrow

No: this is not a place where people make things for you. But we can Google things, like Leaflet arrow which leads you directly to Leaflet.PolylineDecorator.