Pigeon Maps is a lightweight, customizable React component for rendering interactive maps without external dependencies. It provides a simple and flexible solution for integrating maps into React applications, offering a range of features such as markers, overlays, and custom tile providers.

Pros

• Lightweight and dependency-free, resulting in smaller bundle sizes
• Highly customizable with support for custom tile providers and styling
• Easy to integrate into React applications
• Supports touch interactions and is mobile-friendly

Cons

• Limited built-in features compared to more comprehensive mapping libraries
• May require additional effort for complex mapping scenarios
• Documentation could be more extensive
• Smaller community compared to more popular mapping solutions

Code Examples

1. Basic map usage:

import { Map } from 'pigeon-maps'

function MyMap() {
  return (
    <Map height={300} defaultCenter={[50.879, 4.6997]} defaultZoom={11} />
  )
}

2. Adding a marker:

import { Map, Marker } from 'pigeon-maps'

function MapWithMarker() {
  return (
    <Map height={300} defaultCenter={[50.879, 4.6997]} defaultZoom={11}>
      <Marker width={50} anchor={[50.879, 4.6997]} />
    </Map>
  )
}

3. Custom tile provider:

import { Map } from 'pigeon-maps'

const myTileProvider = (x, y, z) => {
  return `https://my-custom-tile-server.com/${z}/${x}/${y}.png`
}

function CustomMap() {
  return (
    <Map 
      height={300} 
      defaultCenter={[50.879, 4.6997]} 
      defaultZoom={11} 
      provider={myTileProvider}
    />
  )
}

Getting Started

To use Pigeon Maps in your React project, follow these steps:

1. Install the package:

   npm install pigeon-maps
   

2. Import and use the Map component in your React application:

   import React from 'react'
   import { Map } from 'pigeon-maps'
   
   function App() {
     return (
       <div>
         <h1>My Map</h1>
         <Map 
           height={400} 
           defaultCenter={[50.879, 4.6997]} 
           defaultZoom={11}
         />
       </div>
     )
   }
   
   export default App
   

This will render a basic map centered on the specified coordinates. You can further customize the map by adding markers, overlays, or implementing custom behaviors using the provided components and props.