# @openremote/or-map > Displays s vector or raster map Latest version **1.30.0** (published 2026-09-02) · AGPL-3.0-or-later license · 0 weekly downloads ## Install ```sh npm install @openremote/or-map pnpm add @openremote/or-map yarn add @openremote/or-map bun add @openremote/or-map ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.30.0 | | Published | 2026-09-02 | | First published | 2019-01-25 | | Weekly downloads | 0 | | License | AGPL-3.0-or-later | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 11 | | Unpacked size | 5.7 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 1909 | | Author | OpenRemote | | Maintainers | openremotedeveloper, wborn | ## Links - npm: https://www.npmjs.com/package/@openremote/or-map - Repository: https://github.com/openremote/openremote - npm.io page: https://npm.io/package/@openremote/or-map ## Dependencies (11) - [lit](https://npm.io/package/lit.md) ^3.3.1 - [lit-html](https://npm.io/package/lit-html.md) ^3.3.1 - [maplibre-gl](https://npm.io/package/maplibre-gl.md) ~5.19.0 - [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8 - [@openremote/core](https://npm.io/package/@openremote/core.md) 1.30.0 - [@openremote/model](https://npm.io/package/@openremote/model.md) 1.30.0 - [@openremote/or-icon](https://npm.io/package/@openremote/or-icon.md) 1.30.0 - [@openremote/or-element](https://npm.io/package/@openremote/or-element.md) 1.30.0 - [@openremote/or-translate](https://npm.io/package/@openremote/or-translate.md) 1.30.0 - [@openremote/or-mwc-components](https://npm.io/package/@openremote/or-mwc-components.md) 1.30.0 - [@openremote/or-vaadin-components](https://npm.io/package/@openremote/or-vaadin-components.md) 1.30.0 ## Recent versions - 1.30.0 (latest) — 2026-09-02 - 1.31.0-snapshot.20260916144308 (snapshot) — 2026-09-16 - 1.31.0-snapshot.20260916130646 — 2026-09-16 - 1.31.0-snapshot.20260915122244 — 2026-09-15 - 1.31.0-snapshot.20260911091633 — 2026-09-11 - 1.31.0-snapshot.20260910125057 — 2026-09-10 - 1.31.0-snapshot.20260910120754 — 2026-09-10 - 1.31.0-snapshot.20260908130403 — 2026-09-08 - 1.31.0-snapshot.20260907094218 — 2026-09-07 - 1.31.0-snapshot.20260904133325 — 2026-09-04 - 1.31.0-snapshot.20260904115341 — 2026-09-04 - 1.31.0-snapshot.20260904102436 — 2026-09-04 - 1.31.0-snapshot.20260903144735 — 2026-09-03 - 1.31.0-snapshot.20260903135821 — 2026-09-03 - 1.31.0-snapshot.20260903081447 — 2026-09-03 - … 794 more at https://npm.io/package/@openremote/or-map/versions ## README # @openremote/or-map \ [![NPM Version][npm-image]][npm-url] Web Component for displaying a MapLibre map; either raster or vector (default). This component requires an OpenRemote Manager to retrieve map settings and tiles. ## Install ```bash npm i @openremote/or-map yarn add @openremote/or-map ``` ## Usage For a full list of properties, methods and options refer to the TypeDoc generated [documentation](<>). ```$html ``` The center and zoom are optional overrides for the defaults that will be defined in the `mapsettings` loaded from the OpenRemote Manager; each realm can have different `mapsettings` with a fallback to the default. Markers can be added via markup as children: ```$html ``` Or programmatically: ```$typescript const map = document.getElementById("map"); const assetMarker = document.createElement("or-map-marker-asset"); assetMarker.setAttribute("asset", apartment1.id!); map.appendChild(assetMarker); ``` There are two types of built in markers: ### \ This is a basic marker and the base class for any other markers and it has the following attributes: - lat* - lng* - visible (show/hide the marker) - icon (uses `or-icon` to render an icon inside the default marker) - interactive (sets pointer events for the marker) *required The visual content of the marker can be controlled by adding child content to the `or-map-marker` element; any child content is rendered inside a `div`. If no children are specified then the default marker will be used. Subclasses can override the `createMarkerContent()` method to control the look of the marker. ### \ This links the marker to an Asset in the OpenRemote Manager by using the `asset-mixin` and adds the following attribute: - asset* (ID of the Asset to link) *required The Asset must be valid, accessible and must have a valid `location` attribute otherwise no marker will be shown. By default the `AssetType` is used to set the icon of the marker but this can be controlled by setting the `assetTypeAsIcon` property. ### Styling All styling is done through CSS, the following CSS variables can be used: ```$css --or-map-marker-fill (default: #1D5632) --or-map-marker-stroke (default: none) --or-map-marker-width (default: 48px) --or-map-marker-height (default: 48px) --or-map-marker-transform (default: translate(-24px, -45px)) --or-map-marker-icon-fill (default: #FFF) --or-map-marker-icon-stroke (default: none) --or-map-marker-icon-width (default: 24px) --or-map-marker-icon-height (default: 24px) --or-map-marker-icon-transform (default: translate(-50%, -19px)) ``` ### Events The following DOM events may be fired by the component and markers: - `click` - Standard click event is fired when the map itself is clicked - `OrMapMarkerEvent.CLICKED` - A map marker has been clicked; details contains the clicked `marker` - `OrMapMarkerEvent.CHANGED` - A map marker has been modified; details contains the changed `marker` and name of changed `property` ## Supported Browsers The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported. ## License [GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html) [npm-image]: https://img.shields.io/npm/v/@openremote/or-map.svg [npm-url]: https://www.npmjs.com/package/@openremote/or-map --- _Source: https://npm.io/package/@openremote/or-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._