Skip to main content

Quick start

React Mapy cz is created with the sole purpose of enabling React developers render maps from mapy.cz in their React apps without too much hustle.

What you'll learn in this tutorial:​

So lets get started! :)

Rendering simple map​

First, we need to have mapy-cz-react installed as a dependency, as shown in Getting started.

Then, add MapProvider and Map as its child to the place where you want the map to be rendered. The provider component takes care of adding mapy.cz API script into document head, so all features are available.

In code, it could look something like this:

import React from 'react';
import { MapProvider, Map } from 'mapy-cz-react';

const MyApp = () => (
    <div id="my-app-root">
        ... Some components
        <MapProvider center={{ lat: 50, lng: 15 }}>
            <Map />
        </MapProvider>
    </div>
);

Important​

MapProvider injects scripts into head of document and waits for them to load. Until everything is loaded, provider renders a loading string instead of children. This is due to the fact, that without loaded API we cannot create map instance.

Making map interactive with Controls​

🚧 Sorry, we are still writing this section, check again in some time.

Adding points to map - Markers​

🚧 Sorry, we are still writing this section, check again in some time

How to listen to events on map​

🚧 Sorry, we are still writing this section, check again in some time