https://github.com/inventage/leaflet-map

A web component for displaying a map with certain features using Leaflet.
https://github.com/inventage/leaflet-map

leaflet leaflet-map lit-element lit-html map open-wc storybook typescript web-components webcomponents

Last synced: about 2 months ago
JSON representation

A web component for displaying a map with certain features using Leaflet.

• Host: GitHub
• URL: https://github.com/inventage/leaflet-map
• Owner: inventage
• License: mit
• Created: 2020-07-27T11:18:23.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-09-16T07:58:31.000Z (over 3 years ago)
• Last Synced: 2025-04-05T17:16:58.010Z (2 months ago)
• Topics: leaflet, leaflet-map, lit-element, lit-html, map, open-wc, storybook, typescript, web-components, webcomponents
• Language: TypeScript
• Homepage: http://inventage.github.io/leaflet-map/
• Size: 4.16 MB
• Stars: 5
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


  

  


  
<leaflet-map>

  




A web component for displaying a map with certain features using [Leaflet].

[![made with open-wc](https://img.shields.io/badge/made%20with-open--wc-%23217ff9?style=flat-square)](https://open-wc.org)

[![Main Workflow](https://img.shields.io/github/workflow/status/inventage/leaflet-map/Main%20Workflow?style=flat-square)](https://github.com/inventage/leaflet-map/actions?query=workflow%3A"Main+Workflow")

[![npm version](https://img.shields.io/npm/v/@inventage/leaflet-map?style=flat-square)](https://www.npmjs.com/package/@inventage/leaflet-map)

## Installation

```bash

npm i @inventage/leaflet-map

```

## Usage

```html

  import '@inventage/leaflet-map';

```

## Example

https://inventage-leaflet-map.glitch.me/

## Properties

| Property              | Attribute             | Type                        | Default  |

| --------------------- | --------------------- | --------------------------- | -------- |

| `defaultZoom`         | `defaultZoom`         | `number`                    | 16       |

| `detectRetina`        | `detectRetina`        | `boolean`                   | true     |

| `latitude`            | `latitude`            | `number`                    | 47.38991 |

| `longitude`           | `longitude`           | `number`                    | 8.51604  |

| `markers`             | `markers`             | `MarkerInformation[]`       | []       |

| `maxZoom`             | `maxZoom`             | `number`                    | 19       |

| `radius`              | `radius`              | `number`                    | 0        |

| `selectedMarker`      | `selectedMarker`      | `MarkerInformation \| null` | null     |

| `updateCenterOnClick` | `updateCenterOnClick` | `boolean`                   | false    |

## Events

| Event            | Type                                                    | Description                                                                                                                     |

| ---------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |

| `center-updated` | `CustomEvent<{ latitude: number; longitude: number; }>` | Event transporting the latitude and longitude each time the map center has updated.                                             |

| `map-ready`      | `CustomEvent<{ map: Map; }>`                            | Event transporting an leaflet map instance. Fires using the `whenReady` event of leaflet map.                                   |

| `tiles-loading`  | `CustomEvent<{ promise: Promise; }>`              | Event transporting a promise, fires when the tiles layer starts loading tiles. The promise resolves once all tiles have loaded. |

## CSS Custom Properties

| Property                   | Type   | Description                    | Default |

| -------------------------- | ------ | ------------------------------ | ------- |

| `--leaflet-map-min-height` | Length | Min. height of the map element | `50vh`  |

[leaflet]: https://leafletjs.com/