@yandex/ymaps3-hint
v0.0.9
Published
Hints for Yandex Maps JS API 3.0
Downloads
84
Maintainers
Readme
Yandex JS API Hints Package
The package adds the functionality of hanging hints on map elements
How use
The package is located in the dist
folder:
dist/types
TypeScript typesdist/esm
es6 modules for direct connection in your projectdist/index.js
Yandex JS Module
to use Yandex JS Module you need to add your module loading handler to JS API
ymaps3.import.loaders.unshift(async (pkg) => {
if (!pkg.includes('ymaps3-hint')) {
return;
}
if (location.href.includes('localhost')) {
await ymaps3.import.script(`/dist/index.js`);
} else {
// You can use another CDN
await ymaps3.import.script(`https://unpkg.com/${pkg}/dist/index.js`);
}
const [_, pkgName] = pkg.split('@');
Object.assign(ymaps3, window[`@${pkgName}`]);
return window[`@${pkgName}`];
});
and in your final code just use ymaps3.import
const LOCATION = {center: [25.205247, 25.077816], zoom: 10};
async function main() {
const {YMapHint, YMapHintContext} = await ymaps3.import('@yandex/[email protected]');
const map = new ymaps3.YMap(document.getElementById('app'), {location: LOCATION});
map.addChild(new YMapDefaultSchemeLayer());
const defaultFeatures = new YMapDefaultFeaturesLayer();
map.addChild(defaultFeatures);
const hint = new YMapHint({
layers: [defaultFeatures.layer],
hint: (object) => object?.properties?.hint
});
map.addChild(hint);
hint.addChild(
new (class MyHint extends ymaps3.YMapEntity {
_onAttach() {
this._element = document.createElement('div');
this._element.className = 'my-hint';
this._detachDom = ymaps3.useDomContext(this, this._element);
this._watchContext(
YMapHintContext,
() => {
this._element.textContent = this._consumeContext(YMapHintContext)?.hint;
},
{immediate: true}
);
}
_onDetach() {
this._detachDom();
}
})()
);
map.addChild(new YMapMarker({coordinates: LOCATION.center, properties: {hint: 'Some hint'}}));
}
main();
React version
const {YMapHint, YMapHintContext} = reactify.module(await ymaps3.import('@yandex/[email protected]'));
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('app')
);
function App() {
const [location, setLocation] = useState(LOCATION);
const getHint = useCallback((object) => object && object.properties && object.properties.hint, []);
return (
<YMap location={location} ref={(x) => (map = x)}>
<YMapDefaultSchemeLayer />
<YMapDefaultFeaturesLayer />
<YMapControls position="right">
<YMapZoomControl />
</YMapControls>
<YMapHint hint={getHint}>
<MyHint />
</YMapHint>
<MyMarker coordinates={LOCATION.center} properties={{hint: 'Some text'}} color={'#ff00ff'} />
</YMap>
);
}
function MyMarker({coordinates, properties, color}) {
return (
<YMapMarker properties={properties} coordinates={coordinates}>
<div
dangerouslySetInnerHTML={{__html: '<svg>...</svg>'}}
style={{transform: 'translate(-15px, -33px)', position: 'absolute'}}
></div>
</YMapMarker>
);
}
function MyHint() {
const ctx = React.useContext(YMapHintContext);
return <div className="my-hint">{ctx && ctx.hint}</div>;
}