Maps without the friction.

mbl-mapman gives you a clean D3-powered world map with searchable cities, reactive markers, and a full event API. No API key. No tiles. No bloat.

Live component

Search a city, drop a pin

Hover a marker to see city details. Location info is provided by GeoNames — if a searched city isn't in their database, details will show for the nearest known location instead.

Install

terminal

npm install @madebylars.com/mbl-mapman

Configuration

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@madebylars.com/mbl-mapman'],
})

Usage

pages/map.vue

<script setup>
const { markers, searchCities, addMarker, removeMarker } = useMapman()

// Search cities by name (OpenStreetMap Nominatim, no API key)
const results = await searchCities('Berlin')

// Add a marker with arbitrary custom data
addMarker({
  id: 'berlin',
  lat: results[0].lat,
  lng: results[0].lng,
  data: { city: 'Berlin', population: 3_645_000 },
})
</script>

<template>
  <WorldMap
    :markers="markers"
    @marker-click="onMarkerClick"
    @marker-mouseenter="onHover"
    land-color="#1e3a2e"
    sea-color="#0f1f33"
    marker-color="#34d399"
  />
</template>

Events

pages/map.vue

<WorldMap
  :markers="markers"
  @marker-click="({ marker, event }) => console.log(marker.data)"
  @marker-mouseenter="showTooltip"
  @marker-mouseleave="hideTooltip"
/>

WorldMap props

Prop	Type	Default
markers	MapMarker[]	[]
landColor	string	'#2d5a3d'
seaColor	string	'#1a3a5c'
borderColor	string	'rgba(255,255,255,0.2)'
markerColor	string	'#ff6b6b'
markerRadius	number	6
markerHoverColor	string	'#ff3333'
markerHoverRadius	number	9