Select to view content in your preferred language

Is it possible to add a transparent web map tile layer over feature layers?

2644
2
Jump to solution
12-12-2013 07:09 AM
AZendel
Frequent Contributor
I created a MapBox layer on their website that has transparent background and non-transparent streets, street labels and city labels.  I'm wanting to overlay this mostly transparent  layer on top of some polygon feature layers served via our AGO 'Organizational Account'.  I'll eventually add a MapBox base layer.  So my 'map stack' will look like the following with the top listed layer on top:

Transparent MapBox Layer (streets and labels)
Polygon Feature Layer
Polygon Feature Layer
Opaque MapBox Layer

I've read the documentation and found that the first non-base layer called in map.addLayer() draws underneath the subsequent layers called in addLayer. The transparent label layer is rendering in my map, but the problem is that the transparent layer is rendering underneath the the polygon feature layers.  This makes me think that the ArcGIS 3.7 JS library forces tile layers under feature layers or other 'operational layers'.  Can anybody confirm?  How do I get my transparent tile layer to render on top of the polygon layers?  Thanks in advance for your help. 

My code is below


<script src="http://js.arcgis.com/3.7/"></script>      <script>         var map;         require([           "esri/map", "esri/layers/WebTiledLayer", "esri/InfoTemplate", "esri/layers/FeatureLayer",           "dojo/parser", "dojo/domReady!"         ], function (           Map, WebTiledLayer, InfoTemplate, FeatureLayer,           parser         ) {             parser.parse();             map = new Map("mapDiv", {                 basemap: "national-geographic",                 center: [-96.541, 38.34],                 zoom: 6             });              map.on("load", initOperationalLayer);              function initOperationalLayer() {                 var infoTemplate = new InfoTemplate("${NAME10}", "Population (2010):  ${TOTALPOPULATION:NumberFormat}");                 var tractLayer = new FeatureLayer("https://services2.arcgis.com/Gypl21NmiWS1cM7h/arcgis/rest/services/ThreeDemographicMaps2/FeatureServer/2", {                     mode: FeatureLayer.MODE_ONDEMAND,                     outFields: ["*"] ,                     infoTemplate: infoTemplate                  });                  var infoTemplate2 = new InfoTemplate("${NAME10}", "Percent Black:  ${PercentBlack:NumberFormat}");                 var countyLayer = new FeatureLayer("https://services2.arcgis.com/Gypl21NmiWS1cM7h/arcgis/rest/services/CountyDemographics3/FeatureServer/0", {                     mode: FeatureLayer.MODE_ONDEMAND,                     outFields: ["*"],                     infoTemplate: infoTemplate2                 });                                  var mapBox = new WebTiledLayer("https://a.tiles.mapbox.com/v3/xxyyzz.ghbjgh0h/{level}/{col}/{row}.png", {                     "copyright": "<a href=\"http://www.openstreetmap.org/copyright/\">OpenStreetMap and its contributors</a>",                     "id": "MapBox"                  });                  map.addLayer(countyLayer);                 map.addLayer(tractLayer);                 map.addLayer(mapBox);                 map.infoWindow.resize(155, 75);             }         });     </script> 
0 Kudos
1 Solution

Accepted Solutions
JohnGravois
Deactivated User
you are correct, graphics layers always draw on top of tiled/dynamic layers in the Esri JavaScript API

http://gis.stackexchange.com/questions/20429/arcgis-javascript-api-a-way-to-position-dynamic-service...

View solution in original post

0 Kudos
2 Replies
JohnGravois
Deactivated User
you are correct, graphics layers always draw on top of tiled/dynamic layers in the Esri JavaScript API

http://gis.stackexchange.com/questions/20429/arcgis-javascript-api-a-way-to-position-dynamic-service...
0 Kudos
AZendel
Frequent Contributor
Thanks for the response, John.  Just a suggestion: add the ability to have tile layers on top of feature and graphic layers.  Base map tiles are very valuable because you don't have to manage all of the streets, political boundaries, etc.  But they become less practical when you need to overlay thematic polygons on top of them - they become harder to read.  Being able to overlay  transparent tiles that have opaque line features and labels would alleviate this problem. I think there are a huge number of use cases where this would be helpful.

Our current work around is to use the Stamen 'Toner' map tiles.  The black is so dark that the labels show up underneath semi-transparent polygon layers well.  Here's how we are adding them to our maps:

                var stamenToner = new WebTiledLayer("http://tile.stamen.com/toner/{level}/{col}/{row}.jpg", {
                    "copyright": "Map tiles by <a href=/\"http://stamen.com\">Stamen Design</a>, under <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a>. Data by <a href=\"http://openstreetmap.org\">OpenStreetMap</a>, under <a href=\"http://creativecommons.org/licenses/by-sa/3.0\">CC BY SA</a>.",
                    "id": "stamenToner "


Thanks again!
0 Kudos