feat(tiler): add lat/lng properties for easier click handling (#36)

* feat(tiler): add lat/lng properties for easier click handling chore(docs): add onClick example * fix(tiler): update snapshot
chargetrip · Dec 9, 2019 · fba60e4 · fba60e4
1 parent eae8f64
commit fba60e4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/example/mapbox.html b/example/mapbox.html
@@ -82,6 +82,13 @@
             'circle-stroke-color': '#fff',
           },
         });
+
+        map.on('click', function({ point, target }) {
+          const features = target.queryRenderedFeatures(point, { layers: ['clusters', 'cluster_count', 'unclustered-point']});
+          if (features && features.length > 0) {
+            map.flyTo({center: [features[0].properties.lng, features[0].properties.lat]})
+          }
+        });
       });
     </script>
   </body>

diff --git a/lib/__test__/__snapshots__/queries.test.ts.snap b/lib/__test__/__snapshots__/queries.test.ts.snap
@@ -178,7 +178,7 @@ exports[`createClusterQuery should create a clustered Query 1`] = `
      q as
     (SELECT 1 as c1,
             ST_AsMVTGeom(ST_Transform(center, 3857), TileBBox($7, $8, $9, 3857), $10, $11, false) AS geom,
-            jsonb_build_object('count', theCount, 'expansionZoom', expansionZoom, 'a', a) as attributes
+            jsonb_build_object('count', theCount, 'expansionZoom', expansionZoom,'lng', ST_X (ST_Transform(center, 4326)),'lat', ST_Y (ST_Transform(center, 4326)), 'a', a) as attributes
      FROM tiled)
 SELECT ST_AsMVT(q, $12, $13, 'geom') as mvt
 from q
@@ -418,7 +418,7 @@ WITH filtered AS
     q as
     (SELECT 1 as c1,
             ST_AsMVTGeom(ST_Transform(wkb_geometry, 3857), TileBBox($4, $5, $6, 3857), $7, $8, false) AS geom,
-            jsonb_build_object('count', 1, 'expansionZoom', 10, 'a', a) AS attributes
+            jsonb_build_object('count', 1, 'expansionZoom', 10,'lng', ST_X (ST_Transform(center, 4326)),'lat', ST_Y (ST_Transform(center, 4326)), 'a', a) AS attributes
      FROM filtered)
 SELECT ST_AsMVT(q, $9, $10, 'geom') as mvt
 from q

diff --git a/lib/queries.ts b/lib/queries.ts
@@ -48,7 +48,7 @@ WITH filtered AS
             )}, 3857), TileBBox(${z}, ${x}, ${y}, 3857), ${extent}, ${bufferSize}, false) AS geom,
             jsonb_build_object('count', 1, 'expansionZoom', ${sql.raw(
               `${maxZoomLevel}`
-            )}${sql.raw(attributesToArray(attributes))}) AS attributes
+            )},'lng', ST_X (ST_Transform(center, 4326)),'lat', ST_Y (ST_Transform(center, 4326))${sql.raw(attributesToArray(attributes))}) AS attributes
      FROM filtered)
 SELECT ST_AsMVT(q, ${sourceLayer}, ${extent}, 'geom') as mvt
 from q
@@ -86,7 +86,7 @@ const baseClusteredQuery = ({
      q as
     (SELECT 1 as c1,
             ST_AsMVTGeom(ST_Transform(center, 3857), TileBBox(${z}, ${x}, ${y}, 3857), ${extent}, ${bufferSize}, false) AS geom,
-            jsonb_build_object('count', theCount, 'expansionZoom', expansionZoom${sql.raw(
+            jsonb_build_object('count', theCount, 'expansionZoom', expansionZoom,'lng', ST_X (ST_Transform(center, 4326)),'lat', ST_Y (ST_Transform(center, 4326))${sql.raw(
               attributesToArray(attributes)
             )}) as attributes
      FROM tiled)