react-mapycz
v1.2.1
Published
Mapy.cz in React.
Downloads
1,470
Readme
react-mapycz
Mapy.cz in React
Installation
yarn add react-mapycz
or npm i react-mapycz
Demo
https://kolebjak.github.io/react-mapycz/
Run preview
- Install:
yarn
- Run preview:
yarn start
- Previre will be available on http://localhost:9000/
Usage
Map
Show a simple map.
import { Map } from 'react-mapycz'
const App = () => <Map />
You can pass center
prop to the Map
to set default view coordinates.
ex. center={{lat: 55.604890000000005, lng: 8.97171}}
Markers
Show markers on a map. Markers have to be wrapped in MarkerLayer.
import { Map, MarkerLayer, Marker } from 'react-mapycz'
const App = () => (
<Map center={{lat: 55.604890000000005, lng: 8.97171}}>
<MarkerLayer>
<Marker coords={{lat: 55.60501000000001, lng: 8.97171}} />
<Marker coords={{lat: 55.547290000000004, lng: 8.897590000000001}} />
</MarkerLayer>
</Map>
)
Marker card
You can display marker card on marker click. There are two approaches:
Use string to render card items
<Marker
coords={{lat: 50.0755, lng: 14.4378}}
card={{
header: "<strong>Card header</strong>",
body: "<p>Card body</p><img src='https://via.placeholder.com/150x60/454545/eb4034'/>",
footer: "Card footer",
options: {
width: 200,
height: 200,
}
}}
/>
Use your custom function to render card items.
<Marker
coords={{lat: 50.0755, lng: 14.4378}}
card={{
header: ({ lat, lng }) => <strong>Card header {lat} {lng}</strong>,
body: ({ lat, lng }) => <><p>Card body {lat} {lng}</p><img src='https://via.placeholder.com/150x60/454545/eb4034'/></>,
footer: "Card footer",
options: {
width: 200,
height: 200,
}
}}
/>
Path
Displays a path from list of { lat, lng }.
import { Map, PathLayer, Path } from 'react-mapycz'
const App = () => (
<Map>
<PathLayer>
<Path coords={[
{'lat': 55.604890000000005, 'lng': 8.97171},
{'lat': 55.60501000000001, 'lng': 8.97179},
{'lat': 55.605070000000005, 'lng': 8.971820000000001},
{'lat': 55.60512000000001, 'lng': 8.97183},
{'lat': 55.60517, 'lng': 8.971810000000001}
]}
/>
</PathLayer>
</Map>
)
Controls
Compass control
Display control compass on the map and control the movement by clicking on it.
import { Map, CompassControl } from 'react-mapycz'
const App = () => (
<Map>
<CompassControl />
</Map>
)
Mouse control
Move the map by mouse. You can set zoom to boolean
to enable / disable zooming by mouse scrolling.
import { Map, MouseControl } from 'react-mapycz'
const App = () => (
<Map>
<MouseControl zoom={true} />
</Map>
)
Keyboard control
Control the map by keyboard arrows.
import { Map, KeyboardControl } from 'react-mapycz'
const App = () => (
<Map>
<KeyboardControl />
</Map>
)
Sync control
Synchronize map size by its parent element.
import { Map, SyncControl } from 'react-mapycz'
const App = () => (
<Map>
<SyncControl />
</Map>
)
You can pass options
prop to the SyncControl
to set bottomSpace
(in pixels) and resizeTimeout
(in miliseconds).
POI layer
The map can automatically fetch nearby points of interest.
import { Map, POILayer } from 'react-mapycz'
const App = () => (
<Map loaderApiConfig={{poi: true}}>
<POILayer />
</Map>
)
# License
This library is using Mapy.cz API. By its usage you acknowledge that you agree to the [Terms and Conditions](http://api.mapy.cz/#pact).