nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Nliu's TOC Widget, zoom and layer error

AshleyPeters

I'm still new to the JavaScript API, so please bear with me.

I am having a similar issue as to what Dominik mentions here: Problems with TOC or map

I do not have the Editor or Measurement dijit added in. Right now, I am missing several layers in the TOC. When using the developer tools in Firefox, I get an error that the graphic can not be drawn. They happen to all be point layers, but other point layers are pulling in without throwing that error.

Also, when I zoom on the map, the map is not updating unless I pan. When I pan, the polygons are not drawing. If I do not pan, the resolution never gets any better.

Any ideas?

Thanks in advance!

Ashley

Find more posts tagged with

Accepted answers

AshleyPeters

I managed to solve the problem. I rewrote my code to follow this example: Add two dynamic maps | ArcGIS API for JavaScript. It fixed the zoom issue. I had overlooked an issue where I declared some of the layers ("MapServer" was missing at the end). Fixed that as well. Now all things are working as expected.

All comments

AshleyPeters

And I am getting this error, presumably for the layers it isn't drawing:

"dojo.io.script error"

[object Error] {
code: 400,
description: "",
details: [],
httpCode: 400,
log: undefined,
message: "Invalid URL",
number: 0}

kenbuja

JSFiddle/JSBin are simply websites you can put your code to show it in action, like this. Putting a subset of your code on one of these sites can help you pinpoint a problem, especially if you can replicate the issue.

AshleyPeters

I don't currently have JSFiddle or JSBin downloaded, but I'll see if I can get one of them onto my computer. Here's the portion of my .js file dealing with the TOC dijit:

//Declare Base Layers to map

var boundaries = new ArcGISDynamicMapServiceLayer("https://MyURL/rest/services/Basemap/MapServer");

//Declare State Parks layers

var stateparksL = new FeatureLayer("https://MyURL/rest/services/SP_DCNR/MapServer/1");

var stateparksentL = new FeatureLayer("https://MyURL/rest/services/SP_DCNR/MapServer/0");

//Declare Hunting layers

var WMA = new FeatureLayer("https://MyURL/rest/services/Hunting_DCNR/MapServer/2");

var ranges = new FeatureLayer("https://MyURL/rest/services/Hunting_DCNR/MapServer/1");

var checkStations = new FeatureLayer("https://MyURL/rest/services/Hunting_DCNR/MapServer/0");

//Declare FW layers

var SLDtracts = new FeatureLayer("https://MyURL/rest/services/FW_DCNR/MapServer/13");

var FWtracts = new FeatureLayer("https://MyURL/rest/services/FW_DCNR/MapServer/12");

var BartramPOI = new FeatureLayer("https://MyURL/rest/services/FW_DCNR/MapServer/11");

var BartramRoutes = new FeatureLayer("https://MyURL/rest/services/FW_DCNR/MapServer/10");

var BartramTrail = new FeatureLayer("https://MyURL/rest/services/FW_DCNR/MapServer/9");

var FWtrails = new FeatureLayer("https://MyURL/rest/services/FW_DCNR/MapServer/8");

var FWaccess = new FeatureLayer("https://MyURL/rest/services/FW_DCNR/MapServer/7");

var FWactivities = new ArcGISDynamicMapServiceLayer("https://MyURL/rest/services/FW_DCNR/MapServer");

FWactivities.setVisibleLayers([1,2,3,4,5,6]);

//Declare Fishing layers

var publicLakes = new FeatureLayer("https://MyURL/rest/services/Fishing_DCNR/MapServer/6");

var boatRamps = new FeatureLayer("https://MyURL/rest/services/Fishing_DCNR/MapServer/5");

var navAids = new FeatureLayer("https://MyURL/rest/services/Fishing_DCNR/MapServer/4");

var offshoreReefs = new FeatureLayer("https://MyURL/rest/services/Fishing_DCNR/MapServer/3");

var nearshoreReefs = new FeatureLayer("https://MyURL/rest/services/Fishing_DCNR/MapServer/2");

var inshoreReefs = new FeatureLayer("https://MyURL/rest/services/Fishing_DCNR/MapServer/1");

//Declare Districts

