Last active
August 29, 2015 14:26
-
-
Save andybell/74fb4a1de74898126fbe to your computer and use it in GitHub Desktop.
Reference Layer above polygon
This file contains 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"> | |
| <!--The viewport meta tag is used to improve the presentation and behavior of the samples | |
| on iOS devices--> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> | |
| <title>Unique Value Renderer</title> | |
| <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> | |
| <style> | |
| html, | |
| body, | |
| #map { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| <script src="http://js.arcgis.com/3.14/"></script> | |
| <script> | |
| var map; | |
| require([ | |
| "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer", "esri/InfoTemplate", | |
| "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", | |
| "esri/renderers/UniqueValueRenderer", "esri/Color", | |
| "dojo/domReady!" | |
| ], function( | |
| Map, Tiled, FeatureLayer, InfoTemplate, | |
| SimpleLineSymbol, SimpleFillSymbol, | |
| UniqueValueRenderer, Color | |
| ) { | |
| map = new Map("map", { | |
| basemap: "gray", | |
| center: [-95.625, 39.243], | |
| zoom: 4, | |
| slider: false | |
| }); | |
| map.on("load", addFeatureLayer); | |
| function addFeatureLayer() { | |
| var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL); | |
| defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL); | |
| //create renderer | |
| var renderer = new UniqueValueRenderer(defaultSymbol, "SUB_REGION"); | |
| //add symbol for each possible value | |
| renderer.addValue("Pacific", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5]))); | |
| renderer.addValue("Mtn", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5]))); | |
| renderer.addValue("N Eng", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5]))); | |
| renderer.addValue("S Atl", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5]))); | |
| renderer.addValue("Mid Atl", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75]))); | |
| renderer.addValue("E N Cen", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5]))); | |
| renderer.addValue("W N Cen", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]))); | |
| renderer.addValue("E S Cen", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5]))); | |
| renderer.addValue("W S Cen", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5]))); | |
| var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1", { | |
| infoTemplate: new InfoTemplate(" ", "${SUB_REGION}"), | |
| mode: FeatureLayer.MODE_ONDEMAND, | |
| outFields: ["SUB_REGION"] | |
| }); | |
| featureLayer.setRenderer(renderer); | |
| map.addLayer(featureLayer); | |
| // Reference overlay | |
| var referenceLayer = new Tiled("http://hydrology.esri.com/arcgis/rest/services/WorldHydroReferenceOverlay/MapServer"); | |
| //add the reference layer | |
| map.addLayer(referenceLayer); | |
| //Change layer order | |
| map.reorderLayer(featureLayer, 0); | |
| map.reorderLayer(referenceLayer, 1); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment