@geoimpact/sep-map-sdk 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -0
- package/dist/index.d.ts +2485 -0
- package/dist/sep-map-sdk.css +1 -0
- package/dist/sep-map.esm.js +50 -0
- package/dist/sep-map.esm.js.map +1 -0
- package/dist/sep-map.js +2 -0
- package/dist/sep-map.js.map +1 -0
- package/dist/sep-map.umd.js +2 -0
- package/dist/sep-map.umd.js.map +1 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# @geoimpact/sep-map-sdk
|
|
2
|
+
|
|
3
|
+
The official React-based map SDK for Swiss Energy Planning (SEP) applications by geoimpact.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- πΊοΈ **Interactive Map**: Built on Leaflet with high-performance vector tiles.
|
|
8
|
+
- π **Address Search**: Integrated Swiss address search with autocomplete.
|
|
9
|
+
- π **Perimeter Selection**: Select and interact with building/land perimeters.
|
|
10
|
+
- π¨ **Customizable**: extensive styling options and layer management.
|
|
11
|
+
- π **Web Component**: Works in React, Vue, Angular, or Vanilla JS.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @geoimpact/sep-map-sdk
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### React
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { SEPMapSDK } from '@geoimpact/sep-map-sdk';
|
|
25
|
+
import { useEffect, useRef } from 'react';
|
|
26
|
+
// Import CSS (required)
|
|
27
|
+
import '@geoimpact/sep-map-sdk/dist/style.css';
|
|
28
|
+
|
|
29
|
+
function MapComponent() {
|
|
30
|
+
const containerRef = useRef(null);
|
|
31
|
+
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (!containerRef.current) return;
|
|
34
|
+
|
|
35
|
+
const map = new SEPMapSDK({
|
|
36
|
+
container: containerRef.current,
|
|
37
|
+
clientId: 'YOUR_CLIENT_ID',
|
|
38
|
+
token: 'YOUR_JWT_TOKEN', // Optional: if using authenticated layers
|
|
39
|
+
features: {
|
|
40
|
+
addressSearch: true,
|
|
41
|
+
perimeterSelection: true
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
return () => map.destroy();
|
|
46
|
+
}, []);
|
|
47
|
+
|
|
48
|
+
return <div ref={containerRef} style={{ height: '600px' }} />;
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Vanilla JS / Web Component
|
|
53
|
+
|
|
54
|
+
You can also use the SDK via a script tag or as a web component.
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<link rel="stylesheet" href="path/to/sep-map-sdk.css">
|
|
58
|
+
<script src="path/to/sep-map.umd.js"></script>
|
|
59
|
+
|
|
60
|
+
<div id="map" style="height: 600px;"></div>
|
|
61
|
+
|
|
62
|
+
<script>
|
|
63
|
+
const map = new SEPMapSDK({
|
|
64
|
+
container: '#map',
|
|
65
|
+
clientId: 'YOUR_CLIENT_ID'
|
|
66
|
+
});
|
|
67
|
+
</script>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Configuration
|
|
71
|
+
|
|
72
|
+
| Option | Type | Required | Description |
|
|
73
|
+
|--------|------|----------|-------------|
|
|
74
|
+
| `clientId` | `string` | Yes | Your application client ID. |
|
|
75
|
+
| `container` | `HTMLElement \| string` | Yes | DOM element or selector to mount the map. |
|
|
76
|
+
| `token` | `string` | No | JWT token for authenticated services. |
|
|
77
|
+
| `language` | `'de' \| 'fr' \| 'it' \| 'en'` | No | Initial language (default: 'de'). |
|
|
78
|
+
| `features` | `FeatureConfig` | No | Enable/disable specific features. |
|
|
79
|
+
|
|
80
|
+
## License
|
|
81
|
+
|
|
82
|
+
Proprietary - geoimpact AG
|