Overlapping-Avoided Tooltip for Leaflet
Switch branches/tags
Nothing to show
Clone or download
Latest commit 2da5a8f Dec 4, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
example-browser update Sep 28, 2018
example update Sep 28, 2018
lib update Sep 28, 2018
.babelrc reorgnize whole project Sep 17, 2018
.editorconfig Create project Sep 4, 2018
.eslintignore reorgnize whole project Sep 17, 2018
.eslintrc.js reorgnize whole project Sep 17, 2018
.gitignore reorgnize whole project Sep 17, 2018
.npmignore chore: prepare for publish Oct 24, 2018
LICENSE.md reorgnize whole project Sep 17, 2018
README.md fix Sep 28, 2018
package-lock.json dist(v0.1.2) Dec 4, 2018
package.json dist(v0.1.2) Dec 4, 2018
prettier.config.js reorgnize whole project Sep 17, 2018



This plugin is designed to avoid tooltip overlapping and make users find out the relationship between each tooltip and marker easily. It is based on Force-Directed Drawing Algorithms in the chapter 12 of the book Handbook of Graph Drawing and Visualization written by Stephen G. Kobourov.

Here is the demo


npm i leaflet-tooltip-layout --save
# or
yarn add leaflet-tooltip-layout

Or you can just copy ./lib/index.js to your project and rename it to what you want.

Getting Started


import * as tooltipLayout from 'leaflet-tooltip-layout';
// or
import { resetMarker, getMarkers, getLine, initialize, getLine } from 'leaflet-tooltip-layout';


const tooltipLayout = require('leaflet-tooltip-layout');


Make sure leaflet is imported before this plugin, and window.L is available

<script type="text/javascript" src="/path/to/leaflet-tooltip-layout.js"></script>

API Reference

  1. L.tooltipLayout.resetMarker(marker)

    Create the marker, bind tooltip to the marker, then use this function.

    Usage example:

    var marker = L.marker(coord, {
      icon: icon
    marker.bindTooltip('Hello world!');
  2. L.tooltipLayout.getMarkers()

    Get the all the markers in this layout.

    Usage example:

    var markerList = getMarkers();
    for (i = 0; i < markerList.length; i++) {
      marker = markerList[i];
      tooltip = marker.getTooltip();
      marker._icon.addEventListener('mouseover', function (){
        // your code
      tooltip._container.addEventListener('mouseover', function (){
        // your code
  3. L.tooltipLayout.getLine(marker)

    Get the line between one marker and its tooltip.

  4. L.tooltipLayout.initialize(map, onPolylineCreated)

    After adding all the markers and tooltips, use this function to create the layout.

    onPolylineCreated is a callback function that allows you to define the style of the line between markers and tooltips, if you want the default one, let this parameter null.

    Or you can define the function like this:

    function onPolylineCreated(ply) {
        color: '#90A4AE'

Build Guide

git clone git@github.com:ZijingPeng/leaflet-tooltip-layout.git
cd ./leaflet-tooltip-layout

npm i # install dependencies
npm run build # build lib & example

# or
npm run serve # enter dev zone


MIT License