From 4627b96c1dd700607fa6c8c19a9244e56e089148 Mon Sep 17 00:00:00 2001
From: Bryan McBride <mcbride.bryan@gmail.com>
Date: Thu, 6 Apr 2023 22:36:59 -0400
Subject: [PATCH] set blob type for leafletRasterLayer

Setting the mime type helps with previewing network requests.
---
 js/adapters.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/adapters.ts b/js/adapters.ts
index dcb8072..960ff95 100644
--- a/js/adapters.ts
+++ b/js/adapters.ts
@@ -6,6 +6,7 @@ import { PMTiles, Source, TileType } from "./index";
 
 export const leafletRasterLayer = (source: PMTiles, options: any) => {
   let loaded = false;
+  let mimeType: string = "";
   const cls = L.GridLayer.extend({
     createTile: function (coord: any, done: any) {
       const el: any = document.createElement("img");
@@ -20,6 +21,12 @@ export const leafletRasterLayer = (source: PMTiles, options: any) => {
             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."
             );
+          } 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;
@@ -28,7 +35,7 @@ export const leafletRasterLayer = (source: PMTiles, options: any) => {
         .getZxy(coord.z, coord.x, coord.y, signal)
         .then((arr) => {
           if (arr) {
-            const blob = new Blob([arr.data]);
+            const blob = new Blob([arr.data], { type: mimeType });
             const imageUrl = window.URL.createObjectURL(blob);
             el.src = imageUrl;
             el.cancel = null;