leaflet-custom-div-overlay

A leaflet plugin that supports custom divs.

install

$ npm i leaflet-custom-div-overlay

or

$ yarn add leaflet-custom-div-overlay

or

$ pnpm add leaflet-custom-div-overlay

usage

• 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.

es

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)

browser

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)

api

Method	arguments	returns	description
bringToFront	-	this	Brings this overlay in front of other overlays (in the same map pane).
bringToBack	-	this	Brings this overlay to the back of other overlays (in the same map pane).
setBounds	(<L.LatLngBounds> bounds)	this	Update the bounds that this overlay covers
setZIndex	(<Number> value)	this	Changes the zIndex of the div overlay.
getBounds	-	L.LatLngBounds	Get the bounds that this customDivOverlay covers
getElement	-	HTMLDivElement	Returns the instance of HTMLDivElement used by this overlay.
setContent	Function or string or HTMLElement	this	- Function If it is a Function type, execute the function and add the result of the function to the overlay as a DOMString. - string If it is a string type, it is added to the overlay as DOMString. - HTMLElement If it is a HTMLElement type, it is added to the overlay as DOMString.
getCenter	-	L.LatLng	Returns the center of the overlay.
addTo	(group: Map | LayerGroup)	this	Adds the layer to the given map or layer group.
remove	-	this	Removes the layer from the map it is currently active on.
removeFrom	(group: Map | LayerGroup)	this	Removes the layer from the given LayerGroup
getAttribution	-	String	Used by the attribution control, returns the attribution option.