Merge dd7717d into c027894

examples/plugins_vrt.html

@@ -58,14 +58,23 @@
                     parsedData: feature,
                 });
 
-                var velibLayer = new itowns.ColorLayer('velib', { source: velibSource,
-                    style: {
+                var velibLayer = new itowns.ColorLayer('velib', {
+                    source: velibSource,
+                    style: new itowns.Style({
+                        zoom: { min: 10, max: 20 },
                         point: {
                             color: 'cyan',
                             line: 'red',
-                            radius: 5,
-                        }
-                    }});
+                            radius: 3,
+                        },
+                        text: {
+                            field: '{name}\nCapacity: {Capacity}',
+                            haloColor: 'white',
+                            haloWidth: 1,
+                        },
+                    }),
+                    labelEnabled: true,
+                });
 
                 return view.addLayer(velibLayer);
             }).then(function _(layer) {

examples/source_file_kml_raster.html

@@ -64,10 +64,22 @@
                 parser: itowns.KMLParser.parse,
             });
 
+            var kmlStyle = new itowns.Style({
+                zoom: { min: 10, max: 20 },
+                text: {
+                    field: '{name}{description}',
+                    haloColor: 'white',
+                    haloWidth: 1,
+                    transform: 'uppercase',
+                },
+            });
+
             var kmlLayer = new itowns.ColorLayer('Kml', {
                 name: 'kml',
                 transparent: true,
                 source: kmlSource,
+                style: kmlStyle,
+                labelEnabled: true,
             });
 
             debug.createTileDebugUI(menuGlobe.gui, view);

examples/source_file_shapefile.html

@@ -56,13 +56,26 @@
                     parsedData: feature,
                 });
 
-                var velibLayer = new itowns.ColorLayer('velib', { source: velibSource,
-                    style: {
-                        point: {
-                            color: 'white',
-                            line: 'green',
-                        }
-                    }});
+                var velibStyle = new itowns.Style({
+                    zoom: { min: 10, max: 20 },
+                    point: {
+                        color: 'white',
+                        line: 'green',
+                    },
+                    text: {
+                        field: '{name}\n(id: {station_id})',
+                        size: 14,
+                        haloColor: 'white',
+                        haloWidth: 1,
+                        font: ['monospace'],
+                    },
+                });
+
+                var velibLayer = new itowns.ColorLayer('velib', {
+                    source: velibSource,
+                    style: velibStyle,
+                    labelEnabled: true,
+                });
 
                 debug.createTileDebugUI(menuGlobe.gui, view);
 

examples/source_stream_wfs_25d.html

@@ -250,6 +250,39 @@
 
             view.addLayer(wfsBuildingLayer);
 
+            var wfsCartoSource = new itowns.WFSSource({
+                url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
+                version: '2.0.0',
+                typeName: 'BDCARTO_BDD_WLD_WGS84G:zone_activite,BDCARTO_BDD_WLD_WGS84G:zone_habitat,BDCARTO_BDD_WLD_WGS84G:zone_reglementee_touristique',
+                projection: 'EPSG:4326',
+                ipr: 'IGN',
+                format: 'application/json',
+                extent: {
+                    west: 4.568,
+                    east: 5.18,
+                    south: 45.437,
+                    north: 46.03,
+                },
+            });
+
+            var wfsCartoStyle = new itowns.Style({
+                zoom: { min: 0, max: 20 },
+                text: {
+                    field: '{toponyme}',
+                    transform: 'uppercase',
+                    size: 20,
+                    haloColor: 'white',
+                    haloWidth: 1,
+                },
+            });
+
+            var wfsCartoLayer = new itowns.LabelLayer('wfsCarto', 'EPSG:3946');
+            wfsCartoLayer.projection = 'EPSG:3946';
+            wfsCartoLayer.source = wfsCartoSource;
+            wfsCartoLayer.style = wfsCartoStyle;
+
+            view.addLayer(wfsCartoLayer);
+
             function picking(event) {
                 var htmlInfo = document.getElementById('info');
                 var intersects = view.pickObjectsAt(event, 2, 'wfsBuilding');

package.json

@@ -47,8 +47,8 @@
     "@babel/polyfill": "^7.10.1",
     "@babel/runtime": "^7.10.2",
     "@mapbox/mapbox-gl-style-spec": "^13.15.0",
-    "@mapbox/togeojson": "^0.16.0",
     "@mapbox/vector-tile": "^1.3.1",
+    "@tmcw/togeojson": "^4.1.0",
     "@tweenjs/tween.js": "^18.5.0",
     "earcut": "^2.2.2",
     "js-priority-queue": "^0.1.5",

src/Core/Style.js

@@ -38,14 +38,17 @@ function readVectorProperty(property, zoom) {
     }
 }
 
