EMF Map web component

The EMF map is embeddable as a web component.

Basic use

Include the Javascript as a module, and then you can use the emf-map tag.

      
<emf-map
  center="-2.37948,52.03975"
  zoom="17"
  marker="-2.37948,52.03975"
  layers="a,b,p,t"
>
</emf-map>
<script type="module" rel="preload" src="https://map.emfcamp.org/component.js"></script>

Attributes

Attribute	Description
`center`	Position to center the map at (`longitude, latitude`)
`zoom`	Zoom level (0-21 - you probably want something in the range 18-21)
`layers`	A string of layer IDs which will be visible. This is the same as the string in the URL at https://map.emfcamp.org (e.g. `a,b,p,t`)
`marker`	Marker position (`longitude, latitude`)
`clickForMarker`	Whether the marker can be placed by clicking the map
`navControls`	Whether to show additional navigation controls (zoom buttons, geolocate)
`urlHash`	Whether to update the browser URL to save the map position

Events

The following events are sent by the map component. These can be listened to in the normal DOM way, using addEventListener.

Event	Description
`load`	Emitted when the map has loaded. Can be used to do further customisation. The `map` attribute of the event is the MapLibre map instance.
`marker`	Emitted when the marker is set, either through the `clickForMarker` feature or the context menu. The `coords` attribute of the event contains the coordinates, or `undefined` if the marker is cleared.

Content-Security-Policy

It appears you need to add worker-src: blob: as well as script-src: https://map.emfcamp.org.

Example

(view source to see how this works)