How to turn baselayer default upon user click on layer switcher and maintain after page refresh?

[Wondimagegn Tesfaye]

Hello! 

Thank you for the nice work! 

I have a system that use leaflet and uses image overlay. So the page refereshes again and again upon user submit to search image. The system has 3 base layer - satellite, street, and grayscale. And the default is satellite. What I exactly want is, when a use selects the grayscale, I want grayscale to become the default base layer and persist after page refresh. The same for other layers. So I found this solution that works for other form radio buttons with value. 

But unfortunatly leaflet radios doesn't have values and doesn't even have different classnames or names. So it is hard to do anything unless user inserts manually and again the problem is, if you add a value, the value will be the same for all radios. 

Below is my leaflet code. 

var grayscale = L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {

        id: 'examples.map-20v6611k', 

        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +

        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

        'Imagery © <a href="http://mapbox.com">Mapbox</a>'}),

    streets = L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {

        id: 'examples.map-i86knfo3',   

        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +

        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

        'Imagery © <a href="http://mapbox.com">Mapbox</a>'}),

    satellite = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer\

        /tile/{z}/{y}/{x}', {

        attribution: '&copy; <a href="http://www.esri.com/">Esri </a>' + 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, \

        and the GIS User Community'}),

    kml = omnivore.kml('ea.kml'),

    raster = L.imageOverlay('<?php echo $datafile;?>', [[-3.00, 31.00], [0.50, 35.00]]);               

// Get url parameters

var params = {};

window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {

  params[key] = value;

});

if (params.layers) {

  var activeLayers = params.layers.split(',').map(function(item) { // map function not supported in IE < 9

  return layers[item];

  });

}

var map = L.map('map', {

    center: [-1.01069, 32.91504],            

    zoom: 8,

    minZoom: 6,

    maxZoom:16,

    layers: [grayscale, streets, satellite, kml], 

    layers: activeLayers || [satellite, raster]

});

var baseLayers = {

    "Grayscale": grayscale,

    "Streets": streets,

    "Satellite": satellite

};

var overlays = {

    "Raster Data": raster,

    "Countries": kml

};

L.control.layers(baseLayers, overlays).addTo(map);

And the code that keeps radio checked after page refresh is the following. 

 (function() {

        var p = document.createElement('p');

        p.id = 'loading';

        p.innerHTML = "Retrieving document – Please Wait……";

        document.body.appendChild(p);

    })();

jQuery(function($) {

  

  $("#loading").fadeOut(function() {

    $(this).remove();

  });

  

});

$(function() {

$("input[type=\"radio\"]").click(function(){

var thisElem = $(this);

var value = thisElem.val();

//localStorage:

localStorage.setItem("option", value);

//Cookies:

//document.cookie="option="+value;

    });

//localStorage:

var itemValue = localStorage.getItem("option");

if (itemValue !== null) {

$("input[value=\""+itemValue+"\"]").click();

}

    

//Cookies:

var n = document.cookie;

if (n.indexOf("option=") !== -1) {

var cookieValue = n.substring(n.indexOf("option=")+7, n.indexOf(";"))

$("input[value=\""+cookieValue+"\"]").click();

}

    

});

Is there any way to acheive what I want using leaflet built-in function or parameter or using java script in general?

Thank you!

[Abel Vázquez]

To make persistent the selected base layer, you may:

1. // ...define your base and overlay layers and layergroups
2. ver initLayer = (localStorage && localStorage.getItem('base')!=null)? baseLayers[localStorage.getItem('base')]:baseLayers.Satellite;  // try to get the last used base layer from localStorage or set the default one if not found
3. var map = L.map('map',{..., layers: initLayer,...}); // init the map with the layer set above
4. var layerControl =L.control.layers(baseLayers, overlays); // set the layer control with the base and overlay layergroups
5. layerControl.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);}); // save the base layer name to localStorage on change
6. layerControl.addTo(map); // add the layer control to the map

This should work it out. 

But anyway, you should avoid refreshing the whole map just to change an image overlay. You could just call

raster.setUrl('<?php echo $datafile;?>'); 

To refresh your image overlay per request..

[Wondimagegn Tesfaye]

Thank you very much for the support and I really appreciate your advice on avoiding page refresh. 

I followed the step but leaflet failed to load and there is a js error too. Satellite is "not defined - js error " and even if I corrected ver to var and satellite to small caps. 

I moved raster.setUrl('<?php echo $datafile;?>');  to imageURL of image layer but it is not rendering properly. rasster.setUrl are mixed with the image url. How should I do it? 

