leaflet-texts

leaflet-texts is plugin for adding text to leaflet. You can use L.CanvasTexts for your points with similar performance.

install

npm i leaflet-texts

or

yarn add leaflet-texts

or

pnpm add leaflet-texts

usage

options

• tolerance: Number The default value is 0. How much to extend the click tolerance around a path/object on the map.
• collisionFlg: boolean Enable collisionFlg detection or not. The default value is false.
• style: undefined | Function | Object
  • undefined Text will use the default style.
  • Object If it is an Object type, all text will use the same style.
  • Function If it is a Function type, execute the function and use the result of the function to the text.
• padding: number How much to extend the clip area around the map view (relative to its size). e.g. 0.1 would be 10% of map view in each direction

api

• addMarkers(markers: L.Marker[]) Add multiple markers at a time. But only the latitude and longitude values within the visible range of the screen are displayed on the map.
• addMarker(marker: L.Marker) Add a marker to map at a time. But only the latitude and longitude values within the visible range of the screen are displayed on the map.
• removeMarker(marker: L.Marker, redraw: boolean) Remove a marker to map at a time.
  • redraw If it is true value, all text within the visible range of the screen will be rerender.
• redraw() Only the latitude and longitude values of the markers within the visible range of the screen are displayed on the map.
• registerEvents(events: LeafletEventHandlerFnMap) Events can be bound to map. Such as click dblclick mousedown ...
• unregisterEvents(eventName: string | undefined) Unbind event from map.
  • string If eventName is a string, the event corresponding to this character will be unloaded. eg 'click' or 'mousedown mousemove'.
  • undefined Unbind all the events.

es

For example.

import L from 'leaflet';
import { CanvasTexts } from 'leaflet-texts';

const canvasText = new CanvasTexts({
  collisionFlg: false,
  attribution: 'leaflet-texts',
  style: (data) => {
    return {
      fillStyle: '#00f',
      strokeStyle: '#f0a',
      globalAlpha: 1,
      font: '14px "Microsoft YaHei"',
      textBaseline: 'top',
    };
  },
});

const map = L.map('map', {
  center: [59.9578, 30.2987],
  zoom: 2,
});

map.addLayer(canvasText);

Here is a demo of 10000 markers, displayed in one canvas.

const iconUrl = 'https://examples.com/a.png';

const markers = [];
for (let i = 0; i < 10000; i++) {
  const lat = 58.5578 + Math.random() * 1.8;
  const lng = 29.0087 + Math.random() * 3.6;
  const marker = L.marker([lat, lng], {
    iconUrl,
    text: i,
    lng,
    lat,
  });
  markers.push(marker);
}
canvasText.addMarkers(markers);

This is a case for addMarker usage.

const td = {
  lat: 38.687957948,
  lng: 129.66781678,
  text: '38.687957948-129.66781678',
};
const om = L.marker([td.lat, td.lng], {
  iconUrl,
  text: td.text,
  lng: td.lng,
  lat: td.lat,
});

canvasText.addMarker(om);

This is a case for removeMarker usage.

canvasText.removeMarker(om, true);

This is a binding event case.

canvasText.registerEvents({
  click: (marker, event) => {
    console.log('click', marker, event);
  },
  dblclick: (marker, event) => {
    console.log('dblclick', marker, event);
  },
  contextmenu: (marker, event) => {
    console.log('contextmenu', marker, event);
  },
  mousedown: (marker, event) => {
    console.log('mousedown', marker, event);
  },
  mouseup: (marker, event) => {
    console.log('mouseup', marker, event);
  },
  mousemove: (marker, event) => {
    console.log('mousemove', marker, event);
  },
  mouseover: (marker, event) => {
    console.log('mouseover', marker, event);
  },
  mouseout: (marker, event) => {
    console.log('mouseout', marker, event);
  },
  dragstart: (marker, event) => {
    console.log('dragstart', marker, event);
  },
  // ...
});

This is a binding event case.

canvasText.unregisterEvents('click');
canvasText.unregisterEvents('mousedown mousemove');
// canvasText.unregisterEvents();

browser

Introduce external dependencies

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-src.js"></script>

Introduce this plugin.

<script src="https://unpkg.com/leaflet-texts@latest"></script>

You can also download this plugin locally and then import it.

<script src="/path/leaflet-texts/umd/index.js"></script>

Create a dom container to load the map

<div id="map" style="height: 300px;"></div>

Use it.

const canvasText = new L.CanvasTexts({
  collisionFlg: true,
});

const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 20 });

const map = L.map('map', {
  center: new L.LatLng(35.695786, 139.749213),
  zoom: 12,
  layers: [osm, canvasText],
});