1

I am developing an application that fetches and displays raster/image maps (png, tif), into a leaflet map. However, I didn't like the page and the map refresh upon form submission.

In addition, I want the map to only refresh the image layer. Using the normal way, it is full of refershes. So I managed to get this code working.

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

And the leaflet image layer here.

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

So the exact problem is, the $datafile couldn't be echoed on leaflet raster layer and I would like to reset the form values after submit. I tried to use setUrl from leaflet method on image layer but it doesn't work.

0

The problem is solved. First, I changed echo $datafile to echo '<script type="text/javascript">imageUrl = "'. $datafile. '"; </script>'; This js variable is echoed in the html output page. Then, it was possible to call the js variable, imageUrl.

There, was another problem with the image display. I was hiding the image layer div using display:nonewhen no file is found. That cause the image not to show. Thus, in the jquery success function, I had to add, $("img.leaflet-image-layer.leaflet-zoom-animated").show();

Then a friend helped me to add a function using setUrl() function of leaflet which is used to change the imageUrl asynchronously.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.