A leaflet plugin that supports custom divs.

$ npm i leaflet-custom-div-overlay

or

$ yarn add leaflet-custom-div-overlay

or

$ pnpm add leaflet-custom-div-overlay

• bounds: LatLngExpression[]
• options: CustomDivOverlayOptions
  • opacity: Number The default value is 1. css/opacity
  • interactive: Boolean The default value is false. If true, the div overlay will emit mouse events when clicked or hovered.
  • zIndex: Number The default value is 1. The explicit zIndex of the overlay layer.
  • className: String The default value is ''. A custom class name to assign to the div. Empty by default.
  • pane: String The default value is 'markerPane'. more
  • attribution: String The default value is null. String to be shown in the attribution control, e.g. "© OpenStreetMap contributors". It describes the layer data and is often a legal obligation towards copyright holders and tile providers.

For example.

import L, { type LatLngExpression } from 'leaflet'
import 'leaflet-custom-div-overlay'

const bounds: LatLngExpression[] = [
  [51.75, 19.46667],
  [51.75001, 19.46668],
]
const options: CustomDivOverlayOptions = {
  zIndex: 460,
  interactive: true,
  className: 'my-custom-div-overlay',
  content: `<div>lorem</div>`,
  attribution: 'leaflet-custom-div-overlay',
}

const customDiv = L.customDivOverlay(bounds, options)

customDiv.addTo(map)

Introduce external dependencies

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

Introduce this plugin.

<script src="https://unpkg.com/leaflet-custom-div-overlay@latest"></script>
<!-- or -->
<!-- <script src="https://unpkg.com/leaflet-custom-div-overlay@1.0.0/dist/leaflet-custom-div-overlay.global.js"></script> -->

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

<script src="/path/leaflet-custom-div-overlay.global.js"></script>

Create a dom container to load the map

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

Use it.

const map = L.map('map', {})

map.setView(new L.LatLng(51.75, 19.46667), 12)

const customDiv = L.customDivOverlay(
  [
    [51.75, 19.46667],
    [51.75001, 19.46668],
  ],
  {
    zIndex: 460,
    interactive: true,
    className: 'my-custom-div-overlay',
    content: `<div>lorem</div>`,
    attribution: 'leaflet-custom-div-overlay',
  },
)

customDiv.on('click', event => {
  console.log(event)
})

customDiv.addTo(map)