{ "definitions": { "events": { "$ref": "#/definitions/Events", "$schema": "http://json-schema.org/draft-07/schema#", "definitions": { "Events": { "additionalProperties": false, "properties": { "markerClick": { "additionalProperties": false, "properties": { "coordinates": { "additionalProperties": false, "properties": { "latitude": { "type": "number" }, "longitude": { "type": "number" } }, "required": [ "latitude", "longitude" ], "type": "object" }, "id": { "description": "From feature metadata when `marker.id` is set; may be missing.", "type": "string" } }, "required": [ "coordinates" ], "type": "object" }, "pointClickCoordinates": { "additionalProperties": false, "properties": { "center": { "items": { "type": "number" }, "type": "array" }, "coordinates": { "additionalProperties": false, "properties": { "latitude": { "type": "number" }, "longitude": { "type": "number" } }, "required": [ "latitude", "longitude" ], "type": "object" }, "zoom": { "type": "number" } }, "required": [ "coordinates", "zoom", "center" ], "type": "object" }, "screenshotTaken": { "additionalProperties": false, "properties": { "base64": { "type": "string" } }, "required": [ "base64" ], "type": "object" } }, "required": [ "pointClickCoordinates", "markerClick", "screenshotTaken" ], "type": "object" } } }, "component": { "$ref": "#/definitions/Component", "$schema": "http://json-schema.org/draft-07/schema#", "definitions": { "Component": { "additionalProperties": false, "properties": { "center": { "items": { "type": "number" }, "type": "array" }, "data": { "items": { "additionalProperties": false, "properties": { "line": { "items": { "additionalProperties": false, "properties": { "icon": { "additionalProperties": false, "properties": { "anchor": { "items": { "type": "number" }, "type": "array" }, "color": { "type": "string" }, "opacity": { "type": "number" }, "scale": { "type": "number" }, "uri": { "type": "string" } }, "required": [ "uri" ], "type": "object" }, "id": { "type": "string" }, "lngLat": { "items": { "type": "number" }, "type": "array" }, "popupHtml": { "type": "string" } }, "required": [ "lngLat" ], "type": "object" }, "type": "array" }, "marker": { "additionalProperties": false, "properties": { "icon": { "additionalProperties": false, "properties": { "anchor": { "items": { "type": "number" }, "type": "array" }, "color": { "type": "string" }, "opacity": { "type": "number" }, "scale": { "type": "number" }, "uri": { "type": "string" } }, "required": [ "uri" ], "type": "object" }, "id": { "type": "string" }, "lngLat": { "items": { "type": "number" }, "type": "array" }, "popupHtml": { "type": "string" }, "text": { "type": "string" }, "text_offset": { "type": "number" }, "text_position": { "enum": [ "top", "right", "bottom", "left" ], "type": "string" } }, "required": [ "lngLat" ], "type": "object" }, "point": { "additionalProperties": false, "properties": { "icon": { "additionalProperties": false, "properties": { "anchor": { "items": { "type": "number" }, "type": "array" }, "color": { "type": "string" }, "opacity": { "type": "number" }, "scale": { "type": "number" }, "uri": { "type": "string" } }, "required": [ "uri" ], "type": "object" }, "id": { "type": "string" }, "lngLat": { "items": { "type": "number" }, "type": "array" }, "popupHtml": { "type": "string" } }, "required": [ "lngLat" ], "type": "object" } }, "type": "object" }, "type": "array" }, "id": { "type": "string" }, "options": { "additionalProperties": false, "properties": { "centerFromGeometries": { "type": "boolean" }, "text_offset": { "type": "number" }, "text_position": { "enum": [ "top", "right", "bottom", "left" ], "type": "string" }, "text_scale": { "type": "number" } }, "type": "object" }, "screenshot": { "type": "string" }, "source": { "additionalProperties": false, "properties": { "boundaries_only": { "description": "When `true`, only the vector `boundary` layer is drawn (no land, roads, water fill, etc.).", "type": "boolean" }, "boundary_admin_levels": { "description": "Optional JSON array string of OSM `admin_level` values to keep for `boundary` features, e.g. `\"[2]\"` for country borders, `\"[2,4]\"` for countries plus common internal divisions. Omit or empty to show all boundaries present in the tiles at the current zoom.", "type": "string" }, "national_boundaries_only": { "description": "When `true`, only international / country boundaries (`admin_level` 2) are drawn; internal regional lines are hidden. Combines with `boundary_admin_levels` by intersection (e.g. if the JSON list excludes `2`, no boundaries render). National lines use a solid stroke; when `false`, level 2 stays solid and other levels stay dashed.", "type": "boolean" }, "style": { "description": "Basemap palette for light UI. In dark color scheme (`prefers-color-scheme: dark` or `data-theme=\"dark\"` / `.theme-dark` on host or document), `dark_matter` is always used.", "enum": [ "positron", "dark_matter", "voyager" ], "type": "string" }, "type": { "type": "string" }, "url": { "type": "string" } }, "required": [ "type" ], "type": "object" }, "style": { "type": "string" }, "zoom": { "type": "number" } }, "required": [ "zoom", "center", "data", "source", "options" ], "type": "object" } } } }, "description": "Interactive map: `center`, `zoom`, `source` (OSM or CARTO vector styles), `options` (e.g. `centerFromGeometries`, marker text layout), and `data` with markers (lng/lat, icon, popup HTML, text). CARTO vector uses `source.style` in light mode; in dark mode it always uses the `dark_matter` palette. Country names only from the `place` layer (`class: country`). `boundaries_only`, `national_boundaries_only`, and optional `boundary_admin_levels` control boundary lines. OSM tiles invert when dark (same hooks as `prefers-color-scheme: dark`). Set `screenshot` to capture; emits map clicks, marker clicks, and screenshot payloads.", "storybookArgs": { "options": { "control": { "type": "object" } }, "center": { "control": { "type": "array" } }, "data": { "control": { "type": "array" } }, "zoom": { "control": { "type": "number" } }, "source": { "control": { "type": "object" } }, "screenshot": { "control": { "type": "text" } }, "pointClickCoordinates": { "action": "pointClickCoordinates" }, "markerClick": { "action": "markerClick" }, "screenshotTaken": { "action": "screenshotTaken" } }, "styleSetup": { "vars": [ { "name": "--bulma-scheme-main", "valueType": "color", "defaultValue": "#ffffff", "description": "Host background behind the map canvas." }, { "name": "--hb-map-default-size", "valueType": "string", "defaultValue": "200px", "description": "Fallback width and height when width/height vars are unset." }, { "name": "--hb-map-width", "valueType": "string", "defaultValue": "", "description": "Optional explicit host width (defaults to `--hb-map-default-size`)." }, { "name": "--hb-map-height", "valueType": "string", "defaultValue": "", "description": "Optional explicit host height (defaults to `--hb-map-default-size`)." } ], "parts": [] }, "contributors": [], "htmlSlots": [], "i18n": [], "examples": [ { "name": "default", "description": "OSM raster basemap", "data": { "center": [ 10, 10 ], "zoom": 9, "source": { "type": "osm" }, "options": { "centerFromGeometries": true }, "data": [ { "marker": { "lngLat": [ 10.1, 10 ], "icon": { "uri": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Visual_Studio_Code_Insiders_1.36_icon.svg", "scale": 0.15, "anchor": [ 0.5, 0.1 ] }, "popupHtml": "

You clicked here:

ciao" } }, { "marker": { "lngLat": [ 10, 10 ], "popupHtml": "

You clicked here:

ciao" } }, { "marker": { "lngLat": [ 10.3, 10 ] } } ] } }, { "name": "default2", "description": "CARTO vector Voyager — Paris", "data": { "center": [ 2.3522, 48.8566 ], "zoom": 11, "source": { "type": "carto_vector", "style": "voyager" }, "options": { "centerFromGeometries": true }, "data": [ { "marker": { "lngLat": [ 2.36, 48.86 ], "icon": { "uri": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Visual_Studio_Code_Insiders_1.36_icon.svg", "scale": 0.15, "anchor": [ 0.5, 0.1 ] }, "popupHtml": "

You clicked here:

ciao" } }, { "marker": { "lngLat": [ 2.3522, 48.8566 ], "popupHtml": "

You clicked here:

ciao" } }, { "marker": { "lngLat": [ 2.33, 48.85 ] } } ] } }, { "name": "markerWithText", "description": "CARTO Positron — Berlin; markers with text (global position / offset + per-marker overrides)", "data": { "center": [ 13.405, 52.52 ], "zoom": 12, "source": { "type": "carto_vector", "style": "positron" }, "options": { "centerFromGeometries": true, "text_position": "right", "text_offset": 8 }, "data": [ { "marker": { "lngLat": [ 13.405, 52.52 ], "icon": { "uri": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Visual_Studio_Code_Insiders_1.36_icon.svg", "scale": 0.15, "anchor": [ 0.5, 0.5 ] }, "text": "Uses global (right)" } }, { "marker": { "lngLat": [ 13.42, 52.518 ], "icon": { "uri": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Visual_Studio_Code_Insiders_1.36_icon.svg", "scale": 0.15, "anchor": [ 0.5, 0.5 ] }, "text": "Override: left", "text_position": "left" } }, { "marker": { "lngLat": [ 13.4, 52.515 ], "icon": { "uri": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Visual_Studio_Code_Insiders_1.36_icon.svg", "scale": 0.15, "anchor": [ 0.5, 0.5 ] }, "text": "Override: top", "text_position": "top" } }, { "marker": { "lngLat": [ 13.415, 52.508 ], "icon": { "uri": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Visual_Studio_Code_Insiders_1.36_icon.svg", "scale": 0.15, "anchor": [ 0.5, 0.5 ] }, "text": "Override: bottom", "text_position": "bottom" } }, { "marker": { "lngLat": [ 13.398, 52.522 ], "icon": { "uri": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Visual_Studio_Code_Insiders_1.36_icon.svg", "scale": 0.15, "anchor": [ 0.5, 0.5 ] }, "text": "Override: gap 20px", "text_offset": 20 } } ] } }, { "name": "markerWithLargeText", "description": "CARTO Dark Matter — London; text_scale: 1.5", "data": { "center": [ -0.1276, 51.5074 ], "zoom": 12, "source": { "type": "carto_vector", "style": "dark_matter" }, "options": { "centerFromGeometries": true, "text_scale": 1.5 }, "data": [ { "marker": { "lngLat": [ -0.1276, 51.5074 ], "icon": { "uri": "https://upload.wikimedia.org/wikipedia/commons/4/4b/Visual_Studio_Code_Insiders_1.36_icon.svg", "scale": 0.15, "anchor": [ 0.5, 0.5 ] }, "text": "Large text" } } ] } }, { "name": "textOnly", "description": "CARTO Positron — Amsterdam; label without icon", "data": { "center": [ 4.9041, 52.3676 ], "zoom": 12, "source": { "type": "carto_vector", "style": "positron" }, "options": { "centerFromGeometries": true }, "data": [ { "marker": { "lngLat": [ 4.9041, 52.3676 ], "text": "Text only (no icon)" } } ] } }, { "name": "cartoVoyager", "description": "CARTO vector tiles with Voyager style (default, colorful)", "data": { "center": [ 12.4964, 41.9028 ], "zoom": 12, "source": { "type": "carto_vector", "style": "voyager" }, "options": {}, "data": [] } }, { "name": "cartoPositron", "description": "CARTO Positron — Barcelona (light, minimal)", "data": { "center": [ 2.1734, 41.3851 ], "zoom": 12, "source": { "type": "carto_vector", "style": "positron" }, "options": {}, "data": [] } }, { "name": "cartoDarkMatter", "description": "CARTO Dark Matter — New York (dark basemap)", "data": { "center": [ -74.006, 40.7128 ], "zoom": 11, "source": { "type": "carto_vector", "style": "dark_matter" }, "options": {}, "data": [] } }, { "name": "cartoBoundariesOnly", "description": "CARTO Dark Matter: boundaries_only + national_boundaries_only (country borders, solid); Europe overview", "data": { "center": [ 10.5, 51 ], "zoom": 4, "source": { "type": "carto_vector", "style": "dark_matter", "boundaries_only": true, "national_boundaries_only": true }, "options": {}, "data": [] } }, { "name": "cartoFullBasemapNationalBorders", "description": "Full CARTO Voyager basemap with regional boundaries hidden (national_boundaries_only)", "data": { "center": [ 12.4964, 41.9028 ], "zoom": 6, "source": { "type": "carto_vector", "style": "voyager", "national_boundaries_only": true }, "options": {}, "data": [] } }, { "name": "screenshot", "description": "CARTO Voyager — Tokyo; set screenshot to 'yes' for base64 via screenshotTaken", "data": { "center": [ 139.6917, 35.6895 ], "zoom": 11, "source": { "type": "carto_vector", "style": "voyager" }, "options": {}, "screenshot": "yes", "data": [] } } ], "iifeIntegrity": "sha384-itbcrsHcUWa5WJcrRxBh+g7yDyDl3g65lx87cCYSBe99SV31pupeIMuTvxDWhtRk", "dependencies": [], "screenshots": [], "licenses": [ { "type": "Apache-2.0", "path": "LICENSE.md", "cost": 0, "currency": "EUR" } ], "readmePath": "README.md", "name": "hb-map", "category": "maps", "tags": [ "maps" ], "size": {}, "iifePath": "main.iife.js", "repoName": "@htmlbricks/hb-map", "version": "0.76.5" }