🗺️ Mapker

A free and open-source map picker component for Svelte using OpenStreetMap and Leaflet

MIT License TypeScript Zero Cost

🎯 Basic Usage

Click anywhere on the map to select a location. The coordinates will be displayed below.

Selected Location: Click on the map to select a location

🔍 With Search Functionality

This map includes location search powered by OpenStreetMap Nominatim API.

Selected Location: Search for New York landmarks...

🎨 Custom Styling

The component is fully customizable with CSS. This example shows a compact map without coordinate display.

🔗 With Embed Code Generation

This example shows how to generate embed code for the selected location using OpenStreetMap.

Selected Location: Click on the map to select a location

📍 With Location Info Card

This example shows a Google Maps-style info card with location details and action buttons.

Selected Location: Search for New York landmarks...

✨ Features

🚀

Free & Open Source

Built with OpenStreetMap and Leaflet - no API keys required, completely free to use.

📱

Responsive

Works perfectly on all screen sizes - from mobile phones to desktop computers.

🎨

Customizable

Flexible styling options and configuration to match your application's design.

🏷️

TypeScript

Full TypeScript support with comprehensive type definitions included.

📝 Installation & Usage

Install the package:

npm install mapker leaflet @types/leaflet

Basic usage in your Svelte component:

<script lang="ts">
  import { MapPicker } from 'mapker';

  let selectedLocation = null;

  function handleLocation(event) {
    const { lat, lng } = event.detail;
    console.log('Location:', lat, lng);
  }
</script>

<MapPicker
  bind:selectedLocation
  on:locationSelected={handleLocation}
  width="100%"
  height="400px"
/>