How do I get my dojo sliding panel for a table of contents to work?

ChrisSergent — Fri, 05 Dec 2014 18:04:13 GMT

I am trying to use dojo animation so that I can store my table of contents in a slide in slide out panel. I want to know how to keep it from sliding across the screen on button click left and how to get keep the scroll bar from showing up when it slides right.

Here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

width:100%;

}

#tocPanel

{

position:absolute;

right:0%;

top:20%;

height:600px;

width:300px;

background-color:Red;

z-index:50;

}

#slideLeftButton

{

position:absolute;

left:0px;

bottom:0px;

}

#slideRightButton

{

position:absolute;

right:0%;

bottom:0px;

}

</style>

var map;

require(["esri/map", "esri/config",

"esri/geometry/Extent",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/tasks/GeometryService",

"dojo/dom",

"dojo/dom-geometry",

"dojo/fx",

"dojo/on",

"dojo/parser",

"dojo/domReady!"], function (Map, esriConfig, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer, GeometryService, dom, domGeom, coreFx, on, parser

) {

/* The proxy comes before all references to web services */

/* Files required for security are proxy.config, web.config and proxy.ashx

- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

(Roles are not required)

The proxy section is defined on the ESRI sample. I have included it as

part of the documentation reads that the measuring will not work.

I thought that might be important.

// Proxy Definition Begin

//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

//If this null or not available the project and lengths operation will not work.

// Otherwise it will do a http post to the proxy.

esriConfig.defaults.io.proxyUrl = "proxy.ashx";

esriConfig.defaults.io.alwaysUseProxy = true;

// Proxy Definition End

// set custom extent

var initialExtent = new Extent({

"xmin": 777229.03,

"ymin": 1133467.92,

"xmax": 848340.14,

"ymax": 1185634.58,

"spatialReference": {

"wkid": 3435

}

});

// create map and set slider style to small

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent,

logo: false

});

// add imagery

var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// set operational layers

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

// add operational layers

map.addLayer(operationalLayer);

// add point feature layer

var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0");

map.addLayer(pointFeatureLayer);

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

function slideIt(amt) {

coreFx.slideTo({

node: "tocPanel",

top: domGeom.getMarginBox("tocPanel").t.toString(),

left: (domGeom.getMarginBox("tocPanel").l + amt).toString(),

unit: "px"

}).play();

}

on(dom.byId("slideRightButton"), "click", function () {

slideIt(200);

});

on(dom.byId("slideLeftButton"), "click", function () {

slideIt(-200);

});

}

);

</script>

</head>

<button type="button" id="slideLeftButton">Slide it Left</button>

<button type="button" id="slideRightButton">Slide it right</button>

</div>

</body>

</html>

Re: How do I get my dojo sliding panel for a table of contents to work?

SteveCole — Mon, 08 Dec 2014 15:53:26 GMT

I have done what you're trying to do but I left my panel on the lefthand side so I didn't have to deal with the issue you're experiencing. Have you considered another method of accomplishing this? You could use a Dojo ExpandoPane, specifying the location of the pane to be the right side of the screen:

JS Fiddle/

You can move the ExpandoPane to either side of the map using the "leading/trailing" attribute as shown here or by using the "top/bottom/left/center/right" attribute in other dojo layout demonstrations.

Steve

Re: How do I get my dojo sliding panel for a table of contents to work?

ChrisSergent — Mon, 08 Dec 2014 16:54:28 GMT

I did try it on the left, but the ExpandoPane would allow me to place it on the right where I want it. Thanks.

topic Re: How do I get my dojo sliding panel for a table of contents to work? in ArcGIS JavaScript Maps SDK Questions

How do I get my dojo sliding panel for a table of contents to work?

Re: How do I get my dojo sliding panel for a table of contents to work?

Re: How do I get my dojo sliding panel for a table of contents to work?