AnsweredAssumed Answered

Multiple Maps in Tabs: label layer bug in dojo?

Question asked by mmcfarlane6 on Aug 30, 2016
Latest reply on Sep 8, 2016 by mmcfarlane6

I am creating a simple two tabbed app that displays one map on each tab. Each map will have slightly different data.

 

A strange issue is happening on the second tab. The layer that draws the labels on the map is confined to a small space in the upper left-hand corner of the map. Labels only appear for features overlapping this very small corner. Furthermore, the map doesn't load centered.

 

Take a look here (a simplified version of the app): Air and Water Data 

 

I've dug around the DOM tree and found a discrepancy between the two tabs. There is a  <filter> tag nested within an <svg> tag. It has "width" and "height" attributes that differ between the two tabs. When I manually correct the attributes in dev tools, this corrects it. I've tried multiple ways of then updating the javascript to change this on the fly, and it's really, really buggy and inconsistent.

 

I've also tried setting the second tab to be open instead of the first, and the problem is then reversed between the tabs. This makes me think it's a dojo bug of some sort connected to the tab container or the content pane. 

 

 

Here is the pertinent html:

 

<body class="claro">
   <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; margin: 0;">
      <div id="airmap" data-dojo-type="dijit/layout/ContentPane" title="Air Data"></div>
      <div id="watermap" data-dojo-type="dijit/layout/ContentPane" title="Water Data"></div>
   </div>
</body>

 

Here is the javascript:

 

require([
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-class",
"esri/domUtils",
"esri/map",
"esri/basemaps",
"esri/arcgis/utils",
"esri/layers/FeatureLayer",
"dojo/parser",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (dom, domConstruct, domClass, domUtils, Map, esriBasemaps, arcgisUtils, FeatureLayer, parser){
parser.parse();

esriConfig.defaults.io.proxyUrl = 'https://www.barr.com/maps/DotNet/proxy.ashx';
esriConfig.defaults.io.alwaysUseProxy = true;
esriConfig.defaults.io.timeout = 15000000;

 

//script for tab #1: Air Data map
var airMap;


airMap = new Map("airmap", {
   basemap: 'dark-gray',
   center: [-93.8, 46.3],
   zoom: 7,
   showLabels: true
});

 

var contactsFeatureLayer = new    FeatureLayer("https://maps2013.barr.com/maps/rest/services/01_Testing/Tabbed_Maps_Test_Map_Service/MapServer/0 ",{
      mode: FeatureLayer.MODE_ONDEMAND,
      outFields: ["*"]
});

 

airMap.addLayer(contactsFeatureLayer);

 

//script for tab #2: Water Data map
var waterMap;

 

waterMap = new Map("watermap", {
   basemap: 'dark-gray',
   center: [-93.8, 46.3],
   zoom: 7,
   showLabels: true
});


var contactsFeatureLayer = new    FeatureLayer("https://maps2013.barr.com/maps/rest/services/01_Testing/Tabbed_Maps_Test_Map_Service/MapServer/0 ",{
      mode: FeatureLayer.MODE_ONDEMAND,
      outFields: ["*"]
});

 

waterMap.addLayer(contactsFeatureLayer);


});

 

This has been maddening. I'd appreciate any help.

Outcomes