Leaflet.LabelTextCollision is a LeafletJS plug-in to display labels on vector data while avoiding label collisions.
Leaflet.LabelTextCollision is a LeafletJS plug-in to display labels on vector data while avoiding label collisions.
Supports Leaflet 1.0.0+ branches.
To avoid label overlapping, this plugin hides some labels. Labels defined first will have preference over labels defined last, so arrange your labels from the most important to the least important.
L.LabelTextCollision
implements a L.Renderer
based on L.Canvas
, as to not create an excess of DOM elements which might slow down rendering in the browser.
Check out the demo
L.LabelTextCollision
specifying the collision flag option.renderer
option to force rendering of vector data with that instancevar labelTextCollision = new L.LabelTextCollision({
collisionFlg : true
});
var map = new L.Map('map', {
layers : [ osm ],
center : new L.LatLng(35.695786, 139.749213),
zoom : 10,
renderer : labelTextCollision
});
L.Path
(L.Polyline
s, L.Polygon
s, L.Circle
s, L.CircleMarker
s) have a new text
option. Use it to specify the label contents.L.polyline(
[ [ 35.695786, 139.749213 ],
[ 35.696786, 139.748213 ],
[ 35.695786, 139.747213 ] ], {
weight : 12,
color : '#fe57a1',
text : 'Leaflet.LabelTextCollision!!!!!!!!'
}).addTo(map);
Copyright (c) 2016 Kenta Hakoishi Released under the MIT license
However, "copyright notice" should be indicated on the place where the user is visible.
ただし、「著作権表示」はユーザが見える箇所に表記して下さい。 ※画面のフッター等に著作権表示とMITライセンスであることを明記して下さい。 ソース内ではクレジットと見なしません。