@netizen-teknologi/react-native-maps-leaflet

react-native-maps-leaflet

React Native Maps Leaflet brings powerful, interactive maps to your React Native apps using Leaflet. Add custom markers, popups, and tile layers. Perfect for real estate, travel, delivery tracking, and logistics. Compatible with iOS and Android, it provides a seamless and dynamic map experience.

React Native Maps Leaflet 🌍

React Native Maps Leaflet brings the power of the popular Leaflet JavaScript library to React Native. Whether you're building a delivery app, a location-based service, or a data visualization tool, you can easily add interactive maps with custom markers, tile layers, and more!

Installation 📦

To install React Native Maps Leaflet, simply run the following command:

npm install @netizen-teknologi/react-native-maps-leaflet

install dependencies

npx expo install react-native-webview

npm install react-leaflet@4.2.1

npm install leaflet@1.9.4

Changelog

• Easily Switch Map Styles
  You can change the map tile using the style selector in the top-left corner.

  

Features 🎯

React Native Maps Leaflet offers a range of features to help developers create powerful mapping applications with ease:

• Interactive Maps: Utilize Leaflet's interactivity to add maps that support panning, zooming, and dragging.
• Custom Markers: Add custom markers to represent locations on the map with your own icons or images.
• Popups and Tooltips: Attach popups or tooltips to your markers to display additional information on user interaction.
• Cross-Platform Compatibility: Fully compatible with both Web, iOS, and Android devices.
• Map Event Handlers: Capture various events like onClick, onMove, and onMoveEnd to implement custom interactions.
• Lightweight and Performant: Designed to be fast and responsive, ensuring a smooth user experience even on lower-end devices.

These features make React Native Maps Leaflet a powerful tool for building interactive mapping applications tailored to your specific needs.

Example Branch

Example Branch

Case

• Server Error: window is not defined
  Solution:

  • Go to app.json file
  • Find "output": "static"
  • Change it to "output": "single"
  • Save and restart the project

  ✅ Now it's fixed!