[example] Animate symbol to follow mouse (#4945)

* [example] Animate symbol to follow mouse * cleanup * add @see to mousemove * add control
maplibre · Nov 3, 2024 · 51a2efd · 51a2efd
1 parent ef6e9ee
commit 51a2efd
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 0 deletions.
diff --git a/docs/assets/examples/animate-symbol-to-follow-mouse.png b/docs/assets/examples/animate-symbol-to-follow-mouse.png
diff --git a/src/ui/events.ts b/src/ui/events.ts
@@ -77,6 +77,7 @@ export type MapLayerEventType = {
      * @see [Get coordinates of the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/mouse-position/)
      * @see [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/)
      * @see [Display a popup on over](https://maplibre.org/maplibre-gl-js/docs/examples/popup-on-hover/)
+     * @see [Animate symbol to follow the mouse](https://maplibre.org/maplibre-gl-js/docs/examples/animate-symbol-to-follow-mouse/)
      */
     mousemove: MapLayerMouseEvent;
     /**

diff --git a/test/examples/animate-symbol-to-follow-mouse.html b/test/examples/animate-symbol-to-follow-mouse.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Animate symbol to follow the mouse</title>
+    <meta property="og:description" content="Animate symbol to follow the mouse." />
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel='stylesheet' href='../../dist/maplibre-gl.css' />
+    <script src='../../dist/maplibre-gl-dev.js'></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body,
+        #map {
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script>
+        const map = new maplibregl.Map({
+            container: 'map',
+            projection: {type: 'globe'},
+            style:
+                'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
+            center: [0, 0],
+            zoom: 2
+        });
+
+        map.on('mousemove', (e) => {
+            const lngLat = e.lngLat.wrap();
+            const pointSource = map.getSource('point');
+
+            if (pointSource && lngLat.lng && lngLat.lat) {
+                pointSource.setData({
+                    'type': 'Point',
+                    'coordinates': [lngLat.lng, lngLat.lat]
+                });
+            }
+        });
+        map.addControl(new maplibregl.GlobeControl());
+
+        map.on('load', () => {
+
+            map.addSource('point', {
+                'type': 'geojson',
+                'data': {
+                    'type': 'Point',
+                    'coordinates': [0, 0]
+                }
+            });
+
+            map.addLayer({
+                'id': 'point',
+                'source': 'point',
+                'type': 'symbol',
+                'layout': {
+                    'icon-image': 'airport_15',
+                    'icon-allow-overlap': true,
+                    'icon-ignore-placement': true
+                },
+            });
+        });
+    </script>
+</body>
+
+</html>