14

i have a basic geoJson program in javascript by using leaflet API.

<html>
<head>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="india.js" type="text/javascript"></script>

</head>


<body>
<div id = "map1" style="width: 1100px; height: 400px"> </div>

<script>

var area = L.map('map1', {center: [27.8800,78.0800], zoom: 4 });

L.tileLayer('http://a.tiles.mapbox.com/v3/raj333.map-gugr5h08/{z}/{x}/{y}.png').addTo(area);

var indiaLayer= L.geoJson(india, {style: {weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.1}});

        area.addLayer(indiaLayer);

        function clicked(){

        this.options.style.fillOpacity = 0.8;
            //how to refresh layer in the given map

        }

        indiaLayer.on('click', clicked);                
</script>
</body>
</html>

the problem is how would i automatically refresh the content of Layer on the map.

example here

             function clicked(){

        indiaLayer.style.fillOpacity = 0.8;
            //how to refresh layer in the given map

        }

        indiaLayer.on('click', clicked);   

when user click on indiaLayer , the fillOpacity variable changes but doesn't reflect back on map which is understood since i am not refreshing the map. I don't know how to do it.

please help

P/s: these are the functions available on indiaLayer object (i.e. this object inside clicked function...which one to use for this purpose or there exist none)

You can check the list of methods available of GEOJson in the Leaflef documentation This is the link to v.0.7.7, which is the closest available to used in this example.

3 Answers 3

20

Last time I've used

map._onResize(); 

and that help me refresh map. Maybe a little hack, but, it work.

In your code will be area._onResize()

P.S: Maybe you should try change the way to set new opacity value - try change

function clicked(){
    this.options.style.fillOpacity = 0.8;
 }

to that

function clicked(){
    this.setStyle({fillOpacity: 0.2});
 }
3
  • just modified my answer. i hope it helps
    – Elephant
    Aug 30, 2013 at 2:28
  • However, i have one more query if you don't mind to look at for example , i declared my geoJson layer as var indiaLayer= L.geoJson(india, {style: {weight: 2, opacity: 1, color: '#F7BE81', dashArray: '10', fillOpacity: 0.2}}); Now if i want to access the first argument to the L.geoJson inside function clicked() ..like this way alert(this._layers.22.feature.id); the firebug throws an syntex error ; missing. Can you look into it?
    – user609306
    Aug 30, 2013 at 9:48
  • 1
    maybe there is a syntax error somewhere in your code. Anyway I can't tell anything without code. Try to create new question with source code, but I think you should carefully recheck your code before doing this.
    – Elephant
    Aug 30, 2013 at 14:33
20
map.invalidateSize();

map._onResize() - it's a hack, and there is no guarantee that it won't be removed in future versions.

3
  • 6
    Actually invalidateSize won't work if the size of the map did not change. From the docs: "Checks if the map container size changed and updates the map if so"
    – a1an
    Dec 16, 2015 at 17:29
  • My problem was in this sitaution: My map was initially hidden, and when I displayed it, it was't initialized (not all tiles was loaded). After I have added this method call this problem was fixed. So I think that it makes some update anyway. Dec 18, 2015 at 1:59
  • invalidateSize does not position open marker popups well when they are already open
    – sn3p
    Oct 15, 2019 at 11:00
0

area.fitBounds(area.getBounds());

2
  • Op asked"the problem is how would i automatically refresh the content of Layer on the map. example here
    – justDev7a3
    Dec 13, 2016 at 13:46
  • 4
    @ImportanceOfBeingErnest Please read the question and the answer before reviewing. Dec 13, 2016 at 13:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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