From 65bd7465821ccfebdcb4d8dd0edcb79231dfe463 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Mon, 23 Nov 2015 15:10:06 -0700 Subject: [PATCH 1/3] Add `VectorTileLayer` as a new type of operational layer. requires at least v3.15 or v4.0 beta 2 of the ESRI JS API --- viewer/js/gis/dijit/LayerControl.js | 1 + .../dijit/LayerControl/controls/VectorTile.js | 24 +++++++++++++++++++ viewer/js/viewer/_MapMixin.js | 8 ++++++- 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 viewer/js/gis/dijit/LayerControl/controls/VectorTile.js diff --git a/viewer/js/gis/dijit/LayerControl.js b/viewer/js/gis/dijit/LayerControl.js index fb951e3e6..ec2d89265 100644 --- 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 new file mode 100644 index 000000000..189bca3bb --- /dev/null +++ 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; +}); \ No newline at end of file diff --git a/viewer/js/viewer/_MapMixin.js b/viewer/js/viewer/_MapMixin.js index e8f5902d6..6b3c72027 100644 --- 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 From 5a59ec279efb84a97fa0c5d3514bd250fa4f61a0 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Mon, 23 Nov 2015 15:11:57 -0700 Subject: [PATCH 2/3] add examples of using vector tile basemaps for basemap widget. requires at least v3.15 or v4.0 beta 2 of the ESRI JS API --- viewer/js/config/basemaps.js | 101 +++++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) diff --git a/viewer/js/config/basemaps.js b/viewer/js/config/basemaps.js index 73ace0bc2..28bd4bd92 100644 --- 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' + })] + }) + } + */ + } }; }); \ No newline at end of file From b1554d7771c197275eae311ae5c15800574a7731 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Mon, 23 Nov 2015 15:18:12 -0700 Subject: [PATCH 3/3] add examples of using vector tile layers as operational layers. requires at least v3.15 or v4.0 beta 2 of the ESRI JS API --- viewer/js/config/viewer.js | 57 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/viewer/js/config/viewer.js b/viewer/js/config/viewer.js index b22497e15..20dfcb33e 100644 --- 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: {