Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,13 @@ android/keystores/debug.keystore
# generated by bob
lib/

# Docs site (Next.js / Fumadocs)
.next/
.source/
next-env.d.ts
*.tsbuildinfo
.vercel

# React Native Codegen
ios/generated
android/generated
Expand Down
2 changes: 2 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
lib
build
.next
.source
4 changes: 3 additions & 1 deletion AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
2. YOU MUST NOT commit changes yourself until I explicitly tell you to.
3. YOU MUST NOT create summary documents unless you are told to.
4. YOU MUST NOT add code comments that are obvious.
5. Always update relevant docs in `docs/` when making changes to components or APIs.
5. Always update relevant docs in `docs/content/docs/` (MDX) when making changes to components or APIs.

## Project Overview

Expand All @@ -24,6 +24,8 @@ ios/ # iOS native (Objective-C)
android/ # Android native (Kotlin)
plugin/ # Expo config plugin
example/bare/ # Bare React Native example app
docs/ # Documentation site (Next.js + Fumadocs), deployed to maps.lodev09.com
docs/content/docs/ # MDX documentation pages
```

### Creating a Pull Request
Expand Down
5 changes: 5 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,11 @@ The `package.json` file contains various scripts for common tasks:
- `yarn expo start`: start the Metro server for the Expo example app.
- `yarn expo android`: run the Expo example app on Android.
- `yarn expo ios`: run the Expo example app on iOS.
- `yarn docs dev`: start the documentation site locally.

### Documentation

The documentation site lives in `docs/` and is built with [Next.js](https://nextjs.org/) and [Fumadocs](https://fumadocs.dev/). Pages are MDX files in `docs/content/docs/`. When you change a component or API, update the matching page there. The site deploys to [maps.lodev09.com](https://maps.lodev09.com).

### Sending a pull request

Expand Down
112 changes: 15 additions & 97 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,82 +2,31 @@

Universal maps for your React Native apps 📍

<img alt="@lugg/maps" src="docs/preview.gif" width="720" />
<img alt="@lugg/maps" src="docs/public/preview.gif" width="720" />

> [!IMPORTANT]
> This library is currently under heavy development. APIs may change without notice.

## Installation
## Documentation

```sh
npm install @lugg/maps
```

### Expo

Add the plugin to your `app.json`:

```json
{
"expo": {
"plugins": [
[
"@lugg/maps",
{
"iosGoogleMapsApiKey": "YOUR_IOS_API_KEY",
"androidGoogleMapsApiKey": "YOUR_ANDROID_API_KEY"
}
]
]
}
}
```
Full documentation lives at **[maps.lodev09.com](https://maps.lodev09.com)**.

### Bare React Native
- [Installation](https://maps.lodev09.com/docs/installation) - Expo, bare React Native, and web setup
- [Usage](https://maps.lodev09.com/docs/usage) - Render your first map
- [MapView](https://maps.lodev09.com/docs/components/map-view) - Props, camera methods, events, static maps
- [Marker](https://maps.lodev09.com/docs/components/marker) - Custom views, callouts, dragging
- [Polyline](https://maps.lodev09.com/docs/components/polyline), [Polygon](https://maps.lodev09.com/docs/components/polygon), [Circle](https://maps.lodev09.com/docs/components/circle) - Shapes
- [GeoJson](https://maps.lodev09.com/docs/components/geojson), [GroundOverlay](https://maps.lodev09.com/docs/components/ground-overlay), [TileOverlay](https://maps.lodev09.com/docs/components/tile-overlay) - Data and overlays
- [Types](https://maps.lodev09.com/docs/types) - `Coordinate`, `Point`, `EdgeInsets`

#### iOS
## Quick start

Add your Google Maps API key to `AppDelegate.swift`:

```swift
import GoogleMaps

// In application(_:didFinishLaunchingWithOptions:)
GMSServices.provideAPIKey("YOUR_API_KEY")
```

#### Android

Add your Google Maps API key to `AndroidManifest.xml`:

```xml
<application>
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_API_KEY" />
</application>
```

### Web

Wrap your app with `MapProvider` and pass your Google Maps API key:

```tsx
import { MapProvider } from '@lugg/maps';

function App() {
return (
<MapProvider apiKey="YOUR_WEB_API_KEY">
{/* Your app */}
</MapProvider>
);
}
```sh
npm install @lugg/maps
```

## Usage

```tsx
import { MapView, Marker, Polyline, Polygon } from '@lugg/maps';
import { MapView, Marker } from '@lugg/maps';

<MapView
style={{ flex: 1 }}
Expand All @@ -89,41 +38,10 @@ import { MapView, Marker, Polyline, Polygon } from '@lugg/maps';
coordinate={{ latitude: 37.7749, longitude: -122.4194 }}
title="San Francisco"
/>
<Polyline
coordinates={[
{ latitude: 37.7749, longitude: -122.4194 },
{ latitude: 37.8049, longitude: -122.4094 },
]}
strokeWidth={3}
/>
<Polygon
coordinates={[
{ latitude: 37.784, longitude: -122.428 },
{ latitude: 37.784, longitude: -122.422 },
{ latitude: 37.779, longitude: -122.422 },
{ latitude: 37.779, longitude: -122.428 },
]}
fillColor="rgba(66, 133, 244, 0.3)"
strokeColor="#4285F4"
strokeWidth={2}
/>
</MapView>
```

## Components

- [MapView](docs/MAPVIEW.md) - Main map component
- [Marker](docs/MARKER.md) - Map markers with callout support
- [Polyline](docs/POLYLINE.md) - Draw lines on the map
- [Polygon](docs/POLYGON.md) - Draw filled shapes on the map
- [Circle](docs/CIRCLE.md) - Draw circular overlays on the map
- [GeoJson](docs/GEOJSON.md) - Render GeoJSON data on the map
- [GroundOverlay](docs/GROUND_OVERLAY.md) - Display images on the map
- [TileOverlay](docs/TILE_OVERLAY.md) - Display custom tile layers on the map

## Types

See [Types](docs/TYPES.md) for common type definitions (`Coordinate`, `Point`, `EdgeInsets`).
Google Maps needs an API key on every platform. See [Installation](https://maps.lodev09.com/docs/installation) for Expo, iOS, Android, and web setup.

## Contributing

Expand Down
9 changes: 9 additions & 0 deletions docs/AGENTS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!-- BEGIN:nextjs-agent-rules -->

# This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.

This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.

<!-- END:nextjs-agent-rules -->
1 change: 1 addition & 0 deletions docs/CLAUDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@AGENTS.md
6 changes: 6 additions & 0 deletions docs/app/(home)/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { baseOptions } from '@/lib/layout.shared';

export default function Layout({ children }: LayoutProps<'/'>) {
return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
}
Loading
Loading