GebetaMaps

A professional React wrapper for Gebeta Maps' vector tiles, providing a comprehensive interface for creating interactive maps.

Overview

A professional React wrapper for Gebeta Maps, providing a comprehensive interface for creating interactive maps with markers, polylines, polygons, and clustering capabilities.

Key Features

Multiple Built-in Styles: Choose from various pre-designed map styles
Customizable Markers: Support for both color-based and image-based markers
Polylines: Draw routes and paths with custom styling options
Polyfill Support: Display areas with fill and outline customization options
Marker Clustering: Intelligent clustering with customizable appearance
Interactive Events: Handle marker clicks and map interactions
Map Click Event Handling: Capture and respond to map click events
TypeScript Support: Full TypeScript definitions included

Installation

Install the package using npm or yarn:

npm install @gebeta/tiles
# or
yarn add @gebeta/tiles

Prerequisites

Before you begin, you'll need:

A Gebeta Maps API key - Register at Gebeta Maps to get your key

Quick Start

Here's a simple example to get you started:

import { GebetaMap, MapMarker } from '@gebeta/tiles';
 
function MyMap() {
  return (
    <GebetaMap
      apiKey="YOUR_API_KEY"
      center={[38.7578, 8.9806]}
      zoom={12}
      style="gebeta_basic"
    >
      <MapMarker
        id="marker-1"
        lngLat={[38.7578, 8.9806]}
        color="#FF0000"
        onClick={() => console.log('Marker clicked!')}
      />
    </GebetaMap>
  );
}