A custom Leaflet-based map SDK
npm install datamicron_dsm-map-sdk
import { MapSDK } from 'datamicron_dsm-map-sdk';
import React, { useEffect, useRef } from 'react';
function App() {
const mapContainerRef = useRef(null);
const mapInstanceRef = useRef(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: "© 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 (
ref={mapContainerRef}
style={{
width: "100%",
height: "100vh",
border: "1px solid #ccc",
borderRadius: "8px",
}}
/>
);
}
export default App;
`
Context Menu Feature
The SDK now supports right-click context menu to copy coordinates:
$3
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
$3
`typescript
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.
}
}
`
$3
`typescript
contextMenu: {
enabled: true,
onCopyCoordinates: (coordinates) => {
// Show success message to user
alert(Copied: ${coordinates.latitude}, ${coordinates.longitude});
}
}
``