Open Map
Open React Map
Compatible Map component supports Geo services with Freedom or Open API, based on TypeScript, MobX & React.
Versions
| SemVer | status | ES decorator | MobX |
|---|---|---|---|
>=0.8 |
✅developing | stage-3 | >=6.11 |
<0.8 |
❌deprecated | stage-2 | >=4 <6.11 |
Usage
Preview site: https://idea2app.github.io/OpenReactMap/preview/
Installation
Command
npm i open-react-map mobx mobx-react react react-dom
tsconfig.json
Compatible with MobX 6/7:
{
"compilerOptions": {
"target": "ES6",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"experimentalDecorators": false,
"jsx": "react-jsx"
}
}
index.html
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>
</head>
</html>
Third-party Tile provider
China map in China Open-source Map project
import { FC } from 'react';
import { OpenReactMap, OpenReactMapProps, TileLayer } from 'open-react-map';
const ChinaMap: FC<OpenReactMapProps> = props => (
<OpenReactMap
className="vh-100"
center={[34.32, 108.55]}
zoom={4}
renderTileLayer={() => <TileLayer vendor="GaoDe" />}
{...props}
/>
);
export default ChinaMap;
Use in Next.js
import dynamic from 'next/dynamic';
const ChinaMap = dynamic(() => import('./ChinaMap'), { ssr: false });
export default function ExampleMap() {
return (
<ChinaMap
markers={[
{
position: [34.32, 108.55],
tooltip: 'Geo Center of China'
}
]}
onMarkerClick={console.log}
/>
);
}