Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

simple-geo-map

paluter7MIT1.0.33TypeScript support: included

Simple map React component

react, typescript, npm

readme

Module Name

Short description

Overview

Longer description

Getting Started

Install

npm install ...

Example

For simplicity, here's example code and output so you can start building right away

Code

Properties

Quick pointers

Future

Animate a marker

Add this code in the component that has Map as a child (e.g. App.js in RCF). In future, we could make an AnimatedMarker component that will move the marker from point A to point B and encapsulate that logic in a single component

const [marker1Point, setMarker1Point] = React.useState({
  lat: 40.6892,
  long: -74.0445,
});
const pt = React.useRef({
  lat: 40.6892,
  long: -74.0445,
});

// Animates the marker.
// Note: this will also re-render the whole map, which
// will reset the map's center as well to its center prop
React.useEffect(() => {
  setInterval(() => {
    pt.current = {
      lat: pt.current.lat + 0.001,
      long: pt.current.long + 0.001,
    };
    setMarker1Point({ lat: pt.current.lat, long: pt.current.long });
  }, 1000);
}, []);