React Native Leaflet Plus

Мощная и гибкая библиотека картографирования, которая обеспечивает полную поддержку Leaflet для React Native приложений. Включает в себя готовую поддержку векторных карт, таких как Protomaps, интерактивное редактирование элементов карты и богатый набор возможностей кастомизации.

✨ Особенности

• 🗺️ Полная поддержка Leaflet - Все возможности популярной библиотеки Leaflet.js
• 🎨 Векторные карты - Встроенная поддержка Protomaps и других векторных источников
• ✏️ Интерактивное редактирование - Возможность редактирования полигонов и прямоугольников
• 🎯 Богатые возможности - Маркеры, полилинии, полигоны, прямоугольники
• 📱 React Native нативный - Оптимизировано для мобильных приложений
• 🎭 Кастомизация - Полная настройка стилей и поведения
• 🚀 Производительность - Эффективное управление памятью и рендерингом
• 📦 TypeScript - Полная поддержка типов

🚀 Быстрый старт

Установка

npm install react-native-leaflet-plus
# или
yarn add react-native-leaflet-plus

Зависимости

Библиотека требует следующие peer dependencies:

npm install react-native-webview @react-native-async-storage/async-storage

Затем выполните:

cd ios && pod install

Android настройка

Для Android добавьте в android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

📖 Основное использование

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LeafletMap, Marker, Polyline } from 'react-native-leaflet-plus';

export default function MapScreen() {
  return (
    <View style={styles.container}>
      <LeafletMap
        style={styles.map}
        options={{
          center: [55.7558, 37.6176], // Москва
          zoom: 13,
        }}
        tileLayer={{
          url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          options: {
            attribution: '© OpenStreetMap contributors',
          },
        }}
      >
        <Marker
          uniqueId="marker1"
          latlng={[55.7558, 37.6176]}
          options={{
            title: 'Москва',
          }}
          onPress={() => console.log('Маркер нажат!')}
        />

        <Polyline
          uniqueId="route1"
          latlngs={[
            [55.7558, 37.6176],
            [55.7522, 37.6156],
            [55.75, 37.62],
          ]}
          options={{
            color: 'blue',
            weight: 3,
          }}
        />
      </LeafletMap>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

📚 Документация

• Быстрый старт - Начните здесь!
• Установка и настройка - Подробная инструкция по установке
• Компоненты - Описание всех компонентов
• Примеры использования - Практические примеры
• API Reference - Полная документация API
• Конфигурация - Настройка и оптимизация
• FAQ - Часто задаваемые вопросы
• Руководство по миграции - Обновление до новых версий
• Лучшие практики - Рекомендации по эффективному использованию

🎯 Компоненты

LeafletMap

Основной компонент карты, который содержит все остальные элементы.

Marker

Маркеры для отображения точек на карте.

Polyline

Линии для отображения маршрутов или путей.

Polygon

Полигоны для отображения областей.

Rectangle

Прямоугольники с возможностью редактирования.

🗺️ Типы карт

Tile Layer (Растровые карты)

<LeafletMap
  tileLayer={{
    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    options: {
      attribution: '© OpenStreetMap contributors',
    },
  }}
/>

Protomaps (Векторные карты)

<LeafletMap
  protomapsLayer={{
    url: 'https://api.protomaps.com/tiles/v3.json?key=YOUR_KEY',
    flavor: 'light',
  }}
/>

⚡ Производительность

• Автоматическое управление памятью
• Эффективный рендеринг через WebView
• Оптимизированные обновления компонентов
• Поддержка больших наборов данных

🔧 Кастомизация

Стилизация маркеров

<Marker
  uniqueId="custom-marker"
  latlng={[55.7558, 37.6176]}
  options={{
    icon: {
      divIcon: {
        html: '<div style="background: red; width: 20px; height: 20px; border-radius: 50%;"></div>',
        iconSize: [20, 20],
      },
    },
  }}
/>

Кастомные стили карты

<LeafletMap
  injectCSS={`
    .leaflet-tile {
      filter: hue-rotate(180deg);
    }
  `}
  injectJS={`
    // Кастомный JavaScript код
  `}
/>

📱 События

<LeafletMap
  onMove={(event) => console.log('Карта перемещена:', event.latlng)}
  onZoom={(event) => console.log('Масштаб изменен:', event.zoom)}
  onLoad={() => console.log('Карта загружена')}
/>

🎮 Программное управление

import { useRef } from 'react';

const mapRef = useRef(null);

// Перемещение к координатам
mapRef.current?.flyTo([55.7558, 37.6176], 15);

// Установка масштаба
mapRef.current?.setZoom(10);

// Подгонка границ
mapRef.current?.fitBounds([
  [55.7, 37.6],
  [55.8, 37.7],
]);

🤝 Вклад в проект

Мы приветствуем вклад в развитие проекта! Пожалуйста, ознакомьтесь с руководством по вкладу.

📄 Лицензия

MIT License. См. LICENSE для подробностей.

🆘 Поддержка

• 📖 Документация
• 🐛 Сообщить о баге
• 💬 Обсуждения

🙏 Благодарности

• Leaflet - За отличную библиотеку карт
• Protomaps - За векторные карты
• React Native WebView - За WebView интеграцию

Сделано с ❤️ для сообщества React Native