Hi there!
We are using the Esri Javascript API 3.18.
I've got a strange Error ( from which i don't know if it is even an Error or not ).
The Sliderbar is not displayd correcly and the zoombutton doesn't move.
Our Zoomslider is automatically setup within the building of the Map.
map = new Map("map", {
spatialReference:spatialRef,
lods:lods,
logo: false,
autoResize:true,
sliderPosition: "top-left",
sliderStyle: "large",
displayGraphicsOnPan: false
});
and in the map it's displayed like this:
I searched the Web for any information about strange displaybehaviour of the Slider but found nothing usefull.
There are no css-classes defined from our side for the slider, nor are the regular styles overwritten by any.
Regards, Miriam
Solved! Go to Solution.
Hmm, I think I was able to get it to work here:
JS Bin - Collaborative JavaScript Debugging
I referenced two css file:
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/esri/esri.css">
Looks like an issue with sliderStyle. If you change from large to small does it work? I was able to reproduce odd behavior using an Esri sample.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
autoResize: true,
sliderPosition: "top-left",
sliderStyle: "large",
zoom: 13
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Hmm, I think I was able to get it to work here:
JS Bin - Collaborative JavaScript Debugging
I referenced two css file:
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/esri/esri.css">
Hi Noah,
Thanks for that, you can also use Claro and the non-calcite version of the Esri CSS.
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
JS Bin - Collaborative JavaScript Debugging
The question is should you have to add another CSS to get the zoom slider to display correctly (Edited as this is a rhetorical question not meant to be answered because you do have to add another CSS to get it to display properly)? The "Create a map" sample only has the Esri CSS included.
Create a map | ArcGIS API for JavaScript 3.20
Would you reasonably expect to have to add another CSS to handle an optional parameter inside the Map constructor? If it is a reasonable expectation to add another CSS just to handle a simple parameter, should the sample be updated to have both CSS included?
Patrick
Thank you Noah Sager! This works!
@Patrick Taurman Thanks for the hint with claro!