MMapHint

A hint is a popup text that can display any HTML content.
The MMapHint class displays hints on map elements.

Note

This class is a JS API package component and provides additional features not included in the core API.

To integrate the package, follow the instructions.

Usage example

vanilla

react

vue

const {MMapHint, MMapHintContext} = await mappable.import('@mappable-world/mappable-hint@0.0.1');
map.addChild(defaultFeatures = new MMapDefaultFeaturesLayer());
map.addChild(hint = MMapHint({
   layers: [defaultFeatures.layer],
   hint: object =&gt; object?.properties?.hint
}));

const {MMapDefaultMarker} = await mappable.import('@mappable-world/mappable-markers@0.0.1');
map.addChild(new MMapDefaultMarker({coordinates: [37, 55], properties: {hint: 'Hello world!'}}));

hint.addChild(new class MyHint extends mappable.MMapEntity {
   _onAttach() {
        this._element = document.createElement('div');
        this._element.className = 'my-hint';

        this._detachDom = mappable.useDomContext(this, this._element);
        this._watchContext(MMapHintContext, () =&gt; {
             this._element.textContent = this._consumeContext(MMapHintContext)?.hint;
        }, {immediate: true});
   }

   _onDetach() {
       this._detachDom();
       this._detachDom = undefined;
   }
});