Leaflet marker with directions
JavaScript Other
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist Update npm keywords Jan 6, 2017
example Update package.json Dec 31, 2016
src Update npm keywords Jan 6, 2017
.gitignore Create app structure Dec 11, 2016
README.md
index.js
package.json Update npm keywords Jan 6, 2017

README.md

Leaflet.Viewpoint

Represents point with multiple directions. Extends CircleMarker.

Useful to show photos taken from one point.

Example

l viewpoint example

Demo

Installation

requires leaflet@1.0.2

browser:

<script src="path/to/leaflet@1.0.2/dist/leaflet.js"></script>
<script src="path/to/Leaflet.viewpoint.js"></script>

browserify:

npm install leaflet-viewpoint
require('leaflet');
require('leaflet-viewpoint');

Usage

You can specify arrow directions and style in options object by creating a viewpoint.

var directions = [0, 45, 90, 135];

var viewpoint = L.viewpoint([55.786456, 37.629898], {
    id: 1, // if not specified, _leaflet_id will be used
    radius: 8,
    fillColor: 'green',
    fillOpacity: 1,
    directions: directions,
    arrow: {
        width: 5    // pixels
        height: 10  // pixels
        offset: 5,  // pixels
        stroke: false,
        color: null,
        weight: 0,
        opacity: 1,
        fill: true,
        fillColor: 'black',
        fillOpacity: 1
    }
}).addTo(map);

Don't pass arrow options to setStyle method, use setArrowStyle instead:

viewpoint.setArrowStyle({
    width: 10
    height: 20
    offset: 1,
    stroke: true,
    color: 'black',
    weight: 1,
    opacity: 0.5,
    fill: true,
    fillColor: 'yellow',
    fillOpacity: 0.5
});

You can always change arrows directions (in degrees):

viewpoint.setDirections([90, 95, 100]);

Or get them:

var directions = viewpoint.getDirections(); //[90, 95, 100]

API reference

Factory

Factory Description
L.viewpoint(LatLng latlng, options?) Create viewpoint marker from latLng.

Methods

Method Returns Description
setArrowStyle(Object) this Set arrow style.
setDirections(Array) this Set arrow directions (degrees).
getDirections() Array Get arrow directions (degrees).

License