Thank you!

[Abel Vázquez]

• I have posted pseucode! Sure it has lots of misstypes, you can't just copy&paste without checking each and every char!
• Regarding the error:
• 'Satellite' is the name of the property within your baseLayers object, not your layer object.So its capital letter is fine right there.
• Is baseLayers properly defined before requesting its 'Satellite' item? 
• You could try baseLayers['Satellite'] instead baseLayers.Satellite. Browser stuff.
• I don't understand your issue with setURL(). Could you give me more details?

[Wondimagegn Tesfaye]

I have made some progress now. I am a newbie to javascript and leaflet too. So I might be slow to understand lol. 

Here is what I did.

 

               var initLayer = (localStorage && localStorage.getItem('base')!=null)? baseLayers[localStorage.getItem('base')]:baseLayers.Satellite;          

               var layerControl =L.control.layers(baseLayers, overlays);

               layerControl.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);});               

               layerControl.addTo(map); 

The error message is the following. 

 Uncaught TypeError: undefined is not a function . 

It is referring to the third line here. 

For the setURL, I didn't get you on where I should instert that line. raster.setUrl('<?php echo $datafile;?>'); 

Because, when I inserted it in the layer where the image url is needed by the Image layer, it doesn't render correctly. It shows "raster.setUrl" where it only expects the url of the image. 

I would like to know how to implement setUrl and I would like to know where I can read on it. I searched online and couldn't find anything. 

Thanks!

[Abel Vázquez]

Regarding .setURL() you can read about it in LeafletJS reference: http://leafletjs.com/reference.html#imageoverlay

Misstype! Sorry! That line should read:

map.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);});  

[Wondimagegn Tesfaye]

No problem at all! Thank you very much for the continued help. I have made the changes and according to some readings on seturl. 

Even though there is no js error now, the intended outcome couldn't be achieved. Here is the code. The layers keep on turning to default and the Seturl didn't change the map from refreshing after submit.  

 

   //other layers....

    raster=L.imageOverlay(setUrl('<?php echo $datafile;?>'),[[-3.00, 31.00], [0.50, 35.00]]);

    //raster = L.imageOverlay('<?php echo $datafile;?>', [[-3.00, 31.00], [0.50, 35.00]]);               

// Get url parameters

var params = {};

window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {

  params[key] = value;

});

if (params.layers) {

  var activeLayers = params.layers.split(',').map(function(item) { // map function not supported in IE < 9

  return layers[item];

  });

}

var map = L.map('map', {

    center: [-1.01069, 32.91504],            

    zoom: 8,

    minZoom: 6,

    maxZoom:16,

    layers: [initLayer,grayscale, streets, satellite, kml], 

  //  layers: activeLayers || [initLayer,satellite, raster]

});

var baseLayers = {

    "Grayscale": grayscale,

    "Streets": streets,

    "Satellite": satellite

};

var overlays = {

    "Raster Data": raster,

    "Countries": kml

};

  var initLayer = (localStorage && localStorage.getItem('base')!=null)? baseLayers[localStorage.getItem('base')]:baseLayers.Satellite;          

       var layerControl =L.control.layers(baseLayers, overlays);

       map.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);});       

       layerControl.addTo(map); 

 

However, I managed to submit the form without page refresh using jquery. 

Unfortunately, jquery can only output the map on one div and I couldn't manage to echo the $datafile variable into leaflet and refresh the raster layer only. 

Here is the jquery code. 

 $('#forms').on('submit',function(e) {
        $.ajax({
            url:'fun.php',
            data:$('#forms').serialize(),
            type:'GET',
            success:function(result){
                $('#downloads').html(result);
            }
        });
        e.preventDefault();
    });

On Thursday, September 18, 2014 4:06:18 PM UTC+3, Wondimagegn Tesfaye wrote:

[Wondimagegn Tesfaye]

Hello Abel, I am still stuck. Is there any solution?

Thanks!

On Thursday, September 18, 2014 4:06:18 PM UTC+3, Wondimagegn Tesfaye wrote:

[k_man_au]

Can you post your complete code as currently is and I'll try and help.... The above is getting a bit disjointed and hard to follow....

[Wondimagegn Tesfaye]

Sure I will and thank you! 

What I want to achieve is 

1. To make a layer become default upon user click even after page refresh.   

2. To prevent map and entire page refresh when users submit a form. 

Below is the entire code of leaflet map. 

    layers: [initLayer, grayscale, streets, satellite, kml], 

    layers: activeLayers || [satellite, raster]

});

