Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Leaflet.LabelTextCollision

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.

demo

Check out the demo

Usage examples

  • Create a new instance of L.LabelTextCollision specifying the collision flag option.
  • Use the map's renderer option to force rendering of vector data with that instance
var 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
});
  • Instances of L.Path (L.Polylines, L.Polygons, L.Circles, L.CircleMarkers) have a new text option. Use it to specify the label contents.
  • The label will only be displayed if it doesn't collide with an existing label
L.polyline(
  [ [ 35.695786, 139.749213 ],
          [ 35.696786, 139.748213 ],
          [ 35.695786, 139.747213 ] ], {
      weight : 12,
      color : '#fe57a1',
      text : 'Leaflet.LabelTextCollision!!!!!!!!'
  }).addTo(map);

Future plans

  • Add options to control styling of the labels (including font face)
  • Fine tuning of overlap depending on zoom level
  • Refactoring...

License

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ライセンスであることを明記して下さい。 ソース内ではクレジットと見なしません。

About

Leaflet.LabelTextCollision is a LeafletJS plug-in to display labels on vector data while avoiding label collisions.

Topics

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.