@silen/leaflet-canvas

Allows rendering to canvas using custom HtmlElement elements.

install

npm i @silen/leaflet-canvas

or

yarn add @silen/leaflet-canvas

or

pnpm add @silen/leaflet-canvas

usage

options

• tolerance: Number The default value is 0. How much to extend the click tolerance around a path/object on the map.

for test

const features = [
  {
    type: 'Feature',
    properties: {},
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [19.458847045898438, 51.75944673648409],
          [19.46846008300781, 51.760296746815754],
          [19.475669860839844, 51.745738110429116],
          [19.462108612060547, 51.742868336510526],
          [19.458847045898438, 51.75944673648409],
        ],
      ],
    },
  },
  {
    type: 'Feature',
    properties: {},
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [19.475669860839844, 51.745738110429116],
          [19.489574432373047, 51.74765119176804],
          [19.489402770996094, 51.75604653513805],
          [19.485111236572266, 51.76157173231003],
          [19.46846008300781, 51.760296746815754],
          [19.475669860839844, 51.745738110429116],
        ],
      ],
    },
  },
]

This is an image for test.

const imgSrc =
  'data:image/png;base64,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'

This is the interface for implementing custom rendering using canvas.

const onFillContent = (ctx, layer) => {
  const img = document.createElement('img')
  img.src = imgSrc

  const { _pxBounds } = layer
  const minX = _pxBounds.min.x
  const minY = _pxBounds.min.y
  const maxX = _pxBounds.max.x
  const maxY = _pxBounds.max.y

  const width = maxX - minX
  const height = maxY - minY

  img.onload = () => {
    ctx.drawImage(img, minX, minY, width, height)
  }
}

es

For example.

import L from 'leaflet'
import '@silen/leaflet-canvas'

const renderGroup = new L.FeatureGroup()
map.addLayer(renderGroup)

const geoJson = L.geoJson(
  {
    type: 'FeatureCollection',
    features,
  },
  {
    onFillContent,
    onEachFeature: (feature, layer) => {
      renderGroup.addLayer(layer)
    },
  },
)

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/@silen/leaflet-canvas@latest"></script>

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

<script src="/path/@silen/leaflet-canvas@latest"></script>

Create a dom container to load the map

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

Use it.

let selectedLayer
const map = L.map('map', {
  renderer: L.customCanvas(),
})

map.setView(new L.LatLng(51.75, 19.46667), 12)
map.addLayer(
  new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    minZoom: 8,
    maxZoom: 20,
  }),
)

const renderGroup = new L.FeatureGroup()
map.addLayer(renderGroup)

const geoJson = L.geoJson(
  {
    type: 'FeatureCollection',
    features,
  },
  {
    onFillContent,
    onEachFeature: (feature, layer) => {
      layer.on('click', handleLayerClick)
      renderGroup.addLayer(layer)
    },
  },
)

function highlightFeature(layer) {
  if (selectedLayer) {
    geoJson.resetStyle(selectedLayer)
  }
  selectedLayer = layer

  layer.setStyle({
    weight: 5,
    color: '#666',
    dashArray: '',
    fillOpacity: 0.7,
  })

  layer.bringToFront()
}

function handleLayerClick(event) {
  const layer = event.target

  highlightFeature(layer)
}