📦 dsm-map-sdk · Leaflet Map SDK for Web Apps ·

A lightweight, extensible Leaflet-based SDK for rendering interactive maps with support for GeoJSON layers, markers, circles, polygons, fullscreen control, and copyable coordinates via context menu.

Built with TypeScript. Ideal for dashboards, location tracking, analytics, and more.

Features

• GeoJSON layer support with auto-zoom
• Interactive markers, circles, and polygons
• Fullscreen control
• Right-click context menu to copy coordinates
• TypeScript support with full type definitions

Installation

npm i datamicron_dsm-map-sdk

🧠 Usage Example (React + TypeScript)

import { MapSDK } from 'datamicron_dsm-map-sdk';
import React, { useEffect, useRef } from 'react';

function App() {
  const mapContainerRef = useRef<HTMLDivElement | null>(null);
  const mapInstanceRef = useRef<MapSDK | null>(null);

  useEffect(() => {
    if (!mapContainerRef.current) return;

    mapInstanceRef.current = new MapSDK({
      container: mapContainerRef.current,
      configuration: {
        map: {
          coordinates: { latitude: 40.7128, longitude: -74.006 },
          defaultZoom: 10,
        },
        tile: {
          url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
          attribution: "&copy; OpenStreetMap contributors",
        },
        contextMenu: {
          enabled: true,
          onCopyCoordinates: (coordinates) => {
            console.log('Copied coordinates:', coordinates);
            // You can also show a notification here
          },
        },
      },
    });

    mapInstanceRef.current.addGeoJson({
      geojson: {},// your geoJson data
      sdkOptions: { autoZoom: true },
    });

    return () => {
      mapInstanceRef.current?.destroy();
      mapInstanceRef.current = null;
    };
  }, []);

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div
        ref={mapContainerRef}
        style={{
          width: "100%",
          height: "100vh",
          border: "1px solid #ccc",
          borderRadius: "8px",
        }}
      />
    </div>
  );
}

export default App;

Context Menu Feature

The SDK now supports right-click context menu to copy coordinates:

How it works:

1. User right-clicks anywhere on the map
2. A context menu appears showing the coordinates at that point
3. User clicks on "Copy (lat, lng)" to copy the coordinates to clipboard
4. Optional callback is triggered with the copied coordinates

Configuration:

contextMenu: {
  enabled: true, // Enable/disable context menu
  onCopyCoordinates: (coordinates) => {
    // This callback is called when user copies coordinates
    console.log('Latitude:', coordinates.latitude);
    console.log('Longitude:', coordinates.longitude);
    // You can show a toast notification, update state, etc.
  }
}

Example with notification:

contextMenu: {
  enabled: true,
  onCopyCoordinates: (coordinates) => {
    // Show success message to user
    alert(`Copied: ${coordinates.latitude}, ${coordinates.longitude}`);
  }
}