Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

pmtiles crash browser #11

Closed
enersis-pst opened this issue May 17, 2024 · 8 comments
Closed

pmtiles crash browser #11

enersis-pst opened this issue May 17, 2024 · 8 comments
Assignees
@am2222
Labels
bug Something isn't working

Comments

@enersis-pst
Copy link

for me the provided pmtiles from https://protomaps.github.io/ doesnt work for me. the cpu load goes to 100% and the map doesnt react.
https://r2-public.protomaps.com/protomaps-sample-datasets/cb_2018_us_zcta510_500k.pmtiles

    map.on("load", () => {

        const PMTILES_URL =
        "https://r2-public.protomaps.com/protomaps-sample-datasets/cb_2018_us_zcta510_500k.pmtiles";

        map.addSource("pmTileSourceName", {
        type: mapboxPmTiles.SOURCE_TYPE, //Add this line
        url: PMTILES_URL,
        maxzoom: 7,
        minzoom: 0
        });

        map.showTileBoundaries = true;
        map.addLayer({
            id: "places",
            source: "pmTileSourceName",
            "source-layer": "zcta",
            type: "fill",
            paint: {
                "fill-color": "steelblue",
            },
            minzoom: 0,
        });
    });
@am2222
Copy link
Owner

am2222 commented May 17, 2024

Can you please use this approach to add your layer and let me know if it still crashes?


const header = await PmTilesSource.getHeader(url);
const bounds: [number, number, number, number] = [
    header.minLon,
    header.minLat,
    header.maxLon,
    header.maxLat,
  ];

  map.addSource('sourceName', {
    type: PmTilesSource.SOURCE_TYPE,
    url: url,
    minzoom: header.minZoom,
    maxzoom: header.maxZoom,
    bounds: bounds,
  })

@enersis-pst
Copy link
Author

same

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Add 3D terrain to a map</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/mapbox-pmtiles@1.0.38/dist/mapbox-pmtiles.umd.min.js"
    ></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
          const map = new mapboxgl.Map({
              container: 'map', // container ID
              center: [8.75823296688921,
                51.020439215754806], // starting position [lng, lat]
              zoom: 9 ,// starting zoom,
              accessToken:"pk.eyJ1IjoibWFqaWRob2phdGlyZWFkeSIsImEiOiJjbHJxbXZvZDEwMDJhMmtuMmx6NHEwYTV2In0.eLlTQdMMrimVg9NxacXFmg"
          });
          mapboxgl.Style.setSourceType(mapboxPmTiles.SOURCE_TYPE, mapboxPmTiles.PmTilesSource);

          map.on("load", async() => {

              const PMTILES_URL =
              "https://r2-public.protomaps.com/protomaps-sample-datasets/cb_2018_us_zcta510_500k.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.addSource("pmTileSourceName", {
              type: mapboxPmTiles.SOURCE_TYPE, //Add this line
              url: PMTILES_URL,
              maxzoom: 7,
              minzoom: 0
              }); */

              map.showTileBoundaries = true;
              map.addLayer({
                  id: "places",
                  source: "pmTileSourceName",
                  "source-layer": "zcta",
                  type: "fill",
                  paint: {
                      "fill-color": "steelblue",
                  },
                  minzoom: 0,
              });
          });
    </script>
  </body>
</html>

@enersis-pst
Copy link
Author

enersis-pst commented May 18, 2024 •
edited
Loading

does this lib support PMTiles V3? maybe its because this pmbtiles are v3?

update: im wrong, metadata tells v2.

@am2222
Copy link
Owner

am2222 commented May 19, 2024

It should support newer versions but I still need to investigate it.

Will be able to work on it this week!

@enersis-pst
Copy link
Author

hey, do you found any solution?

@am2222
Copy link
Owner

am2222 commented Jun 1, 2024

@enersis-pst I tried to find the reason but could not find it yet. If you can also share some debugging information to find the potential memory leak I appreciate it.

am2222 pushed a commit that referenced this issue Jun 4, 2024
bugfix(#11): mp-11-fixed-crash-on-invalid-zoom
a8d6acd
@am2222 am2222 mentioned this issue Jun 4, 2024
Merged
am2222 added a commit that referenced this issue Jun 4, 2024
@am2222
Merge pull request #12 from am2222/bugfix/mp-11-fix-crash-on-invalid-…
4e13ae1 
…zoom

bugfix(#11): mp-11-fixed-crash-on-invalid-zoom
@am2222
Copy link
Owner

am2222 commented Jun 4, 2024

@enersis-pst I managed to find the issue with the pmtile. Apparently the zoom values are string and they cause some sort of the memory leak.
related issue:
mapbox/mapbox-gl-js#12029

@am2222 am2222 self-assigned this Jun 4, 2024
@am2222 am2222 added the bug Something isn't working label Jun 4, 2024
@am2222 am2222 closed this as completed Jun 4, 2024
@enersis-pst
Copy link
Author

thanks!

am2222 pushed a commit that referenced this issue Jun 5, 2024
feat(#11): mp-11-set-zoom-from-header
78f607a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@am2222 am2222

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@am2222 @enersis-pst