Control Layer Opacity with jQueryUI Sliders

Feb 072012
 

It’s been a while since I last posted on my blog! Very excited to be back =D. The fall uni­ver­sity semes­ter went by quickly due to an onslaught of projects, tests and my under­grad­u­ate the­sis, which I am proud to say that I sur­vived and com­pleted with hon­ours. This semes­ter I started work­ing for Dr. Claus Rin­ner (my the­sis super­vi­sor) on a web map­ping appli­ca­tion that uti­lizes some of the data from my the­sis. All in all, a busy year for me at the university!

Today I would like to take some time and intro­duce the power of jQuery, specif­i­cally the UI slider ele­ment. I will take us through the cre­ation of a sim­ple map that will be pow­ered by the Leaflet JavaScript library and imple­ment a jQueryUI slider to con­trol indi­vid­ual layer opacity.

 

Create a Basic HTML Page Containing a Leaflet Powered Map



    Slider Tutorial
    
    
    


    

    
    
 

Remem­ber to ref­er­ence the Leaflet JavaScript and stylesheet files at their appro­pri­ate loca­tions on your server/localhost. Note that the map style inher­its a 100% width if the width option is not spec­i­fied (as above). Also, we cen­tred our map on China (30.524276,103.007813), at zoom level “4”.

This gives us the fol­low­ing map:


 

Add Map Layer Overlays

Before I intro­duce the jQuery code to our exam­ple, I would like to add an over­lay map layer. Our aim will be to con­trol this layer’s opac­ity with the jQueryUI slider later on.

Update the code as I have below, adding lines 19–24, which cre­ates a new WMS layer. This spe­cific WMS is hosted by Cube­W­erx and con­tains many lay­ers. I’ve selected GTOPO30, a 30-arc sec­ond elevation/topo layer for this tuto­r­ial. Be sure to append the .add­Layer method for layer GTOPO30 as I have on line 25.




    Slider Tutorial
    
    
    


    

    
    
 


 

Add a jQueryUI Slider to Control Layer Opacity

Now to add the slider that will con­trol our GTOPO30 layer opac­ity and make view­ing this map a lit­tle more user friendly. Cur­rently, the GTOPO30 layer takes over the map and becomes the only vis­i­ble layer. We know that a base layer exists but any other user view­ing our map would have a hard time dis­cern­ing that information.

Let’s imple­ment a slider to con­trol the GTOPO30 layer’s opac­ity so that users can cus­tomize the vis­i­bil­ity of the ele­va­tion data. Lines 34–39 are the updated bits of code for the slider’s func­tion­al­ity and GTOPO30 opac­ity con­trol. Fur­ther, lines 11–13 style the slider ele­ment. Lastly, don’t for­get to add a ref­er­ence to the jQuery and jQueryUI JavaScript libraries and stylesheet (lines 8–10) in the HEAD sec­tion of the doc­u­ment. Note that I’ve also changed the opac­ity of the GTOPO30 layer to 50% (0.5) in the layer ini­tial­iza­tion (line 31).




    Slider Tutorial
    
    
    
    
    
    
    


    

    

    
    
 


 

The jQuery and jQueryUI libraries offer a vari­ety of func­tions that allow you to expand the inter­ac­tiv­ity of your web map­ping appli­ca­tions. Although the jQuery library is rel­a­tively young, its func­tion­al­ity and user-base make it extremely use­ful and easy to learn. Pro tip: make use of the Stack­Over­flow Q&A for research­ing your ques­tions and when you can’t find an answer, be sure to add to the dis­cus­sion by ask­ing on StackOverflow!

Thanks for read­ing! Let me know if this tuto­r­ial helped you by post­ing a com­ment below. I greatly appre­ci­ate any and all feedback.

Cheers! =D