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