@mappable-world/mappable-hint - npm Package Compare versions

Comparing version 0.0.2-beta.9 to 0.0.2-beta.10

package.json

 {
-  "version": "0.0.2-beta.9",
+  "version": "0.0.2-beta.10",
   "name": "@mappable-world/mappable-hint",
@@ -4,0 +4,0 @@ "description": "Hints for Mappable Maps JS API 3.0",

README.md

@@ -11,2 +11,4 @@ # Mappable JS API Hints Package
 
+- [Demo](https://codesandbox.io/embed/wgqnh8?fontsize=14&hidenavigation=1&theme=dark&initialpath=react.html&module=react.html&moduleview=1)
+
 ## How use
@@ -35,3 +37,3 @@
 
-  const [_, pkgName] = pkg.split('@')
+  const [_, pkgName] = pkg.split('@');
   Object.assign(mappable, window[`@${pkgName}`]);
@@ -45,3 +47,95 @@ return window[`@${pkgName}`];
 ```js
-const pkg = await mappable.import('@mappable-world/mappable-hint@0.0.1')
+const LOCATION = {center: [55.205247, 25.077816], zoom: 10};
+
+async function main() {
+  const {MMapHint, MMapHintContext} = await mappable.import('@mappable-world/mappable-hint@0.0.1');
+
+  const map = new mappable.MMap(document.getElementById('app'), {location: LOCATION});
+
+  map.addChild(new MMapDefaultSchemeLayer());
+
+  const defaultFeatures = new MMapDefaultFeaturesLayer();
+  map.addChild(defaultFeatures);
+
+  const hint = new MMapHint({
+    layers: [defaultFeatures.layer],
+    hint: (object) => object?.properties?.hint
+  });
+
+  map.addChild(hint);
+
+  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,
+          () => {
+            this._element.textContent = this._consumeContext(MMapHintContext)?.hint;
+          },
+          {immediate: true}
+        );
+      }
+
+      _onDetach() {
+        this._detachDom();
+      }
+    })()
+  );
+
+  map.addChild(new MMapMarker({coordinates: LOCATION.center, properties: {hint: 'Some hint'}}));
+}
+main();
 ```
+
+### React version
+
+```jsx
+const {MMapHint, MMapHintContext} = reactify.module(await mappable.import('@mappable-world/mappable-hint@0.0.1'));
+
+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 (
+    <MMap location={location} ref={(x) => (map = x)}>
+      <MMapDefaultSchemeLayer />
+      <MMapDefaultFeaturesLayer />
+      <MMapControls position="right">
+        <MMapZoomControl />
+      </MMapControls>
+
+      <MMapHint hint={getHint}>
+        <MyHint />
+      </MMapHint>
+
+      <MyMarker coordinates={LOCATION.center} properties={{hint: 'Some text'}} color={'#ff00ff'} />
+    </MMap>
+  );
+}
+function MyMarker({coordinates, properties, color}) {
+  return (
+    <MMapMarker properties={properties} coordinates={coordinates}>
+      <div
+        dangerouslySetInnerHTML={{__html: '<svg>...</svg>'}}
+        style={{transform: 'translate(-15px, -33px)', position: 'absolute'}}
+      ></div>
+    </MMapMarker>
+  );
+}
+function MyHint() {
+  const ctx = React.useContext(MMapHintContext);
+  return <div className="my-hint">{ctx && ctx.hint}</div>;
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

38711

increased by7.13%

Number of lines in readme file

139

increased by208.89%

No dependency changes