Merge pull request #485 from cmv/feature/add-vector-tile-layer

add vector tile layer
cmv · Nov 25, 2015 · c3a8737 · c3a8737
2 parents 8c7fe83 + a03ac76
commit c3a8737
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 1 deletion.
diff --git a/viewer/js/config/basemaps.js b/viewer/js/config/basemaps.js
@@ -98,6 +98,107 @@ define([
                     })]
                 })
             }*/
+
+            // example using vector tile basemaps (beta in v3.15)
+
+            /*
+            streets: {
+                title: 'Streets',
+                basemap: new Basemap({
+                    id: 'streets',
+                    layers: [new BasemapLayer({
+                        'styleUrl': '//www.arcgis.com/sharing/rest/content/items/3b8814f6ddbd485cae67e8018992246e/resources/styles/root.json',
+                        'type': 'VectorTileLayer'
+                    })]
+                })
+            },
+            satellite: {
+                title: 'Satellite',
+                basemap: new Basemap({
+                    id: 'satellite',
+                    layers: [new BasemapLayer({
+                        url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
+                    })]
+                })
+            },
+            hybrid: {
+                title: 'Hybrid',
+                basemap: new Basemap({
+                    id: 'hybrid',
+                    layers: [
+                        new BasemapLayer({
+                            url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
+                        }),
+                        new BasemapLayer({
+                            'styleUrl': '//www.arcgis.com/sharing/rest/content/items/1854498c7e35420b963a514a32689c80/resources/styles/root.json',
+                            'type': 'VectorTileLayer',
+                            isReference: true
+                        })
+                    ]
+                })
+            },
+            lightGray: {
+                title: 'Light Gray Canvas',
+                basemap: new Basemap({
+                    id: 'lightGray',
+                    layers: [new BasemapLayer({
+                        'styleUrl': '//www.arcgis.com/sharing/rest/content/items/bdf1eec3fa79456c8c7c2bb62f86dade/resources/styles/root.json',
+                        'type': 'VectorTileLayer'
+                    })]
+                })
+            },
+            darkGray: {
+                title: 'Dark Gray Canvas',
+                basemap: new Basemap({
+                    id: 'darkGray',
+                    layers: [new BasemapLayer({
+                        'styleUrl': '//www.arcgis.com/sharing/rest/content/items/3e3099d7302f4d99bc6f916dcc07ed59/resources/styles/root.json',
+                        'type': 'VectorTileLayer'
+                    })]
+                })
+            },
+            navigation: {
+                title: 'Navigation',
+                basemap: new Basemap({
+                    id: 'navigation',
+                    layers: [new BasemapLayer({
+                        'styleUrl': '//www.arcgis.com/sharing/rest/content/items/00cd8e843bae49b3a040423e5d65416b/resources/styles/root.json',
+                        'type': 'VectorTileLayer'
+                    })]
+                })
+            },
+            streetsNight: {
+                title: 'Streets Night',
+                basemap: new Basemap({
+                    id: 'streetsNight',
+                    layers: [new BasemapLayer({
+                        'styleUrl': '//www.arcgis.com/sharing/rest/content/items/f96366254a564adda1dc468b447ed956/resources/styles/root.json',
+                        'type': 'VectorTileLayer'
+                    })]
+                })
+            },
+            streetsRelief: {
+                title: 'Streets w/ Relief',
+                basemap: new Basemap({
+                    id: 'streetsRelief',
+                    layers: [new BasemapLayer({
+                        'styleUrl': '//www.arcgis.com/sharing/rest/content/items/ad06088bd1174866aad2dddbf5ec9642/resources/styles/root.json',
+                        'type': 'VectorTileLayer'
+                    })]
+                })
+            },
+            topo: {
+                title: 'Topographic',
+                basemap: new Basemap({
+                    id: 'topo',
+                    layers: [new BasemapLayer({
+                        'styleUrl': '//www.arcgis.com/sharing/rest/content/items/be44936bcdd24db588a1ae5076e36f34/resources/styles/root.json',
+                        'type': 'VectorTileLayer'
+                    })]
+                })
+            }
+            */
+
         }
     };
 });
