@foodmarketmaker/mapag 0.0.14 → 0.0.16

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -181,7 +181,56 @@ async function sampleTilesForLayers(pmtiles) {
         return [];
     }
 }
+async function pmtilesPixelInfo(url, map, e) {
+    const pmtiles = new PMTiles(url.replace('pmtiles://', ''));
+    const lngLat = e.lngLat; // {lng, lat}
+    // Convert lat/lon to tile coordinates at a chosen zoom
+    const zoom = 10; // pick a zoom level for sampling
+    const x = Math.floor(((lngLat.lng + 180) / 360) * Math.pow(2, zoom));
+    const y = Math.floor(((1 -
+        Math.log(Math.tan((lngLat.lat * Math.PI) / 180) +
+            1 / Math.cos((lngLat.lat * Math.PI) / 180)) /
+            Math.PI) /
+        2) *
+        Math.pow(2, zoom));
+    // 5. Fetch the tile from PMTiles
+    const tile = await pmtiles.getZxy(zoom, x, y);
+    if (!tile) {
+        console.log("No tile found at this location");
+        return undefined;
+    }
+    // Decode the raster tile (PNG or WebP)
+    const blob = new Blob([tile.data]);
+    const bitmap = await createImageBitmap(blob);
+    // Draw to canvas to read pixel
+    const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        console.error("Failed to get canvas context");
+        return undefined;
+    }
+    ctx.drawImage(bitmap, 0, 0);
+    // Convert lat/lon to pixel coordinates inside the tile
+    const px = Math.floor(((lngLat.lng + 180) / 360) * (256 * Math.pow(2, zoom))) % 256;
+    const py = Math.floor(((1 -
+        Math.log(Math.tan((lngLat.lat * Math.PI) / 180) +
+            1 / Math.cos((lngLat.lat * Math.PI) / 180)) /
+            Math.PI) /
+        2) *
+        (256 * Math.pow(2, zoom))) % 256;
+    const pixel = ctx.getImageData(px, py, 1, 1).data;
+    console.log(`Pixel RGBA at ${lngLat.lng},${lngLat.lat}:`, pixel);
+    // const r = pixel[0];
+    // const g = pixel[1];
+    // const b = pixel[2];
+    // const a = pixel[3];
+    return pixel;
+}
 
