Map (@webwriter/[email protected])

License: MIT | Version: 2.1.1

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: 19, } | ✓ | | 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. | 13 | ✓ | | 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. | '' | ✓ | | 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.

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

Generated with @webwriter/[email protected]