Map Controls

A set of spartan/ui styled controls for the map.

Installation

Install npm install maplibre-gl and add the MapLibre styles

/*  styles.css */@import 'maplibre-gl/dist/maplibre-gl.css' layer(components);

<elb-geolocate-control /> reuses the native MapLibre geolocate control for its functionality, so hide the original one via CSS:

/*  styles.css */@layer base {  .maplibregl-ctrl-group {    &:has(*:is(.maplibregl-ctrl-geolocate)) {      display: none;    }  }}

Usage

Place the controls inside a <mgl-map>:

<mgl-map class="size-full" [mapStyle]="style" [center]="[9.99, 53.55]" [zoom]="8">  <elb-navigation-control />  <elb-geolocate-control />  <elb-fullscreen-control />  <elb-globe-control />  <elb-style-switcher    position="top-right"    orientation="vertical"    [options]="styleOptions"    [value]="styleService.styleName()"    (valueChange)="styleService.setStyle($event)"  /></mgl-map>

Use <elb-style-switcher> for a compact segmented control, or <elb-style-picker> for an icon-only trigger that opens a menu.

Examples

Map Control

Open in

Style Switcher

Open in

A compact segmented control for switching between a small number of styles.

<elb-style-switcher  position="top-right"  [options]="styleOptions"  [value]="styleService.styleName()"  (valueChange)="styleService.setStyle($event)"/>

Style Picker

Open in

An icon-only trigger that opens a menu with the available basemap styles.

<elb-style-picker  position="top-right"  [options]="styleOptions"  [value]="styleService.styleName()"  (valueChange)="styleService.setStyle($event)"/>