# gw2-map-embeds

> Guild Wars 2 maps using Leaflet.js with offline cached tiles

Latest version **1.4.3** (published 2023-11-12) · 0 weekly downloads

## Install

```sh
npm install gw2-map-embeds
pnpm add gw2-map-embeds
yarn add gw2-map-embeds
bun add gw2-map-embeds
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.3 |
| Published | 2023-11-12 |
| First published | 2023-05-31 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 18 |
| Unpacked size | 718.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | thom-10 |

## Links

- npm: https://www.npmjs.com/package/gw2-map-embeds
- npm.io page: https://npm.io/package/gw2-map-embeds

## Dependencies (18)

- [idb](https://npm.io/package/idb.md) ^7.1.1
- [sass](https://npm.io/package/sass.md) ^1.69.5
- [axios](https://npm.io/package/axios.md) ^1.6.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [leaflet](https://npm.io/package/leaflet.md) ^1.9.4
- [date-fns](https://npm.io/package/date-fns.md) ^2.30.0
- [bootstrap](https://npm.io/package/bootstrap.md) ^5.3.2
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [object-hash](https://npm.io/package/object-hash.md) ^3.0.0
- [react-redux](https://npm.io/package/react-redux.md) ^8.1.3
- [react-leaflet](https://npm.io/package/react-leaflet.md) ^4.2.1
- [leaflet.offline](https://npm.io/package/leaflet.offline.md) ^3.0.1
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^2.9.1
- [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.9.7
- [@discretize/typeface-menomonia](https://npm.io/package/@discretize/typeface-menomonia.md) ^0.1.3
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.2.0
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^6.4.2
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.4.2

## Recent versions

- 1.4.3 (latest) — 2023-11-12
- 1.4.2 — 2023-11-11
- 1.4.1 — 2023-11-11
- 1.4.0 — 2023-11-11
- 1.3.0 — 2023-08-01
- 1.2.2 — 2023-06-09
- 1.2.1 — 2023-06-06
- 1.2.0 — 2023-06-05
- 1.1.6 — 2023-06-04
- 1.1.5 — 2023-06-04
- 1.1.4 — 2023-06-04
- 1.1.3 — 2023-06-04
- 1.1.2 — 2023-06-04
- 1.1.0 — 2023-06-03
- 1.0.0 — 2023-05-31

## README

# gw2-mapEmbeds

## Start development server

### `yarn install`

Install dependencies.

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

## Embed Codes

The following html blocks can or must be used to add data to the leaflet-gw2 map.

### Init Block

Necessary to show offcanvas panel. Placement not very important. Nothing is shown exactly there.
In the dataset tag you set, which map data will be loaded. (landmarks, sector borders and names, ...)

#### Config

| tag             | descr                                                |
| --------------- | ---------------------------------------------------- |
| id=gw2mapRoot   | Render target for offcanvas panel.                   |
| data-gw2map-ids | api map ids to be loaded. (landmarks, sectors, ... ) |

```html
<div id="gw2mapRoot" data-gw2map-ids="1490,1438"></div>
```

### Marker Block

On this block a button will be rendered, which activates the point/point-group on the leaflet-map and centers the map on them.

#### Config

| tag                | description                                                |
| ------------------ | ---------------------------------------------------------- |
| class=gw2mapMarker | Render target for marker buttons.                          |
| data-gw2map-marker | Json object of marker names and coordinates                |
| data-gw2map-color  | Set marker color (red, rose, green, yellow, default: blue) |

```html
<div
  class="gw2mapMarker"
  data-gw2map-marker='{"Marker 1": [26850,99387],"Marker 2": [26689,99871]}'
  data-gw2map-color="rose"
></div>
or
<span
  class="gw2mapMarker"
  data-gw2map-marker='{"FancySpot": [37480, 101044],"NextSpot": [38168, 101148]}'
  data-gw2map-color="red"
></span>
```

### Script Block

The last element is the actual script, which will so the magic. Place it on the end ob html-body.

```html
<script id="gw2maps" src="gw2-map-embeds.js" defer=""></script>
```

---
_Source: https://npm.io/package/gw2-map-embeds · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._