Open hbd9417 opened 1 month ago
Hi @hbd9417 May I ask why are you using the source code? It makes it difficult for you to maintain the possible bug fixes and such in future.
Id use this snippet in my code. It work without need to install ts or such
import mapboxgl from "mapbox-gl";
import { PmTilesSource } from "mapbox-pmtiles";
//Define custom source
mapboxgl.Style.setSourceType(PmTilesSource.SOURCE_TYPE, PmTilesSource);
map.on("load", () => {
const PMTILES_URL =
"https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles";
const header = await mapboxPmTiles.PmTilesSource.getHeader(PMTILES_URL);
const bounds = [
header.minLon,
header.minLat,
header.maxLon,
header.maxLat,
];
map.addSource('pmTileSourceName', {
type: mapboxPmTiles.PmTilesSource.SOURCE_TYPE,
url: PMTILES_URL,
minzoom: header.minZoom,
maxzoom: header.maxZoom,
bounds: bounds,
});
map.current.showTileBoundaries = true;
map.current.addLayer({
id: "places",
source: "pmTileSourceName",
"source-layer": "places",
type: "circle",
paint: {
"circle-color": "steelblue",
},
maxzoom: 14,
});
});
Thanks for the reply! When I use the code as it is, I get the error below:
./node_modules/mapbox-pmtiles/src/index.ts
Module parse failed: Unexpected token (6:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| // @ts-expect-error
> const VectorTileSourceImpl: Class<VectorTileSource> = mapboxgl.Style.getSourceType<VectorTileSource>("vector");
|
| export const SOURCE_TYPE = "pmtile-source";
May I have your webpack config file? I think the configuration of webpack should be modified.
Are you able to import other packages without any issue?
Yes, I'm able to import other packages without issues.
Here's the webpack config file (next.config), actually I don't have any custom configuration for it:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
compiler: {
removeConsole: false,
},
};
module.exports = nextConfig;
@hbd9417 I need to investigate it more. I think it should be a fix from this package to allow you to use it in webpack project. Do you by any chance have a small project that can share with me so I can test it more to see if I can push a fix for it?
Sure! I made a small project here for you to test. What's the best way for me to send you? Thank you!
Hi @hbd9417 sorry for late reply. can you share it via https://stackblitz.com please?
Hello! I'm new to coding but tried to convert it for using in a NextJS project without TS. I changed also the example use a local pmtile raster file and I'm not getting any error but is also not working. Could you please give me any help? Thanks!
Here's my code to plot a local pmtile (I can read all console.log and the data is correct):