Route

Route in an active element on map, pointing to some location. Routes can be rendered only inside RouteLayer.

Route is defined by component RouteGeometry, since rendered result is a geometry respecting given points and constraints of the map.

How to use it

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

<MapProvider center={{ lat: 50.096406, lng: 14.463071 }} id="map-example">
    <Map>
        <RouteLayer>
            <RouteGeometry
                coords={[
                    { lng: 14.434, lat: 50.084 },
                    { lng: 16.6, lat: 49.195 },
                ]}
            />
        </RouteLayer>
    </Map>
</MapProvider>;

Props

color = DEFAULT_ROUTE_COLOR, coords, id, routeType = ROUTE_TYPES.FAST, width = DEFAULT_ROUTE_WIDTH,

Name	Type	Default	Description	Required
color	string	f00	Color of route, accepted is any color in hex	❌
coords	array	undefined	Array of objects with attributes longitude and latitude defining route point position.	✔️
routeType	string	ROUTE_TYPES.FAST	Any value from ROUTE_TYPES	❌
width	number	3	Width of route geometry	❌
id	string	undefined	Id of route	❌

Example

Live Editor

<MapProvider center={{ lng: 14.4608576, lat: 50.0963478 }} zoom={7}> <Map> <RouteLayer> <RouteGeometry coords={[ { lng: 14.434, lat: 50.084 }, { lng: 16.6, lat: 49.195 }, ]} /> </RouteLayer> <ZoomControl /> <KeyboardControl /> <MouseControl zoom pan wheel /> </Map> </MapProvider>

<MapProvider center={{ lng: 14.4608576, lat: 50.0963478 }} zoom={7}>
    <Map>
        <RouteLayer>
            <RouteGeometry
                coords={[
                    { lng: 14.434, lat: 50.084 },
                    { lng: 16.6, lat: 49.195 },
                ]}
            />
        </RouteLayer>
        <ZoomControl />
        <KeyboardControl />
        <MouseControl zoom pan wheel />
    </Map>
</MapProvider>

Result

Loading...