With Ken's help, I have created a map with a horizontal slider placed in the footer section of my map. Here is my jsfiddle : https://jsfiddle.net/befoley/xuhm1ph4/8/ . The problem I am now having is trying to get the slider to work.
Solved! Go to Solution.
Brain,
Here is the code for connecting the slider with the map:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style type="text/css">
html,
body {
height: 98%;
width: 98%;
margin: 0;
padding: 5px;
font-family: helvetica, arial, sans-serif;
font-size: 90%;
overflow: auto;
}
#content {
position: fixed;
top: 32px;
width: 100%;
height: 100%;
left: 0;
margin: 0;
border: 0;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
left: 0;
background: silver;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 35px;
left: 0;
background: silver;
}
#map {
position: fixed;
width: 100%;
height: 100%;
border: 0;
margin-left: -15px;
margin-top: -15px;
margin-right: -15px;
}
/*----------------------------------------------------------*/
/* Styling the buttons for drop-down and drop-up menus. */
/*----------------------------------------------------------*/
.claro .dijitButton .dijitButtonNode,
.claro .dijitDropDownButton .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode {
border: 0;
padding: 1px 200px 1px 1px;
color: #000000;
border-radius: 0;
box-shadow: none;
background: none;
font-family: Calibri;
font-size: 15px;
}
.dijitSlider {
width: 200px;
}
</style>
<title> by befoley</title>
<script src="https://js.arcgis.com/3.17/"></script>
<script type='text/javascript'>
var map, toc, basemap, dynaLayer1;
require([
"dojo/dom",
"dojo/parser",
"dojo/on",
"dojo/_base/lang",
"esri/map",
"esri/geometry/Extent",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dojo/domReady!"
],
function(
dom, parser, on, lang,
Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
BorderContainer, ContentPane, HorizontalSlider
) {
parser.parse();
var initialExtent = new esri.geometry.Extent({
"xmin": -13133567.66,
"ymin": 3996227.94,
"xmax": -13031753.54,
"ymax": 4087952.37,
"spatialReference": {
"wkid": 102100
}
});
map = new Map("map", {
basemap: "streets",
extent: initialExtent,
smartNavigation: false,
logo: false,
showAttribution: false,
zoom: 14,
slider: false
});
map.on("layers-add-result", initSlider);
function initSlider() {
var slider = new HorizontalSlider({
map: map,
value: (map.getLevel() + 1),
minimum: 0,
maximum: 17,
intermediateChanges: true,
discreteValues: 17
}, dojo.byId("slider"));
on(slider, "change", lang.hitch(this, function(evt){
map.setLevel(parseInt(slider.value, 10));
}));
}
dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer", {
opacity: 0.8
});
map.addLayers([dynaLayer1]);
}
);
</script>
</head>
<body>
<div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true">
<div id="header"></div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"></div>
</div>
<div id="footer">
<div id="slider" style="position:absolute;left:650px;top:5px;vertical-align:middle;"></div>
</div>
</body>
</html>
Brain,
I don't see anything in your code that attempts to use the slider to do anything... What is the slider suppose to do?
I wanted it to zoom-in/zoom-out the map
Brain,
Just by adding a slider does not connect it to the map for zooming in and out. Let me see if I can get you a sample for this.
Thanks Robert
Brain,
Here is the code for connecting the slider with the map:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style type="text/css">
html,
body {
height: 98%;
width: 98%;
margin: 0;
padding: 5px;
font-family: helvetica, arial, sans-serif;
font-size: 90%;
overflow: auto;
}
#content {
position: fixed;
top: 32px;
width: 100%;
height: 100%;
left: 0;
margin: 0;
border: 0;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
left: 0;
background: silver;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 35px;
left: 0;
background: silver;
}
#map {
position: fixed;
width: 100%;
height: 100%;
border: 0;
margin-left: -15px;
margin-top: -15px;
margin-right: -15px;
}
/*----------------------------------------------------------*/
/* Styling the buttons for drop-down and drop-up menus. */
/*----------------------------------------------------------*/
.claro .dijitButton .dijitButtonNode,
.claro .dijitDropDownButton .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode {
border: 0;
padding: 1px 200px 1px 1px;
color: #000000;
border-radius: 0;
box-shadow: none;
background: none;
font-family: Calibri;
font-size: 15px;
}
.dijitSlider {
width: 200px;
}
</style>
<title> by befoley</title>
<script src="https://js.arcgis.com/3.17/"></script>
<script type='text/javascript'>
var map, toc, basemap, dynaLayer1;
require([
"dojo/dom",
"dojo/parser",
"dojo/on",
"dojo/_base/lang",
"esri/map",
"esri/geometry/Extent",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dojo/domReady!"
],
function(
dom, parser, on, lang,
Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
BorderContainer, ContentPane, HorizontalSlider
) {
parser.parse();
var initialExtent = new esri.geometry.Extent({
"xmin": -13133567.66,
"ymin": 3996227.94,
"xmax": -13031753.54,
"ymax": 4087952.37,
"spatialReference": {
"wkid": 102100
}
});
map = new Map("map", {
basemap: "streets",
extent: initialExtent,
smartNavigation: false,
logo: false,
showAttribution: false,
zoom: 14,
slider: false
});
map.on("layers-add-result", initSlider);
function initSlider() {
var slider = new HorizontalSlider({
map: map,
value: (map.getLevel() + 1),
minimum: 0,
maximum: 17,
intermediateChanges: true,
discreteValues: 17
}, dojo.byId("slider"));
on(slider, "change", lang.hitch(this, function(evt){
map.setLevel(parseInt(slider.value, 10));
}));
}
dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer", {
opacity: 0.8
});
map.addLayers([dynaLayer1]);
}
);
</script>
</head>
<body>
<div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true">
<div id="header"></div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"></div>
</div>
<div id="footer">
<div id="slider" style="position:absolute;left:650px;top:5px;vertical-align:middle;"></div>
</div>
</body>
</html>
That works perfectly. Again, thanks for all the help you've given me Robert as I continue to learn.