var baseLayers = {

    "Grayscale": grayscale,

    "Streets": streets,

    "Satellite": satellite

};

var overlays = {

    "Raster Data": raster,

    "Countries": kml

};

 //What Abel told me to add this and the intLayer in the layers.

  var initLayer = (localStorage && localStorage.getItem('base')!=null)? baseLayers[localStorage.getItem('base')]:baseLayers.Satellite;        

            var layerControl =L.control.layers(baseLayers, overlays);

            map.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);});       

            layerControl.addTo(map); 

               

var southWest = L.latLng(-13.11158, 20.88477),

     northEast = L.latLng(4.91583, 48.47168),

     bounds = L.latLngBounds(southWest, northEast);  

map.setMaxBounds(bounds);

And below is the entire jquery code that prevents map refresh and the form.

$('#forms').on('submit',function(e) {

$.ajax({

url:'fun.php',

data:$('#forms').serializeArray(),

type:'GET',

success:function(result){

$('#map').html(result);

//window.imageUrl='$datafile';

  $("a.next").appendTo("div#map");

  $("a.prev").appendTo("div#map");

  

 // $(".legend").appendTo("div#map");

  $("#legendcont").appendTo("div#map");

//document.getElementById("forms").reset();

}

});

e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===

});

The form

   <form name="search" id="forms" method="get" action="">

                   

                        <input type="radio" class="paramrd" name="parameter" required value="chl"><span> CHL</span>

                        <input type="radio" class="paramrd" name="parameter" required value="kd490"><span> KD490</span>

                        <input type="radio" class="paramrd" name="parameter" required value="tsm"><span> TSM</span>

                        <input type="radio" class="paramrd" name="parameter" required value="lst"><span> LST</span>

                         

                    <label id="header">Time Period</label>                   

                   

                        <label id="time">SEASONAL</label>

                            <select class="form-control" size="" name="year" id="year">

                                <option value="">--Year--</option>

                               <option value="2014">2014</option> 

                               <option value="2013">2013</option>  

                               <option value="2012">2012</option> 

                               <option value="2011">2011</option>  

                               <option value="2010">2010</option>

                               <option value="2009">2009</option> 

                               <option value="2008">2008</option>  

                               <option value="2008">2007</option>  

                               <option value="2006">2006</option>

                               <option value="2005">2005</option>  

                               <option value="2004">2004</option>

                               <option value="2003">2003</option> 

                               <option value="2002">2002</option>                               

                           </select> 

                            <select class="form-control" name="threem" size="" id="season">

                                <option value="">--Select season--</option>

                                <option value="JFM">January-February-March</option>

                                <option value="AMJ">April-May-June</option>

                                <option value="JAS">July-August-September</option>

                                <option value="OND">October-November-December</option>                                

                            </select>

                            <input class="sr-button" type="submit" value="View" >

                  

            

                        <label  id="time">MONTHLY <span>(YYYY-MM)</span></label>

                             <input type="month" id="month" name="month" value="" placeholder="Eg. 2014-08">

                             <input  type="submit" value="View" class="sr-button">

                                      

                    

                        <label  id="time">WEEKLY <span>(YYYY-W52)</span></label>

                            <input type="week" name="week" value="" placeholder="Eg. 2014-W37" id="week">

                            <input class="sr-button"type="submit" value="View">

                   

                        <label  id="time">DAILY <span>(YYYY-MM-DD)</span></label>

                            <input type="date" value="" id="date" placeholder="Eg. 2014-09-14" name="date">

                            <input type="submit" class="sr-button" value="View">                      

                

                </form>

I have

 uploaded it online now. 

[k_man_au]

Ok great...

Can you talk me through the objectives here.. what data are you returning from fun.php, and what are you trying to do with it? I think your problem is how you are tying to append, but will need more info to fix....

[Wondimagegn Tesfaye]

Sure. The app is a raster image displaying and downloading app. Upon user entering value on the form, php joines the form values and search for files in the disk and if found, overlays it on leaflet image layer and prove a link to download scientific files. So that is it. To add the url to leaflet I echo $datafile php variable inside leaflet's required imageUrl. Now, that is where I only want leaflet to change. 

  raster = L.imageOverlay('<?php echo $datafile;?>', [[-3.00, 31.00], [0.50, 35.00]]);  

Earlier, Abel suggested me to use, setUrl but I couldn't get it working and couldn't figure out how it works even after checking leaflet documentation. 

[k_man_au]

