ymap3-components


$3

**React wrapper around ymaps3: This library is an alternative way of getting
Yandex map components:** use import
instead of creating script and getting components
via asynchronous window.ymaps3.import

Library is written on typescript with @yandex/ymaps3-types.

Install Library

``
npm i ymap3-components
`

Usage with typescript


`
npm i -D @yandex/ymaps3-types@latest
`

Examples

- Example 1: map and rect features with hints
- Example 2: map with clusterer
- Example 3: maps with routes
(For routes you need to create an API key for the Distance Matrix and Route Planning in the Developer Dashboard)

Motivation

- keeps your components simple
- this is easier than suggestions in Official documentation
- no need to write logic of loading components and modules for them
- no need to create script or configure externals in webpack

#### ✅ Your code with this library
`javascript jsx
import React from "react";
import {
YMap,
YMapDefaultSchemeLayer,
YMapDefaultFeaturesLayer
// ...other components
} from "ymap3-components";
import { features, LOCATION } from './helpers'

function Map() {
return (




coordinates={LOCATION.coordinates}
/>


);
}

export default Map;
`

#### ❌ Your code without this library

`javascript jsx
import React, {useEffect, useMemo} from "react";
import {features, LOCATION} from './helpers'

function Map() {
const [data, setData] = useState();
const {
YMap,
// ...other components
} = useMemo(() => {
if (data?.reactify) {
return reactify.module(data.ymap);
}
}, [data]);

useEffect(() => {
const script = document.createElement('script');
document.body.appendChild(script);
script.type = "text/javascript";
script.src = https://api-maps.yandex.ru/v3/?apikey=${key}&lang=${lang};
script.onload = async () => {
const ymaps = window.ymaps3
await ymaps.ready;
const ymaps3Reactify = await ymaps.import('@yandex/ymaps3-reactify');
const reactify = ymaps3Reactify.reactify.bindTo(React, ReactDOM);

setData({
reactify,
ymaps
});
/*
and other logic which is not connected with rendering
to load ymap modules like YMapDefaultMarker
*/
}
}, [])

if (!YMap) {
return null;
}

return (



coordinates={LOCATION.coordinates}
/>

);
}

export default Map;
`

Getting Stated

1) Get api key for map js api
2) Set domain where you will host ymap
3) For development change your /etc/host
to proxy domain on your localhost
(map will work on http://{domain}:{port})
4) Install and use library

Check example in codesandbox below. For more comprehensive information go to Official documentation

API

#### YMapComponentsProvider API
YMapComponentsProvider - root component which has to contain
another library's components as child nodes.
`typescript
interface YMapComponentsProviderProps {
apiKey: string
lang?: string
onLoad?: (params: {
reactify: Reactify;
ymaps: typeof import("@yandex/ymaps3-types/index");
}) => any
onError: (e?: unknown) => void
children: ReactNode | ReactNode []
}
`

`typescript
type getYmaps3ReadyObject = () => Promise;
``

#### Other components has same api as provided in Official documentation
#### Library provides api for these components:

- YMapComponentsProvider
- YMap
- YMapDefaultMarker
- YMapHintContext
- YMapHint
- YMapClusterer
- YMapZoomControl
- YMapGeolocationControl
- ThemeContext
- YMapDefaultSchemeLayer
- YMapDefaultFeaturesLayer
- YMapLayer
- YMapControl
- YMapControls
- YMapControlButton
- YMapTileDataSource
- YMapMarker
- YMapListener
- YMapFeature
- YMapDefaultSatelliteLayer
- YMapCollection
- YMapContainer
- YMapFeatureDataSource
- YMapCustomClusterer