Last active
September 2, 2015 18:57
-
-
Save asizer/fcddf84513619c351c4b to your computer and use it in GitHub Desktop.
Layer Item symbology
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> | |
| <title>Changed Layer Symbology</title> | |
| <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> | |
| <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> | |
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| font-family: Helvetica, sans-serif; | |
| } | |
| .sample-head-foot { | |
| background-color: gray; | |
| color: #eee; | |
| left: 0; | |
| right: 0; | |
| font-size: 30px; | |
| text-align: center; | |
| } | |
| #header { | |
| margin: 0; | |
| height: 40px; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 40px; | |
| right: 0; | |
| left: 0; | |
| bottom: 110px; | |
| } | |
| #footer { | |
| position: absolute; | |
| bottom: 0; | |
| height: 110px; | |
| font-size: 20px; | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
| <script src="http://js.arcgis.com/3.14/"></script> | |
| <script> | |
| require([ | |
| 'esri/arcgis/utils', | |
| 'esri/layers/FeatureLayer', | |
| 'esri/layers/ArcGISDynamicMapServiceLayer', | |
| 'esri/layers/LayerDrawingOptions', | |
| 'esri/renderers/jsonUtils', | |
| 'esri/dijit/PopupTemplate', | |
| 'dojo/domReady!' | |
| ], | |
| function(arcgisUtils, FeatureLayer, DMSL, LDO, rendererJsonUtils, PopupTemplate) { | |
| var portalUrl = 'https://dbsne.maps.arcgis.com/'; | |
| arcgisUtils.arcgisUrl = portalUrl + 'sharing/rest/content/items'; | |
| createMap(); | |
| function createMap() { | |
| arcgisUtils.createMap('ef6a231858ca426cb1ecd979c64d5d0e', 'map').then(function(response) { | |
| window.map = response.map; | |
| getItem('d61b8ae1fb074618a535ff934299d1f1'); | |
| getItem('fbd4ceee4fdc4770a421b5e825c19253'); | |
| }).otherwise(function() { | |
| console.error('Oh no! First createMap didn\'t work', arguments); | |
| }); | |
| } | |
| function getItem(itemId) { | |
| arcgisUtils.getItem(itemId).then(function(response) { | |
| var item = response.item; | |
| switch (item.type) { | |
| case 'Feature Service': | |
| processFeatureLayer(response); | |
| break; | |
| case 'Map Service': | |
| processMapServiceLayer(response); | |
| break; | |
| default: | |
| console.warn('layer type fell through'); | |
| return; | |
| } | |
| }); | |
| } | |
| function processFeatureLayer(response) { | |
| var data = response.itemData; | |
| if (!data.layers || data.layers.length !== 1) { | |
| console.warn('expected only one layer here...', data.layers); | |
| return; | |
| } | |
| var lyrInfo = data.layers[0]; | |
| var lyr = new FeatureLayer(response.item.url); | |
| if (lyrInfo.layerDefinition && lyrInfo.layerDefinition.drawingInfo && lyrInfo.layerDefinition.drawingInfo.renderer) { | |
| var renderer = rendererJsonUtils.fromJson(lyrInfo.layerDefinition.drawingInfo.renderer); | |
| lyr.setRenderer(renderer); | |
| } | |
| if (lyrInfo.layerDefinition.minScale || lyrInfo.layerDefinition.minScale === 0) { | |
| lyr.setMinScale(lyrInfo.layerDefinition.minScale); | |
| } | |
| if (lyrInfo.layerDefinition.maxScale || lyrInfo.layerDefinition.maxScale === 0) { | |
| lyr.setmaxScale(lyrInfo.layerDefinition.maxScale); | |
| } | |
| // popups | |
| if (lyrInfo.popupInfo) { | |
| lyr.setInfoTemplate(new PopupTemplate(lyrInfo.popupInfo)); | |
| } | |
| window.map.addLayer(lyr); | |
| } | |
| function processMapServiceLayer(response) { | |
| var data = response.itemData; | |
| var lyr = new DMSL(response.item.url); | |
| if (data) { | |
| lyr.setVisibleLayers(data.visibleLayers || []); | |
| if (data.layers && data.layers.length) { | |
| var popupInfos = {}; | |
| var layerDefs = []; | |
| var ldos = []; | |
| _.each(data.layers, function(lyrInfo) { | |
| if (lyrInfo.popupInfo) { | |
| popupInfos[lyrInfo.id] = { | |
| infoTemplate: new PopupTemplate(lyrInfo.popupInfo) | |
| }; | |
| } | |
| var layerDef = lyrInfo.layerDefinition; | |
| if (layerDef) { | |
| layerDefs[lyrInfo.id] = layerDef; | |
| if (layerDef.drawingInfo) { | |
| ldos[lyrInfo.id] = new LDO(layerDef.drawingInfo); | |
| } | |
| } | |
| }); | |
| lyr.setInfoTemplates(popupInfos); | |
| if (layerDefs.length) { | |
| lyr.setLayerDefinitions(layerDefs); | |
| } | |
| if (ldos.length) { | |
| lyr.setLayerDrawingOptions(ldos); | |
| } | |
| } | |
| } | |
| this.map.addLayer(lyr); | |
| return lyr; | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body class="claro"> | |
| <div id="header" class="sample-head-foot">Use a layer item's changed symbology</div> | |
| <div id="map"></div> | |
| <div id="footer" class="sample-head-foot">Works with FeatureLayers (hurricane points in the Atlantic) and DynamicMapServiceLayers (Counties by 2007 population)</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment