I want to load and remove a layer in a specified interval of time. I make it blink with a random color function associate to my layer style. I can load this layer multiple times, unload it in a specified interval of time, but both actions at the same time failed (layer load and and load and load until Firefox crash). I also try clearLayer and setInterval(function() {getRandomColor();}, 200); without success.

How can I make my color function load in a specified interval of time ? (and make my style dynamic)

// Random colors
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
return color;

// Layer style
function doStyleFields(feature) {
        return {
            color: '#000000',                   
            fillColor: getRandomColor(),
            weight: 0,
            dashArray: '',
            opacity: 1.0,
            fillOpacity: 0.5

// Layer
function loadJson() {
    var exp_FieldsJSON = new L.geoJson(exp_Fields,{
        onEachFeature: pop_Fields,
        style: doStyleFields

// LayerGroup
var layerJson = new L.LayerGroup();
var overlays = {"Fields": layerJson};   

// Interval
$(document).ready(function() {          
    setInterval(function() {loadJson();}, 200);         
    setInterval(function() {map.removeLayer(layerJson);}, 199); 

If my understanding is correct, in fact you remove and re-load your exp_Fields GeoJSON data into a new GeoJSON layer so that it comes with a new fill color?

In that case, why not simply changing the style of your GeoJSON layer, rather than remove and re-load? Use the setStyle() method.

Changes styles of GeoJSON vector layers with the given style function.

What may happen with your remove and re-load technique, is that because you have a slightly different interval (remove every 199 ms, re-load every 200 ms), your 2 intervals will become out-of-sync after 200 iterations (about 40 seconds).

Furthermore, in fact you just hide layerJson from map every 199 ms, but you add a new GeoJSON layer into layerJson every 200 ms, so they stack up and increase the required memory.

$(document).ready(function() {             
    setInterval(function() {
        // Could be directly applied to your GeoJSON layer if you kept a global reference to it.
        layerJson.eachLayer(function (layer) {
    }, 200);
  • It's better, thanks. My method wasn't good, you're right. A last issue : when I'm loading my document, i have to check the radio button to see the layer, how can i make it appear directely ? However my layer group is .addTo(Map) – GeoGyro Mar 9 '16 at 13:33
  • If you do a layerJson.addTo(map), your Layers Control should automatically select the corresponding radio. – ghybs Mar 9 '16 at 13:43
  • Glad it helped. Please can you mark the answer as "accepted" if it solved your issue, so that people know your question is resolved? – ghybs Mar 9 '16 at 13:54

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.