Ok cool.... that makes it a bit easier to understand....

Think about it this way... if you look at the page lifecycle, when the page is first served, php will echo the content of $datafile to the html. After this point it has no way to update that section. Also just changing the content of the variable is likely not enough to load an image. 

You're going to want to:-

-Return $datafile in the ajax response

-Pass this into a javascript function that reassigns 'raster'

I'd declare the variable (passing in the initial value from php as you have done), and then use something like the following (calling swapImage from your ajax response)

var raster = L.imageOverlay('<?php echo $datafile;?>', [[-3.00, 31.00], [0.50, 35.00]]).addTo(map);  

function swapImage(dataFileName)

{

        if (map.hasLayer(raster)) {

map.removeLayer(raster);

}

   

raster = L.imageOverlay(dataFileName, [[-3.00, 31.00], [0.50, 35.00]]).addTo(map);  

}

[Wondimagegn Tesfaye]

I got you. That is the point.
I tried your recommendation but no change in the lack of image overly being rendered.

With ajax, I managed to generate the output of the php file file without page refresh. Download links are shown but the problem is, jquery only loads the output in downloads div. The problem is, one of the outputs, the imageUrl that comes as $datafile couldn't be found by leaflet js code because the page didn't refresh.

[k_man_au]

Sorry about the delay in reply. I have tested the code I gave you and it works well.

I'm convinced the problem is either in the data being returned by your Ajax call, or how you are calling the update function.

Can you post a sample output from fun.php here or would you prefer to converse off list (if this is a closed project?). I can't help more without seeing this

[Wondimagegn Tesfaye]

That is fine. The output of the php file is simple. It simply generates urls of files in the server, according to users form input and if the file exists, outputs the $datafile (file url for leaflet imageOverlay), links to download file, next and back buttons to navigate files, and a legend. 

function getfile($data, $folder, $name) {

    global $datafile;  

    if ($_SERVER["REQUEST_METHOD"] == "GET") {  

                    //Other validation are skipped. 

                    if (file_exists($datafile) ) {

                        //  echo '<script type="text/javascript"> window.imageUrl="'. $datafile. '"</script>';

                           echo '<input type="hidden" id="url" name="url" value="'. $datafile. '">';    

                                    //Define Datafile and season

                            $datadir='data/' . $_GET['parameter'] . '/' . $folder . '/'; 

                            if ($file=="") $datafile = 'data/' . $_GET['parameter'] . '/' . $folder .'/'. $_GET['parameter'] .'-'.  $data . '.png'; 

                            else $datafile = $file[0];                        

                            $season=($_GET["year"] ."-". $_GET["threem"]);

                            $file = glob('data/' . $_GET['parameter'] . '/' . $folder .'/'. $_GET['parameter'] .'-'.  $_GET["date"]. "*"); 

                            //some more codes on creating a download link for file and next and back buttons with their correct url. 

                   }

                   else {

                          show error message 

                 }

       }

}

After the ajax call, the $datafile, comes to the html div downloads but it cant be accessed outside. 

I don't see any problem with the php code. The problem is, switching the layers and maybe variable scope. 

Could you please send me the jsfiddle or the code where you tested your code on the raster layer. 

Thank you!

[Abel Vázquez]

Maybe you should init your map ONLY with initLayer (and any other layer you want to be displayed at init) and set available layers in Layercontrol. You also need to init your map after defining initLayer.

(red: remove, green: add)

    layers: [initLayer, grayscale, streets, satellite, kml], 

    layers: activeLayers || [satellite, raster]

});

var baseLayers = {

    "Grayscale": grayscale,

    "Streets": streets,

    "Satellite": satellite

};

var overlays = {

    "Raster Data": raster,

    "Countries": kml

};

var initLayer = (localStorage && localStorage.getItem('base')!=null)? baseLayers[localStorage.getItem('base')]:baseLayers.Satellite;  

var map = L.map('map', {

    center: [-1.01069, 32.91504],            

    zoom: 8,

    minZoom: 6,

    maxZoom:16,

    layers: initLayer

});      

var layerControl =L.control.layers(baseLayers, overlays);

map.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);});       

layerControl.addTo(map); 

               

[Wondimagegn Tesfaye]

Thank you very much Abel, it is now working perfectly. I had to remove these lines to work properly. 

var params = {};

window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {

  params[key] = value;

});

if (params.layers) {

  var activeLayers = params.layers.split(',').map(function(item) { // map function not supported in IE < 9

  return layers[item];

  });

} 