+const DEFAULT_GLYPHS = "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf";
+// export const DEFAULT_GLYPHS = "'https://geoserveis.icgc.cat/contextmaps/glyphs/{fontstack}/{range}.pbf';"
 class Styles {
     style = signal(MapStyles["streetmap"], ...(ngDevMode ? [{ debugName: "style" }] : []));
     map;
@@ -252,7 +301,13 @@ class Styles {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         }
         const styleSpec = await response.json();
-        styleSpec.glyphs = 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf';
+        console.debug("Glyphs property:", styleSpec.glyphs);
+        if (!styleSpec.glyphs) {
+            styleSpec.glyphs = DEFAULT_GLYPHS;
+        }
+        if (styleData.postFetch) {
+            styleData.postFetch(styleSpec);
+        }
         return styleSpec;
     }
     async fetchAndCacheStyle(styleData) {
@@ -271,9 +326,13 @@ class Styles {
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
             const styleSpec = await response.json();
+            if (styleData.postFetch) {
+                styleData.postFetch(styleSpec);
+            }
             // Add Glyphs
+            console.debug("Glyphs property:", styleSpec.glyphs);
             if (!styleSpec.glyphs) {
-                styleSpec.glyphs = 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf';
+                styleSpec.glyphs = DEFAULT_GLYPHS;
             }
             // Extract source and layer IDs
             const sourceIds = Object.keys(styleSpec.sources || {});
@@ -450,6 +509,25 @@ const MapStyles = {
         url: "https://geoserveis.icgc.cat/contextmaps/icgc_orto_hibrida.json",
         image: "assets/mapag/src/assets/map_icgc_ortho_hybrid.png",
     },
+    // "natgeo" : {
+    //     name: "National Geographic",
+    //     code: "natgeo",
+    //     // url: "https://raw.githubusercontent.com/go2garret/maps/main/src/assets/json/natgeo.json",
+    //     // url: "https://www.arcgis.com/sharing/rest/content/items/cdd1ca79ffc74237bd6f76e5d9803e2e/resources/styles/root.json",
+    //     url :"https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/styles/root.json",
+    //     image: "assets/mapag/src/assets/map_natgeo.png",
+    //     postFetch: (styleJson: StyleSpecification ) => {
+    //       styleJson.sprite = "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/sprites/sprite"
+    //       styleJson.sources["esri"] = {
+    //         type: "vector",
+    //         tiles: [
+    //           "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf"
+    //         ],
+    //         minzoom: 0,
+    //         maxzoom: 23
+    //       }
+    //     }
+    // }
 };
 
 class BasemapSelect {
@@ -14075,6 +14153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
 // Set up PMTiles protocol for MapLibre
 const protocol = new Protocol();
 maplibregl.addProtocol('pmtiles', protocol.tile);
+// maplibregl.addProtocol('pmtiles', protocol.add);
 class MapComponent {
     styles = new Styles();
     zone = inject(NgZone);
@@ -14585,6 +14664,109 @@ class CensusTractMapper {
     };
 }
 
+class EsriMapper {
+    jsonUrl = 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/styles/root.json';
+    SOURCE_ID = 'esri';
+    map = undefined;
+    legends = undefined;
+    count = 0;
+    total = 0;
+    current = [];
+    settings = signal(new EsriSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+    constructor(settings) {
+        if (settings) {
+            this.settings.set({
+                ...this.settings(),
+                ...settings
+            });
+        }
+        else {
+            this.makeSettings();
+        }
+        const _ = effect(() => {
+            const settings = this.settings();
+            this._update(settings);
+        }, ...(ngDevMode ? [{ debugName: "_" }] : []));
+    }
+    async makeSettings() {
+        const settings = new EsriSettings();
+        const data = await fetch(this.jsonUrl)
+            .then(response => response.json());
+        const accepted = [];
+        const rawLawers = data.layers;
+        for (const layer of rawLawers) {
+            const l = layer;
+            accepted.push(l);
+        }
+        settings.options = accepted;
+        settings.layers = new Map();
+        this.settings.set(settings);
+        return settings;
+    }
+    update(settings) {
+        this.settings.set({ ...this.settings(), ...settings });
+    }
+    _update(settings) {
+        this.clear();
+        for (const layerSpec of settings.layers.values()) {
+            if (!this.map) {
+                return;
+            }
+            const map = this.map;
+            const layerId = layerSpec.id;
+            if (map.getLayer(layerId)) {
+                continue; // Layer already exists
+            }
+            try {
+                map.addLayer(layerSpec);
+                this.current.push(layerId);
+            }
+            catch (error) {
+                console.error(`Failed to add layer ${layerId}:`, error);
+            }
+        }
+    }
+    onReady(map, svc) {
+        this.map = map;
+        map.addSource("esri", {
+            type: "vector",
+            tiles: [
+                "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf"
+            ],
+            minzoom: 0,
+            maxzoom: 23
+        });
+        // map.addLayer({
+        //   id: "urban-area",
+        //   type: "fill",
+        //   source: "esri",
+        //   "source-layer": "Urban area", // must match the actual layer name in the vector tiles
+        //   minzoom: 5,
+        //   maxzoom: 12,
+        //   paint: {
+        //     "fill-color": "#8b1650",
+        //     "fill-opacity": 0.8
+        //   }
+        // });
+        // Additional setup if needed
+    }
+    clear() {
+        for (const layerId of this.current) {
+            if (this.map?.getLayer(layerId)) {
+                this.map.removeLayer(layerId);
+            }
+        }
+        this.current = [];
+    }
+    reset() {
+        this.clear();
+    }
+}
+class EsriSettings {
+    options = [];
+    layers = new Map();
+}
+
 class LayerSettings {
     visible = true;
 }
@@ -14809,6 +14991,134 @@ class HardinessSettings extends PolygonLayerSettings {
     borderOpacity = 0;
 }
 
+class NAASMapper {
+    LAYER_ID = 'naas-layer';
+    SOURCE_ID = 'naas-source';
+    settings = signal(new NAASSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+    current = null;
+    currentFeatureID = undefined;
+    over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
+    map = undefined;
+    legends;
+    count = 0;
+    total = 0;
+    constructor(settings) {
+        if (settings) {
+            this.settings.set({
+                ...this.settings(),
+                ...settings
+            });
+        }
+        const _ = effect(() => {
+            const settings = this.settings();
+            this._update(settings);
+        }, ...(ngDevMode ? [{ debugName: "_" }] : []));
+    }
+    update(settings) {
+        this.settings.set({ ...this.settings(), ...settings });
+    }
+    _update(settings) {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        if (settings.visible) {
+            map.setLayoutProperty(this.LAYER_ID, 'visibility', 'visible');
+        }
+        else {
+            map.setLayoutProperty(this.LAYER_ID, 'visibility', 'none');
+        }
+    }
+    create() {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        AddSource(map, this.SOURCE_ID, {
+            type: 'vector',
+            url: 'mapbox://examples.8fgz4egr' // Example vector tile source
+        });
+        const addedFill = AddLayer(map, {
+            id: this.LAYER_ID,
+            source: this.SOURCE_ID,
+            'source-layer': 'naas-data', // Example source layer
+            type: 'fill',
+            paint: {
+                'fill-color': '#888888',
+                'fill-opacity': 0.5
+            }
+        }, StandardLayersMapper.POLYGONS_BACKGROUND);
+        this._update(this.settings());
+        if (!addedFill) {
+            console.error('Failed to add NAAS layer');
+        }
+    }
+    onReady(map, svc) {
+    }
+    reset() {
+    }
+    clear() {
+    }
+}
+class NAASSettings {
+    url = '';
+    visible = true;
+    fillColor = '#0000ff';
+    fillOpacity = 0.1;
+    borderColor = '#01018b';
+    borderWidth = 1;
+    borderOpacity = 1.0;
+    labelsVisible = true;
+    labelsSize = 10;
+    labelsColor = '#000000';
+    labelsHaloColor = '#ffffff';
+    labelsHaloWidth = 1;
+    labelsOpacity = 1.0;
+    labelOverlap = false;
+    autoSelectLayer = false;
+}
+
+class SimpleMapper {
+    reset() {
+        if (this.map) {
+            // Remove existing layers and sources
+            if (this.map.getLayer('esri-natgeo-layer')) {
+                this.map.removeLayer('esri-natgeo-layer');
+            }
+            if (this.map.getSource('esri-natgeo')) {
+                this.map.removeSource('esri-natgeo');
+            }
+            this.count = 0;
+            this.total = 0;
+        }
+    }
+    clear() {
+        this.reset();
+    }
+    legends = undefined;
+    count = 0;
+    total = 0;
+    // Implementation of a simple mapper
+    map = undefined;
+    onReady(map, svc) {
+        this.map = map;
+        map.addSource('esri-natgeo', {
+            type: 'raster',
+            tiles: [
+                // 'https://services.arcgisonline.com/ArcGIS/rest/services/NatGeoStyleBase/MapServer/tile/{z}/{y}/{x}',
+                'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/NatGeoStyleBase/MapServer/tile/{z}/{y}/{x}',
+            ],
+            tileSize: 256,
+        });
+        map.addLayer({
+            id: 'esri-natgeo-layer',
+            type: 'raster',
+            source: 'esri-natgeo',
+        });
+        // Additional setup if needed
+    }
+}
+
 class VectorTileServerMapper {
     src;
     legends;
@@ -15041,6 +15351,7 @@ class WatershedMapper {
             type: 'symbol',
             layout: {
                 'text-field': ['get', 'name'],
+                'text-font': ['Open Sans Regular'],
                 'text-size': this.settings().labelsSize,
                 'text-allow-overlap': this.settings().labelOverlap,
             },
@@ -15239,6 +15550,8 @@ class HttpBoundaryLoader {
 /*
  * Public API Surface of mapag
  */
+// export * from './lib/mappers/cropland-data-layer';
+// export * from './lib/models/census-blocks';
 // export * from './lib/models/census-zipcodes';
 // export * from './lib/models/census-counties';
 // export * from './lib/models/census-states';
@@ -15250,5 +15563,5 @@ class HttpBoundaryLoader {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, DrawingMapper, HardinessMapper, HardinessSettings, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NoOpMapper, RemoveLayer, RemoveSource, SaveMap, SelectMode, StandardLayersMapper, Styles, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
+export { AddLayer, AddSource, AreaMapperMapper, BackgroundMaskMapper, BaseMapLight, BasemapSelect, BasemapSelectMenu, CensusTractMapper, DEFAULT_GLYPHS, DrawingMapper, EsriMapper, EsriSettings, HardinessMapper, HardinessSettings, HttpBoundaryLoader, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapboxMapperGroup, NAASMapper, NAASSettings, NoOpMapper, RemoveLayer, RemoveSource, SaveMap, SelectMode, SimpleMapper, StandardLayersMapper, Styles, VectorTileServerMapper, WatershedMapper, WatershedSettings, discoverLayers, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxLoadImages, mapboxloadImage, pmtilesPixelInfo, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map