react-native-web-maps

One maps API for React Native and the web: react-native-maps on iOS and Android, Google Maps in the browser. Its npm dependents include packages from app builders Draftbit, Vibecode and Rork.

View on GitHub Visit teovillanueva.github.io

Installnpm i @teovilla/react-native-web-maps

Stars: 75 stars
Downloads (npm): 8,888,067 · 331.1K in the last month
npm dependents include: Vibecode
Source: npm
Created: Jul 2022
Last push: Nov 2024
License: MIT
Languages: TypeScript 95%
JavaScript 4%

Recycler-34.6021, -58.3669

Map drawn in SVG, markers synthetic

// On the web, react-native-maps resolves to
// @teovilla/react-native-web-maps via a bundler alias.
import MapView, { Marker, Polyline } from "react-native-maps";

<MapView initialRegion={region}>
  <Marker
    coordinate={{ latitude: -34.6012, longitude: -58.3843 }}
    title="Pickup"
  />
  <Marker
    coordinate={{ latitude: -34.6087, longitude: -58.3712 }}
    title="Collector"
  />
  <Marker
    coordinate={{ latitude: -34.6021, longitude: -58.3669 }}
    title="Recycler"
  />
  <Polyline coordinates={route} strokeWidth={4} />
</MapView>

Live demo in the react-native-maps API shape. Drag to pan; markers are synthetic.

README

From the project README on GitHub.

@teovilla/react-native-web-maps

Cross platfrom maps for react & react-native

Installation

$ yarn add @teovilla/react-native-web-maps

Usage with Expo web / Webpack

For this to work you must alias react-native-maps to @teovilla/react-native-web-maps in your webpack config.

Example with Expo Web:

// webpack.config.js

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.resolve.alias['react-native-maps'] = '@teovilla/react-native-web-maps';

  return config;
};

Example with Next.js:

// next.config.js

module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'react-native-maps$': '@teovilla/react-native-web-maps',
    };

    return config;
  },
};

Documentation

The docs for the project can be found here.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library