Map (@webwriter/map@2.1.2)

License: MIT | Version: 2.1.2

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.

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/build@1.9.0