set blob type for leafletRasterLayer

Setting the mime type helps with previewing network requests.
This commit is contained in:
Bryan McBride
2023-04-06 22:36:59 -04:00
parent 54096b1b04
commit 4627b96c1d

View File

@@ -6,6 +6,7 @@ import { PMTiles, Source, TileType } from "./index";
export const leafletRasterLayer = (source: PMTiles, options: any) => { export const leafletRasterLayer = (source: PMTiles, options: any) => {
let loaded = false; let loaded = false;
let mimeType: string = "";
const cls = L.GridLayer.extend({ const cls = L.GridLayer.extend({
createTile: function (coord: any, done: any) { createTile: function (coord: any, done: any) {
const el: any = document.createElement("img"); const el: any = document.createElement("img");
@@ -20,6 +21,12 @@ export const leafletRasterLayer = (source: PMTiles, options: any) => {
console.error( console.error(
"Error: archive contains MVT vector tiles, but leafletRasterLayer is for displaying raster tiles. See https://github.com/protomaps/PMTiles/tree/main/js for details." "Error: archive contains MVT vector tiles, but leafletRasterLayer is for displaying raster tiles. See https://github.com/protomaps/PMTiles/tree/main/js for details."
); );
} else if (header.tileType == 2) {
mimeType = "image/png";
} else if (header.tileType == 3) {
mimeType = "image/jpeg";
} else if (header.tileType == 4) {
mimeType = "image/webp";
} }
}); });
loaded = true; loaded = true;
@@ -28,7 +35,7 @@ export const leafletRasterLayer = (source: PMTiles, options: any) => {
.getZxy(coord.z, coord.x, coord.y, signal) .getZxy(coord.z, coord.x, coord.y, signal)
.then((arr) => { .then((arr) => {
if (arr) { if (arr) {
const blob = new Blob([arr.data]); const blob = new Blob([arr.data], { type: mimeType });
const imageUrl = window.URL.createObjectURL(blob); const imageUrl = window.URL.createObjectURL(blob);
el.src = imageUrl; el.src = imageUrl;
el.cancel = null; el.cancel = null;