-function getImageFromSprite(sprites, key) {
-    const sprite = sprites[key];
-    canvas.width = sprite.width;
-    canvas.height = sprite.height;
-    canvas.getContext('2d').drawImage(sprites.img, sprite.x, sprite.y, sprite.width, sprite.height, 0, 0, sprite.width, sprite.height);
+function getImage(source, key) {
     const image = document.createElement('img');
-    image.src = canvas.toDataURL('image/png');
-
+    if (typeof source == 'string') {
+        image.src = source;
+    } else if (Array.isArray(source)) {
+        const sprite = source[key];
+        canvas.width = sprite.width;
+        canvas.height = sprite.height;
+        canvas.getContext('2d').drawImage(source.img, sprite.x, sprite.y, sprite.width, sprite.height, 0, 0, sprite.width, sprite.height);
+        image.src = canvas.toDataURL('image/png');
+    }
     return image;
 }
 
@@ -309,6 +312,19 @@ class Style {
             this.point.opacity = properties['fill-opacity'];
             this.point.line = properties.stroke;
             this.point.radius = properties.radius;
+
+            this.text.color = properties['label-color'];
+            this.text.opacity = properties['label-opacity'];
+            this.text.size = properties['label-size'];
+
+            if (properties.icon) {
+                this.icon = { dom: getImage(properties.icon) };
+                this.icon.dom.onload = () => {
+                    const size = properties['icon-size'] || 1;
+                    this.icon.dom.width *= size;
+                    this.icon.dom.height *= size;
+                };
+            }
         } else {
             this.stroke.color = properties.stroke;
             this.stroke.width = properties['stroke-width'];
@@ -340,7 +356,7 @@ class Style {
             this.fill.color = color;
             this.fill.opacity = readVectorProperty(layer.paint['fill-opacity'], zoom) || opacity;
             if (layer.paint['fill-pattern'] && sprites) {
-                this.fill.pattern = getImageFromSprite(sprites, layer.paint['fill-pattern']);
+                this.fill.pattern = getImage(sprites, layer.paint['fill-pattern']);
             }
 
             if (layer.paint['fill-outline-color']) {
@@ -408,7 +424,7 @@ class Style {
 
                 if (!this.icon) {
                     this.icon = {};
-                    this.icon.dom = getImageFromSprite(sprites, iconSrc);
+                    this.icon.dom = getImage(sprites, iconSrc);
 
                     this.icon.dom.onload = () => {
                         this.icon.dom.width *= size;

src/Parser/GpxParser.js

@@ -1,4 +1,4 @@
-import togeojson from '@mapbox/togeojson';
+import { gpx } from '@tmcw/togeojson';
 import GeoJsonParser from 'Parser/GeoJsonParser';
 
 /**
@@ -13,13 +13,13 @@ export default {
      * Parse a GPX file content and return a [FeatureCollection]{@link
      * module:GeoJsonParser~FeatureCollection}.
      *
-     * @param {XMLDocument} gpx - The GPX file content to parse.
+     * @param {XMLDocument} gpxFile - The GPX file content to parse.
      * @param {GeoJsonParser~GeoJsonParserOptions} options - Options controlling the parsing.
      *
      * @return {Promise} A promise resolving with a [FeatureCollection]{@link
      * module:GeoJsonParser~FeatureCollection}.
      */
-    parse(gpx, options) {
-        return GeoJsonParser.parse(togeojson.gpx(gpx), options);
+    parse(gpxFile, options) {
+        return GeoJsonParser.parse(gpx(gpxFile), options);
     },
 };

src/Parser/KMLParser.js

@@ -1,4 +1,4 @@
-import togeojson from '@mapbox/togeojson';
+import { kml } from '@tmcw/togeojson';
 import GeoJsonParser from 'Parser/GeoJsonParser';
 
 /**
@@ -13,13 +13,13 @@ export default {
      * Parse a KML file content and return a [FeatureCollection]{@link
      * module:GeoJsonParser~FeatureCollection}.
      *
-     * @param {XMLDocument} kml - The KML file content to parse.
+     * @param {XMLDocument} kmlFile - The KML file content to parse.
      * @param {GeoJsonParser~GeoJsonParserOptions} options - Options controlling the parsing.
      *
      * @return {Promise} A promise resolving with a [FeatureCollection]{@link
      * module:GeoJsonParser~FeatureCollection}.
      */
-    parse(kml, options) {
-        return GeoJsonParser.parse(togeojson.kml(kml), options);
+    parse(kmlFile, options) {
+        return GeoJsonParser.parse(kml(kmlFile), options);
     },
 };