Open Map

Open React Map

Compatible Map component supports Geo services with Freedom or Open API, based on TypeScript, MobX & React.

MobX compatibility NPM Dependency CI & CD

NPM

SemVer status ES decorator MobX
>=0.8 ✅developing stage-3 >=6.11
<0.8 ❌deprecated stage-2 >=4 <6.11

Preview site: https://idea2app.github.io/OpenReactMap/preview/

npm i open-react-map mobx mobx-react react react-dom

Compatible with MobX 6/7:

{
"compilerOptions": {
"target": "ES6",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"experimentalDecorators": false,
"jsx": "react-jsx"
}
}
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>
</head>
</html>

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;
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}
/>
);
}
MMNEPVFCICPMFPCPTTAAATR