async-map-modal

Promise-based map modal: single or multiple coordinate selection, list with checkboxes, single/bulk delete.

Theme

Language

Demos

Single selection

Click once on the map to select a point. Returns { lat, lng } or null.

Multiple selection

Add multiple points, select and delete from the list with checkboxes, or clear all.

More examples

Custom icon (single selection)

Use red circle icon with markerIcon. Single point selection.

Custom icon (multiple selection)

Multiple selection with custom icon: green square marker.

Default points

Pre-filled points in the list when the modal opens via initialPoints (edit and click OK).

Features

Promise-based API (async/await)
Single / multiple point selection
Grid: map + selected list
Selection and delete with checkboxes
Leaflet (peer dependency)
ES module / CommonJS / global

API Reference (all parameters)

Full documentation with types, defaults and code examples:

Parameter documentation

showMapModal, init, getConfig, setTheme, setLanguage and all options are documented.

Usage

// Install
yarn add async-map-modal leaflet

// Leaflet + modal CSS on page (script + link)
// Single selection
const result = await asyncMapModal.show({ leaflet: L });
// result: { lat, lng } | null

// Multiple selection
const points = await asyncMapModal.show({ multiSelect: true, leaflet: L });

// Custom marker, initialPoints etc. via options
asyncMapModal.show({ markerIcon: redIcon, initialPoints: [...], leaflet: L });

// yarn add async-map-modal
import { useEffect, useState } from 'react';
import asyncMapModal from 'async-map-modal';
import 'leaflet/dist/leaflet.css';

// Modal CSS is imported automatically with the main module
// Get L from window or via dynamic import
const L = typeof window !== 'undefined' ? window.L : null;

function LocationPicker() {
  const [point, setPoint] = useState(null);

  const openModal = async () => {
    if (!L) return;
    const result = await asyncMapModal.show({ leaflet: L });
    if (result) setPoint(result);
  };

  return (
    <>
      <button onClick={openModal}>Select location</button>
      {point && <p>{point.lat}, {point.lng}</p>}
    </>
  );
}

// Renderer process: Leaflet + modal script/style must be loaded
// If using nodeIntegration: false with preload, get L in renderer via script tag

const { asyncMapModal } = require('async-map-modal');
const L = typeof window !== 'undefined' ? window.L : null;

// Open map modal in window
async function pickLocation() {
  if (!L) return;
  const result = await asyncMapModal.show({
    title: 'Select Location',
    leaflet: L,
    multiSelect: true,
  });
  return result;
}

// index.html (renderer): leaflet.css, leaflet.js, asyncMapModal.js (modal CSS included by main module if bundled)