Map
A native map with no tile provider. It draws open data, paints its own looks, colours countries by value, places markers, and splits a focused country into city zones.
World
Drag to pan, scroll or pinch to zoom, and use the buttons. The land and lakes come from Natural Earth and grow finer as you zoom in. The looks switcher paints the map itself.
<neura::map
:center="[20, 10]"
:zoom="1.6"
map-style="standard"
:map-styles="['standard', 'atlas', 'blueprint', 'dots']"
height="360px"
label="World map"
/>Values
Pass ISO country codes to
values. The map joins them on ISO_A2_EH, then ISO_A2, and paints a scale. Hover a country for its name and value.
<neura::map
map-style="atlas"
:values="[
'US' => 420,
'FR' => 140,
'DE' => 190,
'JP' => 200,
]"
:fit="true"
height="360px"
/>Markers
Each marker needs
lat and lng. An optional popup opens on click. Values and markers travel in data-map, so a Livewire update redraws them without rebuilding the map.
<neura::map
:markers="[
[
'lat' => 40.71,
'lng' => -74.01,
'label' => 'New York',
'popup' => 'Americas hub · 42 people',
'color' => 'primary',
],
[
'lat' => 51.51,
'lng' => -0.13,
'label' => 'London',
'popup' => 'EMEA hub · 28 people',
'color' => 'success',
],
]"
:fit="true"
/>One country
country frames that country alone and loads its cities from Natural Earth’s populated places. Each city gets its own colour, or the shade from city-values. The country is split into the zone of each city — the part closer to it — with lines between them.
<neura::map
country="FR"
map-style="paper"
:city-values="[
'Paris' => 220,
'Lyon' => 95,
'Marseille' => 80,
'Toulouse' => 60,
]"
height="420px"
/>Zones off
Pass
:zones="false" to keep only the city dots and their labels. The Voronoi split is drawn by the map when a country is focused; it does nothing on a world view.
<neura::map
country="FR"
map-style="atlas"
:city-values="$cityValues"
:zones="false"
height="420px"
/>Looks
Six built-in looks:
standard (follows the kit tokens), dark, atlas, blueprint, paper, and dots. Add your own through the Packs\Map\Style pack.
Blueprint
Dots
<neura::map map-style="blueprint" :controls="false" />
<neura::map map-style="dots" :controls="false" />Events
The map dispatches Alpine / Livewire events from the root:
map-click, map-feature-click, map-marker-click, map-city-click, map-move, and map-style.
<div
x-on:map-feature-click="…"
x-on:map-marker-click="…"
x-on:map-city-click="…"
x-on:map-style="…"
>
<neura::map country="FR" :city-values="$cityValues" />
</div>Props
| Prop | Default | Role |
|---|---|---|
| center | [20, 0] | Latitude and longitude of the first view |
| zoom | 2 | Initial zoom level |
| min-zoom / max-zoom | 1 / 7 | Zoom limits |
| map-style | standard | Look: standard, dark, atlas, blueprint, paper, dots |
| map-styles | null | Looks offered in the switcher |
| land / lakes | countries / lakes | Dataset name, URL, GeoJSON, or false to hide |
| geojson | null | GeoJSON or TopoJSON overlay (URL or data) |
| country | null | ISO code that frames one country and its cities |
| cities | places when country is set | Dataset for cities, or false to hide them |
| zones | true | When a country is focused, split it into each city’s zone |
| values | [] | ISO code → number, colours the countries |
| city-values | [] | City name → number, colours the cities |
| markers | [] | lat, lng, and optional label, popup, color |
| fit | false | Frame the values, markers, or overlay |
| graticule / labels | true | Grid lines and country labels |
| scroll-zoom | true | Wheel zoom over the map |
| controls | true | Zoom buttons |
| height | 420px | CSS height of the map |
| variant | card | card draws a border; minimal is bare |
| label | null | Accessible name of the map region |