leaflet-viewpoint

2019-06-12

Leaflet marker with multiple directions

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 optionsobject 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 setStylemethod, use setArrowStyleinstead:

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

FactoryDescription
L.viewpoint(LatLng_latlng_, _options?_)Create viewpoint marker from latLng.

Methods

MethodReturnsDescription
setArrowStyle(Object)thisSet arrow style.
setDirections(Array)thisSet arrow directions (degrees).
getDirections()ArrayGet arrow directions (degrees).

License

Repository

https://github.com/ggolikov/Leaflet.Viewpoint


上一篇:adm-trv
下一篇:fis-msprd-webpack_1_13_1
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部