slider for change transparency mapservice with jquery mobile

francescodi_vito · ‎10-03-2013

hi guys
i'm developing a mobile app with jquery mobile and api javascript compact.
I create a list of map service with checkbox to show / hide.
Now i would like to develop a slider for change transparency but my code don't work
This is the code for slider

$(document).ready(function(){
$("#slider-id").slider({
    value:100,
    min:0,
    max:100,
    step:5,
    slide : function(evt, ui){
     featureLayerB.setOpacity(ui.value/100);
}
});
});

and my jquery slider:

<input type="range" id="slider" data-mini="true">

but don't work. Any idea or any help?
Any example?
thanks
Bye

JonathanUihlein · ‎10-03-2013

I'd need to see more code to be able to give specific advice. It's very hard to tell from this small code snippet.

Otherwise, here are some questions:
Does the slider function work (outside of changing the transparency)?
Are you able to change the transparency directly, without the slider?
Have you used a try/catch to identify where the problem occurs?
Is there an error message?
And lastly, can you replicate your issue in a http://jsfiddle.net/ ?

francescodi_vito · ‎10-07-2013

hi jon,
thanks for your reply.
This is my code:
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9, IE=10">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Mobile Gallery</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />

<style type="text/css">
html, body
      {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 100%;
      }
   #mapcontent, #map { width: 100%; height: 100%; padding: 0; position: absolute; z-index: 0;}
    </style>

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5compact/"></script>

<script>
dojo.require("esri.map");
dojo.require("esri.layers.ArcGISDynamicMapServiceLayer");

var featureLayerB;
var featureLayerA;



    var map;
   function init() {
    map = new esri.Map("map", {
      center: [12.785, 42.372],
      zoom: 4,
      basemap: "streets"
    })

    featureLayerB = new esri.layers.ArcGISDynamicMapServiceLayer("http://www.pcn.minambiente.it/arcgis/rest/services/geologica/MapServer",
    {
    visible:false}

    );

    featureLayerA = new esri.layers.ArcGISDynamicMapServiceLayer("http://sgi.isprambiente.it/ArcGIS/rest/services/servizi/elementi_idrografici/MapServer",
    {
    visible:false}

    );

    map.addLayer(featureLayerB)
    map.addLayer(featureLayerA)
}


function updateLayerVisibility() {
var isChecked = $('#checkbox-v-2a').is(':checked');
if(isChecked == true){
featureLayerB.show()
}
else{
featureLayerB.hide()
};

      }

function updateLayerVisibility_1() {
var isChecked = $('#checkbox-v-2b').is(':checked');
if(isChecked == true){
featureLayerA.show()
}
else{
featureLayerA.hide()
};

      }

dojo.ready(init);
</script>
</head>

<body>

<div data-role="page" id="home">

<div data-theme="a" data-role="header" data-position="fixed">
<a href="#toc" data-role="button" data-icon="bars" data-iconpos="notext"></a>
    <h3>Editing</h3>
</div>


<div data-role="content" id="mapcontent">
    <div id="map"></div>
</div>

</div>


<div data-role="page" id="toc">

<div data-theme="a" data-role="header" data-position="fixed">
<a href="#home" data-role="button" data-icon="back" data-iconpos="notext"></a>
    <h3>Layer</h3>
</div>


<div data-role="content">
    <form>
    <fieldset data-role="controlgroup">
        <legend>Vertical:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" onClick="updateLayerVisibility()">
</form>
<form>
<input type="range" id="slider" data-mini="true">
</form>
<form>
        <label for="checkbox-v-2a">Operation Layer 1</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" onClick="updateLayerVisibility_1()">
        <label for="checkbox-v-2b">Operation Layer 2</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Operation Layer 3</label>
    </fieldset>
</form>
</div>

</div>

</body>
</html>
[/HTML]
With the debuger of chrome i don't see nothing when i use the slider.
Thanks for your interest and help
Bye

RobertMEIER · ‎11-01-2013

i am stuck at the exact same place, have you solved this yet?

SteveCole · ‎11-01-2013

I'm going to half to tackle this at some point in the near future myself. When I look at the API documentation, it kinda looks like you could just use a bind on the "change" event. So, from Francesco's example, it would be something like-

$( "#slider-id" ).bind( "change", function(event, ui) {
  featureLayerB.setOpacity(ui.value/100);
});

Steve