@geoimpact/sep-map-sdk

The official React-based map SDK for Swiss Energy Planning (SEP) applications by geoimpact.

Features

• 🗺️ Interactive Map: Built on Leaflet with high-performance vector tiles.
• 🔍 Address Search: Integrated Swiss address search with autocomplete.
• 📐 Perimeter Selection: Select and interact with building/land perimeters.
• 🎨 Customizable: extensive styling options and layer management.
• 🌐 Web Component: Works in React, Vue, Angular, or Vanilla JS.

Installation

npm install @geoimpact/sep-map-sdk

Usage

React

import { SEPMapSDK } from '@geoimpact/sep-map-sdk';
import { useEffect, useRef } from 'react';
// Import CSS (required)
import '@geoimpact/sep-map-sdk/dist/sep-map-sdk.css';

function MapComponent() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const map = new SEPMapSDK({
      container: containerRef.current,
      token: 'YOUR_JWT_TOKEN', // Optional: if using authenticated layers
      features: {
        addressSearch: true,
        perimeterSelection: true
      }
    });

    return () => map.destroy();
  }, []);

  return <div ref={containerRef} style={{ height: '600px' }} />;
}

Vanilla JS / Web Component

You can also use the SDK via a script tag or as a web component.

<link rel="stylesheet"
      href="https://sos-ch-gva-2.exo.io/geoimpact-cdn/sep-map-sdk/1.x/sep-map-sdk.css">
<script src="https://sos-ch-gva-2.exo.io/geoimpact-cdn/sep-map-sdk/1.x/sep-map.js"></script>

<div id="map" style="height: 600px;"></div>

<script>
  const map = new SEPMapSDK({
    container: '#map',
    token: 'YOUR_JWT_TOKEN'
  });
</script>

CDN Versioning

The SDK is available via CDN with semantic versioning aliases:

| URL Pattern | Example | Description | |------------------------|------------|----------------------------------------------------------------------| | /{version}/ | /1.2.3/ | Exact version - never changes (recommended for production) | | /{major}.{minor}.x/ | /1.2.x/ | Auto-updates with patch releases (bug fixes) | | /{major}.x/ | /1.x/ | Auto-updates with minor releases (new features, no breaking changes) | | /latest/ | /latest/ | Always the newest version (for development only) |

Recommended for production:

<!-- Option 1: Pinned version (maximum stability) -->
<script src="https://sos-ch-gva-2.exo.io/geoimpact-cdn/sep-map-sdk/1.0.1/sep-map.js"></script>

<!-- Option 2: Auto-patch updates (recommended) -->
<script src="https://sos-ch-gva-2.exo.io/geoimpact-cdn/sep-map-sdk/1.0.x/sep-map.js"></script>

For development/testing:

<script src="https://sos-ch-gva-2.exo.io/geoimpact-cdn/sep-map-sdk/latest/sep-map.js"></script>

Configuration

| Option | Type | Required | Description | | ----------- | ------------------------------ | -------- | ----------------------------------------- | | container | HTMLElement \| string | Yes | DOM element or selector to mount the map. | | token | string | Yes | JWT token for authenticated services. | | language | 'de' \| 'fr' \| 'it' \| 'en' | No | Initial language (default: 'de'). | | features | FeatureConfig | No | Enable/disable specific features. |

License

Proprietary - geoimpact AG