function leafletInit(map,routeList){
    var routes = L.layerGroup();
    displayRoutes(map, routeList, routes);
}
function displayRoutes(map, data, routes){
    var selectedFeature = null;
    var highlight = {
        'color': '#149c14',
        'weight': 4,
        'opacity': 1
    };
    var btnCount= 0;
    var routeLayer = L.geoJson(data,{
        onEachFeature: function(feature,layer){
            if(feature.properties.route_color)
                layer.setStyle({color: feature.properties.route_color });
            else
                layer.setStyle({color:'#0000FF'});

            layer.on('click',function(e){
                if(selectedFeature){
                    selectedFeature.editing.disable();
                }
                if(document.getElementById('edit-mode').checked){
                    selectedFeature = e.target;
                    selectedFeature.editing.enable();
                    var default_color = layer.options.color;
                    layer.setStyle(highlight);
                    selectedFeature.feature.properties.highlight = true;
                    hideLayers(map);

                    if(btnCount == 0){
                        btnCount+= 1;
                        var editBtn = L.easyButton({
                            id:'edit',
                            states:[{
                                icon: "fa fa-pencil-square-o",
                                onClick: function(btn){
                                    var editedFeature = selectedFeature.toGeoJSON();
                                    $.ajax({
                                      // ...
                                        success: function(data){
                                            var obj = JSON.parse(data);
                                            //...
                                            //...
                                            $("#modal-create").on('click', function(){
                                                feature.type = "Feature";
                                                $.ajax({
                                                    //...
                                                });
                                            });
                                        }
                                    });
                                }
                            }]
                        });
                        editBtn.addTo(map);

                        var finishBtn = L.easyButton({
                            id:'finish',
                            states: [{
                                icon:"fa fa-check",
                                onClick: function(btn){
                                    selectedFeature.editing.disable();
                                    showLayers(map);
                                    layer.closePopup();
                                    var editedFeature = selectedFeature.toGeoJSON();
                                    alert("Updating:" + editedFeature.route_id);
                                    $.ajax({
                                       //...
                                    });
                                    //...
                                }
                            }]
                        });
                        finishBtn.addTo(map);
                    }
                }
            });
        }
    });
    routes.addLayer(routeLayer);
}

function hideLayers(map,routeLayer){
    //routeLayer.eachLayer(function (layer){
    this.layer.eachLayer(function(layer){
        alert(JSON.stringify(layer.feature.properties.highlight));
        if(!layer.feature.properties.highlight){
            map.removeLayer(layer)
        }
    });
}

function showLayers(map,routeLayer){
    this.layer.eachLayer(function(layer){
        layer.feature.properties.highlight = false;
            map.addLayer(layer);
    });
}