Interactive maps

Leaflet powers the reusable map. Geometry, markers, and tile-provider decisions belong to your application.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

/**
 * Integrate interactive maps into an application-owned route.
 *
 * @author Laurent Declercq l.declercq@agon-innovation.ch
 * @version 20260921
 */
import { mapView } from '@agon/atrium/components/map';

/**
 * Register a map owned by this application route.
 *
 * @param {object} context - Shared Alpine runtime.
 * @returns {void} Registers the map provider.
 */
export function register(context) {
  context.Alpine.data('officeMap',
    /**
     * Create a map centered on the office.
     *
     * @returns {object} Map provider.
     */
    () => mapView({
      center: [
        47.38,
        8.54,
      ],
      zoom: 5,
      markers: [
        {
          lat: 47.38,
          lng: 8.54,
          label: 'Zurich office',
        },
      ],
    }));
}

<section x-data="officeMap">
  <h1 tabindex="-1">Offices</h1>
  <include src="{{ uiRoot }}/map.html"></include>
</section>

Settings and behavior

• Required options are center as [latitude, longitude] and zoom.
• Optional markers contain lat, lng, and label. Labels are inserted as text, never HTML.
• Optional geometry is a trusted GeoJSON object.
• Optional tiles contains url and attribution. No provider is selected automatically.
• The shared template starts loading when the user presses Load map. Use x-init=“start” to start on mount.
• command(“locate”, marker), command(“zoom”, delta), and command(“reset”) expose map actions.
• start replaces the previous map. stop and destroy release layers and observers.
• The rendering host must have a height. The shared template supplies a responsive height.

Integration notes

The minimal example intentionally has no basemap. Supply your own GeoJSON or authorized tiles for geographic context. The showcase includes local Natural Earth geometry and never fetches external tiles. For remote tiles, configure attribution, provider terms, credentials, and your deployment’s img-src policy. The tile attribution field is trusted developer HTML and must never receive untrusted user content. Markers also need a readable location list for users who cannot operate a visual map. See the Leaflet reference.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921