diff --git a/viewer/js/config/viewer.js b/viewer/js/config/viewer.js
@@ -158,6 +158,63 @@ define([
                 metadataUrl: true,
                 expanded: true
             }
+        /*
+        //examples of vector tile layers (beta in v3.15)
+        }, {
+            type: 'vectortile',
+            title: 'Light Gray Canvas Vector',
+            url: '//www.arcgis.com/sharing/rest/content/items/bdf1eec3fa79456c8c7c2bb62f86dade/resources/styles/root.json',
+            options: {
+                id: 'vectortile1',
+                opacity: 0.8,
+                visible: true
+            }
+        }, {
+           //  taken from this demo: https://github.com/ycabon/presentations/blob/gh-pages/2015-berlin-plenary/demos/3.15-vectortile/create-by-style-object.html
+            type: 'vectortile',
+            title: 'Custom Vector Style',
+            options: {
+                id: 'vectortile2',
+                opacity: 1.0,
+                visible: true,
+                'glyphs': '//www.arcgis.com/sharing/rest/content/items/00cd8e843bae49b3a040423e5d65416b/resources/fonts/{fontstack}/{range}.pbf',
+                'sprite': '//www.arcgis.com/sharing/rest/content/items/00cd8e843bae49b3a040423e5d65416b/resources/sprites/sprite',
+                'version': 8,
+                'sources': {
+                    'esri': {
+                        'url': '//basemapsdev.arcgis.com/arcgis/rest/services/World_Basemap/VectorTileServer',
+                        'type': 'vector'
+                    }
+                },
+                'layers': [{
+                    'id': 'background',
+                    'type': 'background',
+                    'paint': {
+                        'background-color': '#556688'
+                    }
+                }, {
+                    'id': 'Land',
+                    'type': 'fill',
+                    'source': 'esri',
+                    'source-layer': 'Land',
+                    'paint': {
+                        'fill-color': '#273344'
+                    },
+                }, {
+                    'id': 'roads',
+                    'type': 'line',
+                    'source': 'esri',
+                    'source-layer': 'Road',
+                    'layout': {
+                        'line-join': 'round'
+                    },
+                    'paint': {
+                        'line-width': 1,
+                        'line-color': '#131622'
+                    }
+                }]
+            }
+        */
         }],
         // set include:true to load. For titlePane type set position the the desired order in the sidebar
         widgets: {

diff --git a/viewer/js/gis/dijit/LayerControl.js b/viewer/js/gis/dijit/LayerControl.js
@@ -70,6 +70,7 @@ define([
             georss: './LayerControl/controls/GeoRSS',
             wms: './LayerControl/controls/WMS',
             kml: './LayerControl/controls/KML',
+            vectortile: './LayerControl/controls/VectorTile',
             webtiled: './LayerControl/controls/WebTiled',
             imagevector: './LayerControl/controls/ImageVector',
             raster: './LayerControl/controls/Raster',

diff --git a/viewer/js/gis/dijit/LayerControl/controls/VectorTile.js b/viewer/js/gis/dijit/LayerControl/controls/VectorTile.js
@@ -0,0 +1,24 @@
+define([
+    'dojo/_base/declare',
+    'dijit/_WidgetBase',
+    'dijit/_TemplatedMixin',
+    'dijit/_Contained',
+    './_Control' // layer control base class
+], function (
+    declare,
+    _WidgetBase,
+    _TemplatedMixin,
+    _Contained,
+    _Control
+) {
+    'use strict';
+
+    var VectorTileControl = declare([_WidgetBase, _TemplatedMixin, _Contained, _Control], {
+        _layerType: 'overlay', // constant
+        _esriLayerType: 'vectortile', // constant
+        _layerTypeInit: function () {
+            this._expandRemove();
+        }
+    });
+    return VectorTileControl;
+});
diff --git a/viewer/js/viewer/_MapMixin.js b/viewer/js/viewer/_MapMixin.js
@@ -70,6 +70,7 @@ define([
                 raster: 'Raster',
                 stream: 'Stream',
                 tiled: 'ArcGISTiledMapService',
+                vectortile: 'VectorTile',
                 webtiled: 'WebTiled',
                 wms: 'WMS',
                 wmts: 'WMTS' //untested
@@ -97,7 +98,12 @@ define([
         },
 
         _initLayer: function (layer, Layer) {
-            var l = new Layer(layer.url, layer.options);
+            var l;
+            if (layer.url) {
+                l = new Layer(layer.url, layer.options);
+            } else {
+                l = new Layer(layer.options);
+            }
             this.layers.unshift(l); //unshift instead of push to keep layer ordering on map intact
 
             //Legend LayerInfos array