var WFFDistricts = new FeatureLayer("https://MyURL/rest/services/Districts_WGS84/0");

//Declare Offices and Facilities

var hatcheries = new FeatureLayer("https://MyURL/rest/services/OfficesFacilities_WGS84/6");

var SLDFacilities = new FeatureLayer("https://MyURL/rest/services/OfficesFacilities_WGS84/5");

var Facilities = new FeatureLayer("https://MyURL/rest/services/OfficesFacilities_WGS84/4");

var WFFDistOff = new FeatureLayer("https://MyURL/rest/services/OfficesFacilities_WGS84/3");

var MRDOffices = new FeatureLayer("https://MyURL/rest/services/OfficesFacilities_WGS84/2");

var Offices = new FeatureLayer("https://MyURL/rest/services/OfficesFacilities_WGS84/1");

var DCNRHQ = new FeatureLayer("https://MyURL/rest/services/OfficesFacilities_WGS84/0");

//Add all declared layers to map

mapMain.addLayers([boundaries, stateparksL, WMA, ranges,
checkStations, SLDtracts, FWtracts, BartramPOI, BartramRoutes, BartramTrail,
FWtrails, FWaccess, FWactivities, publicLakes, boatRamps, navAids,
offshoreReefs, nearshoreReefs, inshoreReefs, WFFDistricts, hatcheries,
SLDFacilities, Facilities, WFFDistOff, MRDOffices, Offices, DCNRHQ]);

//Add TOC widget once all layers have been added to the map

mapMain.on('layers-add-result', function(evt){

//
overwrite the default visibility of service.

// TOC
will honor the overwritten value.

//dynaLayer1.setVisibleLayers([2, 5, 8, 11]);

//try
{

toc
= new TOC({

map: mapMain,

layerInfos: [{

layer: DCNRHQ,

title: 'DCNR Headquarters'

},
{

layer: Offices,

title: 'Offices'

},
{

layer: MRDOffices,

title: 'Marine Resources Division Offices'

},
{

layer: WFFDistOff,

title: 'Wildlife and Freshwater Fisheries
District Offices'

},
{

layer: Facilities,

title: 'Facilities'

},
{

layer: SLDFacilities,

title: 'State Lands Facilities'

},
{

layer: hatcheries,

title: 'Hatcheries'

},
{

layer: WFFDistricts,

title: 'Wildlife and Freshwater Fisheries
Districts'

},
{

layer: inshoreReefs,

title: 'Inshore Artificial Reefs'

},
{

layer: nearshoreReefs,

title: 'Nearshore Artificial Reefs'

},
{

layer: offshoreReefs,

title: 'Offshore Artificial Reefs'

},
{

layer: navAids,

title: 'Navigational Aids'

},
{

layer: boatRamps,

title: 'DCNR-managed Boat Ramps'

},
{

layer: publicLakes,

title: 'DCNR-owned Public Fishing Lakes'

},
{

layer: FWactivities,

title: 'Activities'

},
{

layer: FWaccess,

title: 'Parking and Access'

},
{

layer: FWtrails,

title: 'Trails'

},
{

layer: BartramTrail,

title: 'Bartram Canoe Trail'

},
{

layer: BartramRoutes,

title: 'Routes'

},
{

layer: BartramPOI,

title: 'Points of Interest'

},
{

layer: FWtracts,

title: 'Forever Wild Tracts'

},
{

layer: SLDtracts,

title: 'State Lands Division Recreational
Tracts'

},
{

layer: checkStations,

title: 'Checking Stations'

},
{

layer: ranges,

title: 'Ranges'

},
{

layer: WMA,

title: 'Wildlife Management Areas'

},
{

layer: stateparksentL,

title: 'State Parks Entrances'

},
{

layer: stateparksL,

title: 'State Parks'

},
{

layer: boundaries,

title: 'States and Counties',

noLegend: true

//collapsed: false, // whether this root layer should be collapsed
initially, default false.

//slider: false // whether to display a transparency slider.

}]

},
'tocDiv');

toc.startup();

});

kenbuja

Can you post your code or show how it's not operating correctly using a site like JSFiddle or JSBin?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.