Skip to content

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

License

Notifications You must be signed in to change notification settings

yakitoritabetai/Leaflet.LabelTextCollision

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published