Maplibre Draw Component

A Svelte component that integrates Mapbox Draw with MapLibre/Mapbox for drawing and deleting geometries like points, lines, and polygons on a map. The component includes customizable event handlers for geometry creation, update, and deletion, along with toast notifications for user feedback.

Installation

Install the package using npm:

npm install @icgcat/mapdrawer

This package automatically installs the required dependencies, including @mapbox/mapbox-gl-draw and svelte-hot-french-toast for notifications.

Features

• Draw Modes: Draw points, lines, and polygons on the map.
• Custom Event Handlers:Trigger custom callbacks when geometries are created, updated, or deleted.
• Toast Notifications: Provides feedback to the user with toast messages from svelte-hot-french-toast.
• Material Icons: he component uses Material Icons for drawing controls.
• Seamless Integration: Easily integrates into any Svelte project using MapLibre/Mapbox maps.

Props

Customizable Properties

• map (required):The MapLibre/Mapbox map instance where the control will be added.
• onDrawCreate (optional): Callback triggered when a new geometry is created.
  • Parameters: event
• onDrawUpdate (optional): Callback triggered when an existing geometry is updated.
  • Parameters: event
• onDrawDelete (optional): Callback triggered when a geometry is deleted.
  • Parameters: event

Usage Example

<script>
    import MapDrawer from '@icgcat/mapdrawer';
  
    // Handle draw events
    function handleDrawCreate(event) {
        console.log('Created feature:', event);
    }
  
    function handleDrawUpdate(event) {
        console.log('Updated feature:', event);
    }
  
    function handleDrawDelete(event) {
        console.log('Deleted feature:', event);
    }
</script>

<MapboxDrawComponent
    {map}
    onDrawCreate={handleDrawCreate}
    onDrawUpdate={handleDrawUpdate}
    onDrawDelete={handleDrawDelete}
/>

Drawing controls

The component provides several controls for drawing geometries:

• drawPoint(): Draw a point on the map.
• drawLine(): Draw a line on the map (double-click to finish).
• drawPolygon(): Draw a polygon on the map (double-click to finish).
• deleteFeatures(): Delete all geometries.

Each action triggers a toast notification for user feedback.

<button on:click={drawPoint}>Draw Point</button>
<button on:click={drawLine}>Draw Line</button>
<button on:click={drawPolygon}>Draw Polygon</button>
<button on:click={deleteFeatures}>Delete All</button>

Styling

You can easily customize the button and control styles by modifying the included CSS:

button {
  background-color: #b6b7b8;
  color: rgb(31, 31, 31);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin-left: 20px;
  padding: 0;
}

button:hover {
  background-color: #ddd;
  outline: 1px solid rgb(167, 2, 2);
  box-shadow:
      0 3px 5px -1px rgba(0, 0, 0, 0.2),
      0 6px 10px 0 rgba(0, 0, 0, 0.14),
      0 1px 18px 0 rgba(0, 0, 0, 0.12);
}

Dependencies

This component requires the following dependencies:

• @mapbox/mapbox-gl-draw: The main library for drawing geometries on Mapbox/MapLibre maps.
• svelte-hot-french-toast: For toast notifications when drawing, updating, or deleting features.

Both dependencies will be installed automatically when you install the component.

License

This project is licensed under the MIT License.