gw2-map-embeds

gw2-mapEmbeds

Start development server

yarn install

Install dependencies.

yarn start

Runs the app in the development mode.
Open 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, ... )

<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)

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

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