layers: activeLayers || [satellite, raster]

Could I do the same for overlay layers? I wanted to keep country checked after page refresh. 

What is now left is, making changes to imagelayer image, without page refresh upon ajax request using php. I think the topic might be more relevant in the other thread that I started here. What do you think Abel and k_man_au?

[Abel Vázquez]

You can reuse the code to save/load one base layer and any number of overlays, Then, init the map with 

layer: [initLayer, initOverlay_1,..., initOverlay_n]

[Wondimagegn Tesfaye]

I did this. 

  var initLayer = (localStorage && localStorage.getItem('base')!=null)? baseLayers[localStorage.getItem('base')]:baseLayers.Satellite; 

  var initOverlay_1 = (localStorage && localStorage.getItem('raster')!=null)? baseLayers[localStorage.getItem('raster')]:raster.Raster; 

  var map = L.map('map', {

    center: [-1.01069, 32.91504],            

    zoom: 8,

    minZoom: 6,

    maxZoom:16,

    layers: [initLayer,initOverlay_1, raster]

});         

var layerControl =L.control.layers(baseLayers, overlays);

map.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);}); 

map.on('rasterchange', function(e){if (localStorage) localStorage.setItem('raster', e.name);});   

layerControl.addTo(map); 

I added the codes in blue but I am getting this error. 

Uncaught TypeError: Cannot read property '_leaflet_id' of undefined 

What should I do to fix it?

[Abel Vázquez]

To manage when the user change the checked overlays, edit this:

var layerControl =L.control.layers(baseLayers, overlays);

map.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);}); 

map.on('rasterchange', function(e){if (localStorage) localStorage.setItem('raster', e.name);});   

layerControl.addTo(map); 

into this:

var overlays =[];

var layerControl =L.control.layers(baseLayers, overlays);

map.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);}); 

map.on('overlayadd', function(e){overlays.push(e.name);if (localStorage) localStorage.setItem('overlays', overlays);}); 

map.on('overlayremove', function(e){var i= overlays.indexOf(e.name); if (i<-1) overlays.splice(i, 1); if (localStorage) localStorage.setItem('overlays', overlays);}); 

layerControl.addTo(map);

There is no event to manage L.imageOverlay's URL change

[Abel Vázquez]

Misstype!!!

...if (i<-1) overla...

Should be

...if (i>-1) overla...

[Wondimagegn Tesfaye]

I didn't get this point "There is no event to manage L.imageOverlay's URL change". Does it mean I can't sustain user selection to hide it or show it after page referesh or do you mean I can't change the url of the image with ajax form request without page refresh?

 Could I do sustain the selection of Omnivore kml layer?

I did the following after fiddling a bit based on what you said. 

Could I use 

var initLayer = (localStorage && localStorage.getItem('base')!=null)? baseLayers[localStorage.getItem('base')]:baseLayers.Satellite; 

 //var initOverlay_1 = (localStorage && localStorage.getItem('Countries')!=null)? baseLayers[localStorage.getItem('Countries')]:overlays.Countries;  //Doesn't change anything and the layer switcher breaks when added on any of the layers. 

  var map = L.map('map', {

    center: [-1.01069, 32.91504],            

    zoom: 8,

    minZoom: 6,

    maxZoom:16,

    layers: [initLayer, raster]

});  

       

var overlays =[raster, kml];              

var layerControl =L.control.layers(baseLayers, overlays);

map.on('baselayerchange', function(e){if (localStorage) localStorage.setItem('base', e.name);}); 

map.on('overlayadd', function(e){overlays.push(e.name); if (localStorage) localStorage.setItem('Countries', kml);});

map.on('overlayremove', function(e){var i= overlays.indexOf(e.name); if (i>-1) overlays.splice(i, 1); if (localStorage) localStorage.setItem('Countries', kml);});   

layerControl.addTo(map); 

The result is, both the kml and raster layers selection is not sustained after page refresh but there is no error. 

[Wondimagegn Tesfaye]

Hello! 

Waiting for answer...

On Thursday, September 18, 2014 4:06:18 PM UTC+3, Wondimagegn Tesfaye wrote:

[Abel Vázquez]

Check the API docs!

There is an event for base layer change and two more for overlays add and remove. But there is no event for imageoverlay url change, you may code your own anyway.

[Wondimagegn Tesfaye]

Oh I see. It is good to know. 

var map = L.map('map', {

    center: [-1.01069, 32.91504],            

    zoom: 8,

    minZoom: 6,

    maxZoom:16,