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/[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-custom-div-overlay@latest"></script>
<!-- or -->
<!-- <script src="https://unpkg.com/[email protected]/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. |