API Reference — async-map-modal

showMapModal(options)

Opens the map modal. Returns Promise<{ lat, lng } | null> in single-select mode, Promise<Array<{ lat, lng }> | null> in multi-select mode.

Mode

Example — single:

const result = await asyncMapModal.show({ leaflet: L });
// result: { lat: 39.93, lng: 32.85 } or null

Example — multiple:

const points = await asyncMapModal.show({ multiSelect: true, leaflet: L });
// points: [{ lat, lng }, ...] or null

Title and button labels

asyncMapModal.show({
  title: 'Select delivery address',
  confirmText: 'Deliver here',
  cancelText: 'Cancel',
  copyText: 'Copy coordinates',
  leaflet: L,
});

Map initial values

asyncMapModal.show({
  initialCenter: [41.0082, 28.9784],
  initialZoom: 11,
  mapHeight: '50vh',
  leaflet: L,
});

Marker

const customIcon = L.divIcon({
  className: 'my-marker',
  html: '<span class="pin"></span>',
  iconSize: [24, 24],
  iconAnchor: [12, 24],
});
asyncMapModal.show({ markerIcon: customIcon, leaflet: L });

Multi-select only

asyncMapModal.show({
  multiSelect: true,
  initialPoints: [
    { lat: 39.9255, lng: 32.8663 },
    [41.0082, 28.9784],
  ],
  maxPoints: 10,
  leaflet: L,
});

Selection bounds

Restrict selectable coordinates. Two options:

asyncMapModal.show({
  bounds: [[39.5, 32.0], [42.0, 35.0]],
  initialCenter: [40.5, 33.5],
  leaflet: L,
});

Tile layer

asyncMapModal.show({
  tileLayerUrl: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
  tileLayerAttribution: '© CARTO',
  tileLayerMaxZoom: 19,
  leaflet: L,
});

Language and theme

asyncMapModal.show({
  language: 'en',
  darkMode: 'dark',
  leaflet: L,
});

Leaflet reference

import L from 'leaflet';
const result = await asyncMapModal.show({ leaflet: L });

init(options)

Sets project-wide default language and theme. Subsequent showMapModal calls merge these with their options; per-call language / darkMode take precedence.

asyncMapModal.init({
  language: 'en',
  darkMode: 'auto',
});

getConfig()

Returns current project defaults (copy). Use init, setTheme, or setLanguage to change them.

Returns: { language: string | undefined, darkMode: string | undefined }

const config = asyncMapModal.getConfig();
console.log(config.language, config.darkMode);

setTheme(theme)

Sets default theme. Used by showMapModal when options.darkMode is not provided.

asyncMapModal.setTheme('dark');

setLanguage(lang)

Sets default language code.

asyncMapModal.setLanguage('en');

Parameter summary table