CERN Map Overlay

A web component that displays a map overlay of CERN accelerators using Leaflet.

Development

Install dependencies and start the dev server:

``bash
pnpm install
pnpm dev
`

Open http://localhost:5173 in your browser to view the demo.

Build

`bash
pnpm build
`

The build outputs the distribution files in the dist directory, including:

- cern-map-overlay.es.js (ES module)
- cern-map-overlay.iife.js (IIFE build)
- index.html (stand‑alone demo)

Usage

$3

You can include the component directly in your HTML using unpkg.com:

ES Module (recommended for modern browsers and build systems):

`html


`

IIFE Bundle (for direct script inclusion in older environments):

`html


`

Alternatively, if you are serving the files locally from the dist directory:

IIFE Bundle:

`html


`

ES Module:

`html


`

$3

Install the package from npm (or pnpm/yarn):

`bash
npm install cern-map-overlay
`

Then import the component in your application code:

`js
import 'cern-map-overlay';
`

You can also import the accelerator definitions:

`js
import { LHC, SPS, PS, PSB, FCC, LINAC4, LINAC3, LEIR } from 'cern-map-overlay';
`

Simple Usage

The easiest way to show accelerators is using the show-accelerators attribute:

`html


`

This will automatically display the LHC and SPS accelerators on the map.

Examples

$3

Show individual accelerators:

`html


LINAC4

SPS

LHC

`

$3

Display multiple accelerators on the same map:

`html


LINAC4, Booster & PS

LHC & FCC

`

$3

Enable the geocoder search control and handle search events:

`html


Geocode


`

Advanced API Example

Here's a full example based on the demo in index.html. It shows how to wire up festival and geolocation controls to the map overlay:

`html



`

Component API

The element supports the following attributes:

| Attribute | Type | Description |
| ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
| enable-geocoder | boolean | Enables the geocoder search control when present. |
| lat | number | Initial map center latitude (use with lng). |
| lng | number | Initial map center longitude (use with lat). |
| show-accelerators | string | Comma-separated list of accelerators to display (e.g., "LHC,SPS"). Available: LINAC4, PSB, PS, SPS, LHC, FCC, LINAC3, LEIR. |

It also exposes several methods for customizing the map:

| Method | Description |
| ----------------------- | ---------------------------------------------------------------------------------------------- |
| setLocation(location) | Re-center the map and overlay based on a { lat: number, lng: number, name?: string } object. |
| addControl(control) | Adds a custom Leaflet control to the map. |
| addLayer(layer) | Adds a custom Leaflet layer to the map. |
| addMapEventListener()` | Attach event handlers to the underlying Leaflet map instance (e.g., 'zoomend'). |