From d02df6ecd7fd1fcc11d24cc6b79afd6d7dd07097 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Wed, 29 Dec 2021 20:30:22 +0800
Subject: [PATCH] inspect vector tiles

---
 examples/inspector.html | 95 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 85 insertions(+), 10 deletions(-)
diff --git a/examples/inspector.html b/examples/inspector.html
index abc856d..c8d02d6 100644
--- a/examples/inspector.html
+++ b/examples/inspector.html
@@ -12,7 +12,7 @@
     </head>
     <body class="sans-serif v-scroll bg-dark-gray flex">
         <div class="w-50 vh-100 bg-light-gray pa4 flex flex-column">
-            <div class="f4 w-100" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
+            <div class="f4 w-100 dn" id="inputPanel" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
                 <div class=" f4 fw5 dark-gray b--dark-gray ba4 b--dotted bw1 pa3">Drag and drop a local PMTiles file here...</div>
                 <div class="pv3">
                     <div class="flex">
@@ -45,19 +45,97 @@
         <div class="w-50 flex items-center justify-center">
             <div>
                 <div id="preview_label" class="white mb2"></div>
-                <img id="preview"></img>
+                <div id="preview"></div>
             </div>
         </div>
+        <div id="tooltip" class="absolute pa1 bg-black white f6 dn">
+        </div>
     </body>
-    <script>
-        function loadEntry(file,row) {
+    <script type="module">
+        window.dragOverHandler = (ev) => {
+          ev.preventDefault();
+        }
+
+        let smartCompare = (a,b) => {
+            if (a.name === "earth") return -4
+            if (a.name === "water") return -3
+            if (a.name === "natural") return -2
+            if (a.name === "landuse") return -1
+            return 0
+        }
+
+        import {VectorTile} from "https://cdn.skypack.dev/@mapbox/vector-tile";
+        import Protobuf from "https://cdn.skypack.dev/pbf";
+        import {schemeSet3} from "https://cdn.skypack.dev/d3-scale-chromatic@3";
+        d3.select("#inputPanel").classed("dn",false);
+
+        let loadEntry = (file,format,row) => {
             var blob = file.slice(row[3],row[3]+row[4]);
             var imageUrl = window.URL.createObjectURL(blob);
             d3.select("#preview_label").text(`${row[0]} ${row[1]} ${row[2]}`);
-            let preview = d3.select("#preview").attr("src",imageUrl);
+            d3.select("#preview").selectAll("*").remove();
+            if (format === "pbf") {
+                blob.arrayBuffer().then(a => {
+                    let tile = new VectorTile(new Protobuf(a));
+                    let data = [];
+                    for (let [name,layer] of Object.entries(tile.layers)) {
+                        let features = [] 
+                        for (var i = 0; i < layer.length; i++) {
+                            let feature = layer.feature(i);
+                            let path = d3.path();
+                            let geom = feature.loadGeometry();
+                            for (let ring of geom) {
+                                    path.moveTo(ring[0].x,ring[0].y);
+                                    for (var j = 1; j < ring.length; j++) {
+                                        path.lineTo(ring[j].x,ring[j].y);
+                                    }
+                                    path.closePath();
+                            }
+                            features.push({path:path.toString(),type:feature.type,properties:feature.properties,id:feature.id})
+                        }
+                        data.push({name:name,features:features})
+                    }
+
+                    data.sort(smartCompare);
+
+                    let svg = d3.select("#preview").append("svg").attr("viewBox","0 0 4096 4096").attr("width",600).attr("height",600);
+                    let layers = svg.selectAll("g").data(data).enter().append("g").attr("color",(d,i) => { return schemeSet3[i % 12]});
+                    let features = layers.selectAll("path").data(d => d.features).enter().append("path")
+
+                    features.attr("d",d => d.path)
+                        .attr("stroke",d => { return d.type === 2 ? "currentColor" : "" })
+                        .attr("stroke-width",d => { return d.type === 2 ? 10 : undefined })
+                        .attr("fill",d => { return d.type === 3 ? "currentColor" : "none" })
+                        .attr("opacity",0.3);
+
+                    features.on("mouseover", function(ev,d) {
+                        d3.select(this).attr("color","white");
+                        let tooltip = d3.select("#tooltip")
+                        let rows = Object.entries(d.properties).map(a => `${a[0]}: ${a[1]}`);
+                        rows.unshift(d3.select(this.parentNode).datum().name);
+                        tooltip.classed("dn",false).selectAll("div")
+                            .data(rows).enter().append("div")
+                            .text(d => d);
+                    })
+                    features.on("mousemove", function(ev) {
+                        let tooltip = d3.select("#tooltip")
+                        .style("top",(ev.pageY+5) +"px")
+                        .style("left",(ev.pageX+5) +"px")
+                    })
+
+                    features.on("mouseout", function(ev,d,i) {
+                        d3.select(this).attr("color","currentColor");
+                        let tooltip = d3.select("#tooltip")
+                        tooltip.classed("dn",true)
+                            .selectAll("div").remove();
+                    })
+                });
+            } else {
+                d3.select("#preview").append("img").attr("src",imageUrl);
+            }
         }
 
-        function dropHandler(ev) {
+        window.dropHandler = ev => {
             ev.preventDefault();
             var data = ev.dataTransfer.items;
             var file = data[0].getAsFile();
@@ -78,13 +156,10 @@
                     entries.push(pmtiles.parseEntry(entries_view,i));
                 }
                 let row = d3.select("#root_entries").selectAll("tr").data(entries).enter().append("tr")
-                    .attr("class","f6 pv1 dim pointer").on("click", (ev,d) => { loadEntry(file, d); });
+                    .attr("class","f6 pv1 dim pointer").on("click", (ev,d) => { loadEntry(file, metadata.format, d); });
                 row.selectAll("td").data(d => d).enter().append("td").text(d => d);
             })
         }
-        function dragOverHandler(ev) {
-          ev.preventDefault();
-        }
 
         // const queryString = window.location.search;
         // const urlParams = new URLSearchParams(queryString);
