Leaflet.Viewpoint

Represents point with multiple directions. Extends CircleMarker.

Useful to show photos taken from one point.

Example

Demo

Installation

requires [email protected]

browser:

<script src="path/to/[email protected]/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