Map (@webwriter/[email protected])

License: MIT | Version: 2.2.0

Geographical map with different terrain options including custom tiling, and GeoJSON support.

Snippets

Snippets are examples and templates using the package's widgets.

| Name | Import Path | | :--: | :---------: | | Example Location | @webwriter/map/snippets/Example-Location.html |

WwMap (<webwriter-map>)

Geographical map with different terrain options including custom tiling, and GeoJSON support.

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/map/widgets/webwriter-map.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/map/widgets/webwriter-map.js"></script>
<webwriter-map></webwriter-map>

Or use with a bundler (e.g. Vite):

npm install @webwriter/map

<link href="@webwriter/map/widgets/webwriter-map.css" rel="stylesheet">
<script type="module" src="@webwriter/map/widgets/webwriter-map.js"></script>
<webwriter-map></webwriter-map>

Fields

| Name (Attribute Name) | Type | Description | Default | Reflects | | :-------------------: | :--: | :---------: | :-----: | :------: | | initialPos (initialPos) | { lat: number; lng: number; } | Initial center position of the map.Expected value: object { lat: number, lng: number } (e.g. { lat: 51, lng: 19 }).Optional; when set via attribute, pass a JSON string (e.g. '{"lat":51,"lng":19}'). | { lat: 51, lng: 10, } | ✓ | | mapBounds (mapBounds) | L.LatLngBoundsExpression | Maximum bounding box for panning the map.Expected value: Leaflet LatLngBoundsExpression (e.g. [[northLat, westLng], [southLat, eastLng]]).Optional; when set via attribute, pass a JSON string (e.g. '[[51,6],[50,7]]'). | - | ✓ | | maxZoom (maxZoom) | number | Maximum zoom level allowed when boundsActive is true.Expected value: number (Leaflet zoom level).Optional. | - | ✓ | | minZoom (minZoom) | number | Minimum zoom level allowed.Expected value: number (Leaflet zoom level).Optional. | - | ✓ | | initialZoom (initialZoom) | number | Initial zoom level when the map is created.Expected value: number (Leaflet zoom level).Optional. | 5 | ✓ | | fixedZoom (fixedZoom) | number | Fixed zoom level to enforce when panning is not allowed for viewers (non-edit contexts).Expected value: number (Leaflet zoom level).Optional. | 1 | ✗ | | markers (markers) | array | Static pin markers to display on the map.Expected value: array of { lat: number, lng: number, title?: string }.Optional; when set via attribute, pass a JSON string. | [] | ✓ | | objects (objects) | object | Persisted drawing objects (rectangles, circles, polygons, polylines), keyed by id.Expected value: map id -> { id, type, latlngs, radius?, borderColor, fillColor, borderOpacity, fillOpacity, label? }.Optional; when set via attribute, pass a JSON string. | {} | ✓ | | customTileUrl (customTileUrl) | string | Custom tile URL template to use for the base map layer.Expected value: string URL template containing {z}/{x}/{y}.Optional; when empty, the default base layer is used. | '' | ✓ | | vectorStyle (vectorStyle) | string \| undefined | MapLibre GL style URL for vector tile rendering (e.g. OpenFreeMap).Expected value: URL to a MapLibre style JSON (e.g. 'https://tiles.openfreemap.org/styles/liberty').When set, this takes priority over customTileUrl and the default raster layers. | undefined | ✓ | | geoJSON (geoJSON) | string | GeoJSON overlay to render on the map.Expected value: stringified GeoJSON (Feature or FeatureCollection).Optional; when empty/falsy, no GeoJSON overlay is shown. | '' | ✓ | | mapWidth (mapWidth) | number | Map container width, as a percentage of the host element's width.Expected value: number (0–100). Applied as CSS width: ${mapWidth}%.Optional. | 100 | ✓ | | mapHeight (mapHeight) | number | Map container height in pixels.Expected value: number (pixels). Applied as CSS height: ${mapHeight}px.Optional. | 500 | ✓ | | boundsActive (boundsActive) | boolean | Whether to enforce mapBounds and maxZoom constraints on the map.Expected value: boolean; when true and mapBounds is set, panning is constrained to those bounds.Optional. | true | ✓ |

Fields including properties and attributes define the current state of the widget and offer customization options.

Editing config

| Name | Value | | :--: | :---------: |

The editing config defines how explorable authoring tools such as WebWriter treat the widget.

No public methods, slots, events, custom CSS properties, or CSS parts.

Generated with @webwriter/[email protected]