version 0.0.1

Raruto · Apr 14, 2019 · 10e4b23 · 10e4b23
commit 10e4b23
Show file tree

Hide file tree

Showing 9 changed files with 1,265 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+npm-debug.log
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -0,0 +1,74 @@
+# leaflet-kmz
+A KMZ file loader for Leaflet Maps
+
+_For a working example see [demo](https://raruto.github.io/examples/leaflet-kmz/leaflet-kmz.html)_
+
+---
+
+## How to use
+
+1. **include CSS & JavaScript**
+    ```html
+    <head>
+    ...
+    <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style>
+    <!-- Leaflet (JS/CSS) -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
+    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
+    <!-- JSZIP -->
+    <script src="https://unpkg.com/jszip@3.1.5/dist/jszip.min.js"></script>
+    <!-- togeojson -->
+    <script src="https://unpkg.com/togeojson@0.16.0/togeojson.js"></script>
+    <!-- geojson-vt -->
+    <script src="https://unpkg.com/geojson-vt@3.0.0/geojson-vt.js"></script>
+    <!-- Leaflet-KMZ -->
+    <script src="https://raruto.github.io/cdn/leaflet-kmz/0.0.1/libs/KMZParser.js"></script>
+    <script src="https://raruto.github.io/cdn/leaflet-kmz/0.0.1/libs/GridLayer.GeoJSON.js"></script>
+    ...
+    </head>
+    ```
+2. **choose a div container used for the slippy map**
+    ```html
+    <body>
+    ...
+	  <div id="map"></div>
+    ...
+    </body>
+    ```
+3. **create your first simple “leaflet-kmz slippy map**
+    ```html
+    <script>
+      var map = L.map('map');
+      map.setView(new L.LatLng(43.5978, 12.7059), 5);
+
+      var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+        maxZoom: 17,
+        attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
+        opacity: 0.90
+      });
+      OpenTopoMap.addTo(map);
+
+      var kmzParser = new L.KMZParser({
+        onKMZLoaded: function(layer, name) {
+          control.addOverlay(layer, name);
+          layer.addTo(map);
+        }
+      });
+
+      kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/regioni.kmz');
+      kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/capitali.kmz');
+      kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/globe.kmz');
+
+      var control = L.control.layers(null, null).addTo(map);
+    </script>
+    ```
+
+_**NB** to be able to use Google files (eg. Google My Maps) you **MUST** use a valid third-party kml proxy server._
+
+---
+
+**Compatibile with:** leaflet@1.3.4, jszip@3.1.5, togeojson@0.16.0, geojson-vt@3.0.0
+
+---
+
+**Contributors:** [Raruto](https://github.com/Raruto)
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-slate
diff --git a/libs/GridLayer.GeoJSON.js b/libs/GridLayer.GeoJSON.js
@@ -0,0 +1,180 @@
+/**
+ * A plugin combining geojson-vt with leafletjs which is initially inspired by leaflet-geojson-vt.
+ *
+ * @author Brandonxiang, Raruto
+ *
+ * @link https://github.com/brandonxiang/leaflet-geojson-vt
+ */
+L.GridLayer.GeoJSON = L.GridLayer.extend({
+  options: {
+    async: false,
+    maxZoom: 24,
+    tolerance: 3,
+    debug: 0,
+    icon: {
+      width: 28,
+      height: 28
+    },
+  },
+
+  initialize: function(geojson, options) {
+    L.setOptions(this, options);
+    L.GridLayer.prototype.initialize.call(this, options);
+    this.xmlDoc = options.xmlDoc;
+    this.tileIndex = geojsonvt(geojson, this.options);
+  },
+
+  createTile: function(coords) {
+    var tile = L.DomUtil.create('canvas', 'leaflet-tile');
+    var size = this.getTileSize();
+    tile.width = size.x;
+    tile.height = size.y;
+    var ctx = tile.getContext('2d');
+
+    // return the tile so it can be rendered on screen
+    var tileInfo = this.tileIndex.getTile(coords.z, coords.x, coords.y);
+    var features = tileInfo ? tileInfo.features : [];
+    for (var i = 0; i < features.length; i++) {
+      var feature = features[i];
+      this.drawFeature(ctx, feature);
+    }
+    return tile;
+  },
+
+  drawFeature: function(ctx, feature) {
+    ctx.beginPath();
+    this.setStyle(ctx, feature);
+
+    if (feature.type === 1) {
+      this.drawIcon(ctx, feature);
+    } else if (feature.type === 2) {
+      this.drawLine(ctx, feature);
+    } else if (feature.type === 3) {
+      this.drawPolygon(ctx, feature);
+    } else {
+      console.warn('Unsupported feature type: ' + feature.geometry.type, feature);
+    }
+
+    ctx.stroke();
+  },
+
+  drawIcon: function(ctx, feature) {
+    var icon = new Image(),
+      styleMapHash = this.xmlDoc.querySelector(feature.tags.styleMapHash.normal),
+      iconHref = styleMapHash.querySelector('Icon href').innerHTML,
+      p = feature.geometry[0],
+      width = this.options.icon.width,
+      height = this.options.icon.height;
+    icon.onload = function() {
+      ctx.drawImage(icon, (p[0] / 16.0) - (width / 2.0), (p[1] / 16.0) - (height / 2.0), width, height);
+    };
+    icon.src = iconHref;
+  },
+
+  drawLine: function(ctx, feature) {
+    for (var j = 0; j < feature.geometry.length; j++) {
+      var ring = feature.geometry[j];
+      for (var k = 0; k < ring.length; k++) {
+        var p = ring[k];
+        if (k) ctx.lineTo(p[0] / 16.0, p[1] / 16.0);
+        else ctx.moveTo(p[0] / 16.0, p[1] / 16.0);
+      }
+    }
+  },
+
+  drawPolygon: function(ctx, feature) {
+    this.drawLine(ctx, feature);
+    ctx.fill('evenodd');
+  },
+
+  setStyle: function(ctx, feature) {
+
+    var style = {};
+
+    if (feature.type === 1) {
+      style = this.setPointStyle(feature, style);
+    } else if (feature.type === 2) {
+      style = this.setLineStyle(feature, style);
+    } else if (feature.type === 3) {
+      style = this.setPolygonStyle(feature, style);
+    }
+
+    if (style.stroke) {
+      ctx.lineWidth = this.setWeight(style.weight);
+      console.log(style);
+      console.log(feature);
+      ctx.strokeStyle = this.setOpacity(style.stroke, style.opacity);
+    } else {
+      ctx.lineWidth = 0;
+      ctx.strokeStyle = {};
+    }
+    if (style.fill) {
+      ctx.fillStyle = this.setOpacity(style.fill, style.fillOpacity);
+    } else {
+      ctx.fillStyle = {};
+    }
+  },
+
+  setPointStyle: function(feature, style) {
+    return style;
+  },
+
+  setLineStyle: function(feature, style) {
+    style.weight = feature.tags["stroke-width"] * 1.05;
+    style.opacity = feature.tags["stroke-opacity"];
+    style.stroke = feature.tags.stroke;
+    return style;
+  },
+
+  setPolygonStyle: function(feature, style) {
+    style = this.setLineStyle(feature, style);
+    style.fill = feature.tags.fill;
+    style.fillOpacity = feature.tags["fill-opacity"];
+    return style;
+  },
+
+  setWeight: function(weight) {
+    return weight || 5;
+  },
+
+  setOpacity: function(color, opacity) {
+    color = color || '#f00';
+    if (opacity) {
+      if (this._iscolorHex(color)) {
+        var colorRgb = this._colorRgb(color);
+        return "rgba(" + colorRgb[0] + "," + colorRgb[1] + "," + colorRgb[2] + "," + opacity + ")";
+      } else {
+        return color;
+      }
+    } else {
+      return color;
+    }
+  },
+
+  _iscolorHex: function(color) {
+    var sColor = color.toLowerCase();
+    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+    return reg.test(sColor);
+  },
+
+  _colorRgb: function(color) {
+    var sColor = color.toLowerCase();
+    if (sColor.length === 4) {
+      var sColorNew = "#";
+      for (var i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+      }
+      sColor = sColorNew;
+    }
+    var sColorChange = [];
+    for (var i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
+    }
+    return sColorChange;
+  }
+
+})
+
+L.gridLayer.geoJson = function(geojson, options) {
+  return new L.GridLayer.GeoJSON(geojson, options);
+};
diff --git a/libs/GridLayer.GeoJSON.min.js b/libs/GridLayer.GeoJSON.min.js