thomas2077/leaflet-marker-direction

a plugin based on Leaflet

leaflet-marker-direction

Plugin for Leaflet to display the path and the direction of the marker

Check out the demo

Leaflet versions

The plugin is based on Leaflet 1.0.0 or above

Usage

// inite map
var map = L.map('map').setView([30.201479, 120.155908], 13);
L.tileLayer(...).addTo(map);

// your data
var list = [ 
             {"lon":"120.15261","lat":"30.182835"},
             {"lon":"120.152431666667","lat":"30.1828733333333"},
             {"lon":"120.15239","lat":"30.182755"},
             {"lon":"120.152303333333","lat":"30.1826566666667"}
           ];
// iterate your data       
for(var i in list){
    var img = new Image();
    img.src = './images/arrow3.png';
    var options = {
        label: 'your label',
        labelFlag: labelFlag,
        labelColor: 'black',
        img: img
    };
    
    // use angeMaker plugin
    var angleMarker = L.angleMarker(latlng, options);
    var angle = 0;
    
    // get angele between A(previousPoint) and B(nextPoint)
    angle = angleMarker.getAngle(previousLatLng, nextLanLng);
    
    // set angele A -> B
    angleMarker.setHeading(angle);
    map.addLayer(angleMarker);
}

Options

*label Text near the your marker
*labelFlag whethe to display the text
*labelColor The color of the text
*img Your custom maker

update history

leaflet-marker-direction's Issues

how redraw point

Hi, how redraw point or clear when not found points on list on reload page
I desperate, thx.

how implement for one marker?

sorry, about my english.
Hello, before I thank you for creating this plugin. Im new on leaflet. I have tried from the example you made. how can i apply it to one marker?

Is it possible for this plugin I use for current users with a combination of realtime user positions? so when the user moves, can this plugin adjust the direction of the road?

Removing marker from the layer, then cant add to the layer again

error options not defined

The reference to this is missing in two places.

    options.angle = angle;
    return angle;

    if(!heading){
        heading = options.angle;
    }