New version 1.0.26

mappable-world · Sep 19, 2023 · cec0644 · cec0644
1 parent c110cdb
commit cec0644
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 17 deletions.
diff --git a/example/common.js b/example/common.js
@@ -15,7 +15,7 @@ const BOUNDS = [
     [53.20890963521473, 25.52765018907181],
     [57.444403818421854, 24.71096299361919]
 ];
-const ZOOM_RANGE = {min: 4, max: 10};
+const ZOOM_RANGE = {min: 4, max: 19};
 const LOCATION = {bounds: BOUNDS};
 const TILE_SIZE = 256;
 const TEST_TILE_SERVER = 'https://mappable-test-server-d7778c5d7460.herokuapp.com';
@@ -46,9 +46,9 @@ function makeEntity(map, feature) {
         {
             id: feature.id,
             coordinates: feature.geometry.coordinates,
-            onDoubleClick: () => {
-                if (feature.properties.minMax > 1) {
-                    map.setLocation(feature.properties.minMax);
+            onDoubleClick: (e) => {
+                if (feature.properties.minMax) {
+                    map.setLocation({bounds: feature.properties.minMax, duration: 400});
                 }
             }
         },
@@ -109,7 +109,7 @@ async function fetchBound([[lng1, lat1], [lng2, lat2]]) {
     controller = new AbortController();
     const signal = controller.signal;
 
-    const data = await fetch(`${TEST_TILE_SERVER}/v1/${MODE}?lng1=${lng1}&lat1=${lat1}&lng2=${lng2}&lat2=${lat2}`, {
+    const data = await fetch(`${TEST_TILE_SERVER}/v1/${MODE}?lng1=${lng1}&lat1=${lat1}&lng2=${lng2}&lat2=${lat2}&limit=10000`, {
         signal
     }).then((resp) => resp.json());
 
@@ -120,3 +120,18 @@ async function fetchBound([[lng1, lat1], [lng2, lat2]]) {
 
     return features;
 }
+
+const layerId = "A";
+const dataSource = {
+    type: layerId,
+    fetchTile: (x, y, z) => {
+        const canvas = document.createElement("canvas");
+        canvas.width = TILE_SIZE;
+        canvas.height = TILE_SIZE;
+        const ctx = canvas.getContext("2d");
+        ctx.strokeStyle = "#010101";
+        ctx.strokeRect(0, 0, TILE_SIZE, TILE_SIZE);
+        ctx.fillText(`${x}-${y}-${z}`, 10, 15);
+        return Promise.resolve({ image: canvas });
+    }
+}
diff --git a/example/vanilla.html b/example/vanilla.html
@@ -30,17 +30,36 @@
                     MMapListener,
                     MMapControls,
                     MMapCollection,
-                    MMapMarker
+                    MMapTileDataSource,
+                    MMapLayer
                 } = mappable;
 
                 const {MMapZoomControl} = await mappable.import('@mappable-world/[email protected]');
                 const {MMapEntityTileLoader} = await mappable.import('@mappable-world/mappable-entity-tile-loader');
 
-                map = new MMap(document.getElementById('app'), {location: LOCATION, zoomRange: ZOOM_RANGE});
+                map = new MMap(document.getElementById('app'), {
+                    location: LOCATION,
+                    behaviors: [
+                        'drag',
+                        'pinchZoom',
+                        'scrollZoom',
+                        'magnifier',
+                        'oneFingerZoom',
+                        'mouseRotate',
+                        'mouseTilt',
+                        'pinchRotate',
+                        'panTilt'
+                    ],
+                    zoomRange: ZOOM_RANGE
+                });
                 map.addChild(new MMapDefaultSchemeLayer());
                 map.addChild(new MMapDefaultFeaturesLayer());
                 map.addChild(new MMapControls({position: 'right'}).addChild(new MMapZoomControl({})));
 
+                map.addChild(new MMapTileDataSource({id: layerId, raster: dataSource})).addChild(
+                    new MMapLayer({id: layerId, source: layerId, type: layerId})
+                );
+
                 if (MODE !== 'bbox') {
                     map.addChild(
                         new MMapEntityTileLoader({
@@ -112,9 +131,11 @@
     <body>
         <div class="toolbar">
             <div class="btn-group">
-                <a href="?mode=tile" class="btn btn-primary btn-tile">Tile</a>
-                <a href="?mode=tile-clusterer" class="btn btn-primary btn-tile-clusterer">Tile with Clusterer</a>
-                <a href="?mode=bbox" class="btn btn-primary btn-bbox">BBox</a>
+                <a href="?mode=tile" class="btn btn-secondary btn-sm btn-tile">Tile</a>
+                <a href="?mode=tile-clusterer" class="btn btn-secondary btn-sm btn-tile-clusterer"
+                    >Tile with Clusterer</a
+                >
+                <a href="?mode=bbox" class="btn btn-secondary btn-sm btn-bbox">BBox</a>
             </div>
         </div>
         <script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mappable-test-server",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "private": "true",
   "description": "Test server for demonstrating work with the tile and bbox data loading API for the Mappable API",
   "scripts": {

diff --git a/src/app/data-provider/db-data-provider/db-data-provider.ts b/src/app/data-provider/db-data-provider/db-data-provider.ts
@@ -29,7 +29,7 @@ export class DbDataProvider implements DataProvider {
         ]);
 
         return {
-            total: total.cnt,
+            total: +total.cnt,
             features: (points.rows as Array<{feature: Feature<Point>; uid: string}>).map((row) => ({
                 id: row.uid,
                 ...row.feature

diff --git a/src/app/v1/load-by-tile-cluster.ts b/src/app/v1/load-by-tile-cluster.ts
@@ -7,7 +7,7 @@ import {fromWorldCoordinates, tileToWorld} from '../lib/projection/projection';
 
 const getTileRequestSchema = z
     .object({
-        limit: numericString(z.number().int().min(100).max(10000).default(1000)),
+        limit: numericString(z.number().int().min(100).max(10000).default(10000)),
         x: numericString(z.number().int()),
         y: numericString(z.number().int()),
         z: numericString(z.number().int())
@@ -28,7 +28,7 @@ export async function loadByTileClusterer(req: Request, res: Response): Promise<
     if (result.features.length < 2) {
         res.send({
             features: result.features,
-            total: result.features.length,
+            total: result.total,
             bounds: bounds
         });
         return;

diff --git a/src/app/v1/load-by-tile.ts b/src/app/v1/load-by-tile.ts
@@ -7,7 +7,7 @@ import {fromWorldCoordinates, tileToWorld} from '../lib/projection/projection';
 
 const getTileRequestSchema = z
     .object({
-        limit: numericString(z.number().int().min(100).max(10000).default(1000)),
+        limit: numericString(z.number().int().min(100).max(10000).default(10000)),
         x: numericString(z.number().int()),
         y: numericString(z.number().int()),
         z: numericString(z.number().int())