Sumbera · February 29, 2024 15:44 · Jan 22, 2021 · Jul 8, 2016 · Aug 16, 2015 · Aug 13, 2015
diff --git a/index.html b/index.html
@@ -57,12 +57,22 @@
             indexMaxPoints: 100000, // max number of points per tile in the index
         };
         //-------------------------------------------------
-        function colorizeFeatures(data) {
+         function colorizeFeatures(data) {
             var counter = 0;
+
             for (var i = 0; i < data.features.length; i++) {
-                data.features[i].properties.color = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
-                counter += data.features[i].geometry.coordinates[0].length;
+				data.features[i].properties.color = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
+
+				if (data.features[i].geometry.coordinates[0])
+     				counter += data.features[i].geometry.coordinates[0].length;
+				else{
+					console.log("empty coordinates at " + i + " patching with 0.0...");
+					data.features[i].geometry.coordinates[0] = 0.0
+					data.features[i].geometry.coordinates[1] = 0.0
+				}
+
             }
+
             return counter;
         }
 

diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,15 @@
+ Licensed under MIT
+ Copyright (c) 2015 Stanislav Sumbera, 
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files
+ (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, 
+ copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+ and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+ IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
+ OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/readme.md b/readme.md
@@ -8,4 +8,4 @@ Sample of using geojson-vt generated tiles inside leaflet 0.7. It uses custom (g
 " target="_blank"><img src="http://img.youtube.com/vi/zlFByhJPvgA/0.jpg" 
  /></a>
 
-info also here: http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/
+info also [here](http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/)
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
 
     <script>
 
-        var leafletMap = L.map('map').setView([50.00, 14.44], 3);
+        var leafletMap = L.map('map').setView([50.00, 14.44], 9);
         L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-background,$fff[difference],$fff[@23],$fff[hsl-saturation@20],toner-lines[destination-in])/{z}/{x}/{y}.png")
             .addTo(leafletMap);
 

diff --git a/readme.md b/readme.md
@@ -1,7 +1,11 @@
 Sample of using geojson-vt generated tiles inside leaflet 0.7. It uses custom (generic)  TiledCanvas L.CanvasTiles.js .
 
+<a href="http://www.youtube.com/watch?feature=player_embedded&v=hEFnUU3SPL0
+" target="_blank"><img src="http://img.youtube.com/vi/hEFnUU3SPL0/0.jpg" 
+ /></a>
+
 <a href="http://www.youtube.com/watch?feature=player_embedded&v=zlFByhJPvgA
 " target="_blank"><img src="http://img.youtube.com/vi/zlFByhJPvgA/0.jpg" 
-alt="geojson-vt" width="240" height="180" border="10" /></a>
+ /></a>
 
 info also here: http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/
diff --git a/readme.md b/readme.md
@@ -1,2 +1,7 @@
 Sample of using geojson-vt generated tiles inside leaflet 0.7. It uses custom (generic)  TiledCanvas L.CanvasTiles.js .
-videos here: http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/
+
+<a href="http://www.youtube.com/watch?feature=player_embedded&v=zlFByhJPvgA
+" target="_blank"><img src="http://img.youtube.com/vi/zlFByhJPvgA/0.jpg" 
+alt="geojson-vt" width="240" height="180" border="10" /></a>
+
+info also here: http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/
diff --git a/readme.md b/readme.md
@@ -1,2 +1,2 @@
 Sample of using geojson-vt generated tiles inside leaflet 0.7. It uses custom (generic)  TiledCanvas L.CanvasTiles.js .
-videos here: [http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/]
+videos here: http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/
diff --git a/readme.md b/readme.md
@@ -1,2 +1,2 @@
 Sample of using geojson-vt generated tiles inside leaflet 0.7. It uses custom (generic)  TiledCanvas L.CanvasTiles.js .
-videos here: http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/
+videos here: [http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/]
diff --git a/readme.md b/readme.md
@@ -1,2 +1,2 @@
 Sample of using geojson-vt generated tiles inside leaflet 0.7. It uses custom (generic)  TiledCanvas L.CanvasTiles.js .
-more info to come...
+videos here: http://blog.sumbera.com/2015/05/31/geojson-vt-on-leaflet/
diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
     <div id="map"></div>
     <div id="drop" style="position:absolute; right:0px; top:0px; width: 200px; height:50%;background-color: white;
                           border-style:dashed; border-color: blue; border-width:1px; border-radius:4px;padding:5px; opacity:0.9">
-        Drop WGS84 GeoJSON here
+        <b>Drop WGS84 GeoJSON here</b>
     </div>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
     <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
@@ -57,10 +57,13 @@
             indexMaxPoints: 100000, // max number of points per tile in the index
         };
         //-------------------------------------------------
-        function colorizeFeatures(data){
+        function colorizeFeatures(data) {
+            var counter = 0;
             for (var i = 0; i < data.features.length; i++) {
                 data.features[i].properties.color = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
+                counter += data.features[i].geometry.coordinates[0].length;
             }
+            return counter;
         }
 
         var tileIndex = geojsonvt(data, tileOptions);
@@ -96,9 +99,12 @@
                     data = JSON.parse(event.target.result);
                     elapsed = new Date().setTime(new Date().getTime() - start);
                     dropArea.innerHTML += " " + elapsed + "ms";
-                    colorizeFeatures(data);
+
+                    var vertCount = colorizeFeatures(data);
+
                     start = new Date().getTime();
                     dropArea.innerHTML += "<br/>&nbsp;Indexing... " + data.features.length + " features";
+                    dropArea.innerHTML += "<br/>&nbsp;with  " + vertCount + " vertexes";
                     tileIndex = geojsonvt(data, tileOptions); //eslint-disable-line
                     elapsed = new Date().setTime(new Date().getTime() - start);
                     dropArea.innerHTML += " " + elapsed + "ms";

diff --git a/index.html b/index.html
@@ -88,11 +88,11 @@
             reader.onload = function (event) {
                 var elapsed = new Date().setTime(new Date().getTime() - start);
                 dropArea.innerHTML += " " + elapsed + "ms";
-                dropArea.innerHTML += "<br/>&nbsp;Parsing... " + humanFileSize(event.target.result.length);
-                start = new Date().getTime();
-
-                var data;
                 try {
+                    dropArea.innerHTML += "<br/>&nbsp;Parsing... " + humanFileSize(event.target.result.length);
+                    start = new Date().getTime();
+
+                    var data;
                     data = JSON.parse(event.target.result);
                     elapsed = new Date().setTime(new Date().getTime() - start);
                     dropArea.innerHTML += " " + elapsed + "ms";

diff --git a/index.html b/index.html
@@ -11,6 +11,9 @@
             margin: 0;
             background: rgb(14, 21, 30);
             height: 100%;
+            font-family: Tahoma, Geneva, Verdana, sans-serif;
+            font-size:12px;
+            color:#808080;
         }
 
         #map {
@@ -25,54 +28,105 @@
 </head>
 <body>
     <div id="map"></div>
+    <div id="drop" style="position:absolute; right:0px; top:0px; width: 200px; height:50%;background-color: white;
+                          border-style:dashed; border-color: blue; border-width:1px; border-radius:4px;padding:5px; opacity:0.9">
+        Drop WGS84 GeoJSON here
+    </div>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
     <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
     <script src="http://www.sumbera.com/gist/js/vt/geojson-vt-dev.js"></script>
     <script src="http://www.sumbera.com/gist/js/leaflet/canvas/L.CanvasTiles.js"></script>
 
-    <script>
-    // -- module, require mockups so we can use orig files unmodified
-    module = {};
-
-    </script>
-
     <script src="http://www.sumbera.com/gist/data/CZDistricts.js"></script> 
 
 
     <script>
 
-        var leafletMap = L.map('map').setView([50.00, 14.44], 5);
+        var leafletMap = L.map('map').setView([50.00, 14.44], 3);
         L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-background,$fff[difference],$fff[@23],$fff[hsl-saturation@20],toner-lines[destination-in])/{z}/{x}/{y}.png")
             .addTo(leafletMap);
 
-
-        for (var i = 0; i < data.features.length; i++) {
-            data.features[i].properties.color = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
+        var tileOptions = {
+            maxZoom: 20,  // max zoom to preserve detail on
+            tolerance: 5, // simplification tolerance (higher means simpler)
+            extent: 4096, // tile extent (both width and height)
+            buffer: 64,   // tile buffer on each side
+            debug: 0,      // logging level (0 to disable, 1 or 2)
+
+            indexMaxZoom: 0,        // max zoom in the initial tile index
+            indexMaxPoints: 100000, // max number of points per tile in the index
+        };
+        //-------------------------------------------------
+        function colorizeFeatures(data){
+            for (var i = 0; i < data.features.length; i++) {
+                data.features[i].properties.color = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
+            }
         }
 
+        var tileIndex = geojsonvt(data, tileOptions);
+
+        var dropArea = document.getElementById('drop');
+
+        dropArea.ondragover = function () {
+            return false;
+        };
+        dropArea.ondragend = function () {
+            return false;
+        };
+        dropArea.ondrop = function (e) {
+            // -- helper from viz.js test of geojson-vt
+            function humanFileSize(size) {
+                var i = Math.floor(Math.log(size) / Math.log(1024));
+                return Math.round(100 * (size / Math.pow(1024, i))) / 100 + ' ' + ['B', 'kB', 'MB', 'GB'][i];
+            }
+            var reader = new FileReader();
+
+            reader.readAsText(e.dataTransfer.files[0]);
+            dropArea.innerHTML += "<br/>";
+            dropArea.innerHTML += "<br/>Loading... " + e.dataTransfer.files[0].name.toString();
+            var start = new Date().getTime();
+            reader.onload = function (event) {
+                var elapsed = new Date().setTime(new Date().getTime() - start);
+                dropArea.innerHTML += " " + elapsed + "ms";
+                dropArea.innerHTML += "<br/>&nbsp;Parsing... " + humanFileSize(event.target.result.length);
+                start = new Date().getTime();
+
+                var data;
+                try {
+                    data = JSON.parse(event.target.result);
+                    elapsed = new Date().setTime(new Date().getTime() - start);
+                    dropArea.innerHTML += " " + elapsed + "ms";
+                    colorizeFeatures(data);
+                    start = new Date().getTime();
+                    dropArea.innerHTML += "<br/>&nbsp;Indexing... " + data.features.length + " features";
+                    tileIndex = geojsonvt(data, tileOptions); //eslint-disable-line
+                    elapsed = new Date().setTime(new Date().getTime() - start);
+                    dropArea.innerHTML += " " + elapsed + "ms";
+                    tileLayer.redraw();
+
+
+                } catch (err) {
+                    dropArea.innerHTML += "<br/>&nbsp;Error: " + err;
+                }
+
 
+            };
 
-        var tileIndex = geojsonvt(data,
-            {
-                maxZoom: 20,  // max zoom to preserve detail on
-                tolerance: 5, // simplification tolerance (higher means simpler)
-                extent: 4096, // tile extent (both width and height)
-                buffer: 64,   // tile buffer on each side
-                debug: 0,      // logging level (0 to disable, 1 or 2)
+            e.preventDefault();
+            return false;
+        };
 
-                indexMaxZoom: 0,        // max zoom in the initial tile index
-                indexMaxPoints: 100000, // max number of points per tile in the index
-            }
-            );
 
-        var cnvLayer = L.canvasTiles()
+        colorizeFeatures(data);
+
+        var tileLayer = L.canvasTiles()
                       .params({ debug: false, padding: 5 })
                       .drawing(drawingOnCanvas)
 
 
         var pad = 0;
 
-        cnvLayer.addTo(leafletMap);
+        tileLayer.addTo(leafletMap);
 
 
         function drawingOnCanvas(canvasOverlay, params) {
@@ -129,14 +183,9 @@
                 ctx.stroke();
             }
 
-
         };
 
 
-
-
-
-
     </script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -0,0 +1,142 @@
+<!doctype html>
+<html>
+<head>
+    <title>Many polygons with geojson-vt on Leaflet</title>
+    <meta charset="utf-8">
+
+    <style>
+        html, body {
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            background: rgb(14, 21, 30);
+            height: 100%;
+        }
+
+        #map {
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            background-color: #333;
+        }
+    </style>
+
+
+</head>
+<body>
+    <div id="map"></div>
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
+    <script src="http://www.sumbera.com/gist/js/vt/geojson-vt-dev.js"></script>
+    <script src="http://www.sumbera.com/gist/js/leaflet/canvas/L.CanvasTiles.js"></script>
+
+    <script>
+    // -- module, require mockups so we can use orig files unmodified
+    module = {};
+
+    </script>
+
+    <script src="http://www.sumbera.com/gist/data/CZDistricts.js"></script> 
+
+
+    <script>
+
+        var leafletMap = L.map('map').setView([50.00, 14.44], 5);
+        L.tileLayer("http://{s}.sm.mapstack.stamen.com/(toner-background,$fff[difference],$fff[@23],$fff[hsl-saturation@20],toner-lines[destination-in])/{z}/{x}/{y}.png")
+            .addTo(leafletMap);
+
+
+        for (var i = 0; i < data.features.length; i++) {
+            data.features[i].properties.color = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
+        }
+
+
+
+        var tileIndex = geojsonvt(data,
+            {
+                maxZoom: 20,  // max zoom to preserve detail on
+                tolerance: 5, // simplification tolerance (higher means simpler)
+                extent: 4096, // tile extent (both width and height)
+                buffer: 64,   // tile buffer on each side
+                debug: 0,      // logging level (0 to disable, 1 or 2)
+
+                indexMaxZoom: 0,        // max zoom in the initial tile index
+                indexMaxPoints: 100000, // max number of points per tile in the index
+            }
+            );
+
+        var cnvLayer = L.canvasTiles()
+                      .params({ debug: false, padding: 5 })
+                      .drawing(drawingOnCanvas)
+
+
+        var pad = 0;
+
+        cnvLayer.addTo(leafletMap);
+
+
+        function drawingOnCanvas(canvasOverlay, params) {
+
+            var bounds = params.bounds;
+            params.tilePoint.z = params.zoom;
+
+            var ctx = params.canvas.getContext('2d');
+            ctx.globalCompositeOperation = 'source-over';
+
+
+            console.log('getting tile z' + params.tilePoint.z + '-' + params.tilePoint.x + '-' + params.tilePoint.y);
+
+            var tile = tileIndex.getTile(params.tilePoint.z, params.tilePoint.x, params.tilePoint.y);
+            if (!tile) {
+                console.log('tile empty');
+                return;
+            }
+
+            ctx.clearRect(0, 0, params.canvas.width, params.canvas.height);
+
+            var features = tile.features;
+
+            ctx.strokeStyle = 'grey';
+
+
+            for (var i = 0; i < features.length; i++) {
+                var feature = features[i],
+                    type = feature.type;
+
+                ctx.fillStyle = feature.tags.color ? feature.tags.color : 'rgba(255,0,0,0.05)';
+                ctx.beginPath();
+
+                for (var j = 0; j < feature.geometry.length; j++) {
+                    var geom = feature.geometry[j];
+
+                    if (type === 1) {
+                        ctx.arc(geom[0] * ratio + pad, geom[1] * ratio + pad, 2, 0, 2 * Math.PI, false);
+                        continue;
+                    }
+
+                    for (var k = 0; k < geom.length; k++) {
+                        var p = geom[k];
+                        var extent = 4096;
+
+                        var x = p[0] / extent * 256;
+                        var y = p[1] / extent * 256;
+                        if (k) ctx.lineTo(x  + pad, y   + pad);
+                        else ctx.moveTo(x  + pad, y  + pad);
+                    }
+                }
+
+                if (type === 3 || type === 1) ctx.fill('evenodd');
+                ctx.stroke();
+            }
+
+
+        };
+
+
+
+
+
+
+    </script>
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,2 @@
+Sample of using geojson-vt generated tiles inside leaflet 0.7. It uses custom (generic)  TiledCanvas L.CanvasTiles.js .
+more info to come...
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Sample of using geojson-vt generated tiles inside leaflet 0.7. It uses custom (generic) TiledCanvas L.CanvasTiles.js .
		more info to come...
No results found