1

I would like to load geoJSON from a dropdown list. Everything i found was internal plugin for leaflet such as leaflet-geojson-list. I have a html dropdown list but I don't know how to link my geoJSON files to an action through the leaflet map.

Here is my geojson files example :

var statesData = { "type": "FeatureCollection", "features": 
[ 
    { "type": "Feature", "properties": { "ID": "83260", "LIB": "La  Crau", "DEP": "83", "SURF": 37.480690, "POP2010": 16786.000000, "_COL6": 6648.160000 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 6.043347303606306, 43.149307043824749 ], [ 6.060558140134381, 43.150935909575622 ], [ 6.073786313868094, 43.159020099175599 ], [ 6.084204085483456, 43.16597803233963 ], [ 6.090394026041674, 43.175270594136371 ], [ 6.096263358769209, 43.188389064593764 ], [ 6.093602287356235, 43.198438935391636 ], [ 6.104187492483002, 43.205345802168019 ], [ 6.105439020148427, 43.219244343645315 ], [ 6.113910212271195, 43.227516686635013 ], [ 6.131287593222909, 43.222854757869897 ], [ 6.137764853051754, 43.217940600605793 ], [ 6.140931667040687, 43.211663837842245 ], [ 6.134728124274353, 43.206893578483012 ], [ 6.126437261243066, 43.194242277589616 ], [ 6.114539856022805, 43.188303989357173 ], [ 6.110305637342965, 43.182097845388633 ], [ 6.110632835897187, 43.16806322435027 ], [ 6.125671617273801, 43.154855404465202 ], [ 6.117142588629228, 43.138980679989849 ], [ 6.085011278730224, 43.134116382815463 ], [ 6.079862497114773, 43.114533382190906 ], [ 6.054023743373618, 43.115925571386384 ], [ 6.044924080831911, 43.123006307471485 ], [ 6.043347303606306, 43.149307043824749 ] ] ] ] } },
    { "type": "Feature", "properties": { "ID": "83210", "LIB": "Solliès-Pont", "DEP": "83", "SURF": 83.621588, "POP2010": 29413.000000, "_COL6": 11478.778000 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 6.073786313868094, 43.159020099175599 ], [ 6.060558140134381, 43.150935909575622 ], [ 6.043347303606306, 43.149307043824749 ], [ 6.025594977556652, 43.154713085280449 ], [ 6.009298216176537, 43.160966095312183 ], [ 5.993384916775816, 43.16708846634107 ], [ 5.990711622156151, 43.173634460729104 ], [ 5.971873511530093, 43.196415328173316 ], [ 5.96292591246123, 43.198731698832383 ], [ 5.939589965468317, 43.215968062502476 ], [ 5.929259556402363, 43.230444132400251 ], [ 5.948055204382044, 43.239078270552071 ], [ 5.970235178153683, 43.239901134545121 ], [ 5.970233029935323, 43.246805534519915 ], [ 5.986548942993776, 43.253223950900463 ], [ 5.994947863472612, 43.26126431985211 ], [ 6.002737697048949, 43.257347552577919 ], [ 6.016815661967234, 43.256901153526954 ], [ 6.016113641678143, 43.250286947426034 ], [ 6.023774336111978, 43.246786895276173 ], [ 6.018136580292238, 43.231047228360602 ], [ 6.035300502750099, 43.220349256540075 ], [ 6.056245175329217, 43.215365282524175 ], [ 6.059692395395331, 43.205635187952687 ], [ 6.066734879741053, 43.201294785995685 ], [ 6.093602287356235, 43.198438935391636 ], [ 6.096263358769209, 43.188389064593764 ], [ 6.090394026041674, 43.175270594136371 ], [ 6.084204085483456, 43.16597803233963 ], [ 6.073786313868094, 43.159020099175599 ] ] ] ] } }
    ] 
    };

My map looks like this :

Leaflet map

And i have a dropdown list which contains disease names.

enter image description here

Basically when i click on item in list, my map should change aspect. For now, there are only strings in my dropdown list. How can i link my geojson files to them ?

3

You could for example use a global object for your layers and use the drodown-value to choose the right layer:

var dropdownlayers = {};

dropdownlayers["testlayer1"] = 
    {
    name: "Testlayer1",
    layer: L.geoJson(),
    url: "https://gist.githubusercontent.com/anonymous/6622d04d71ed2dd7927a/raw/0eb6c1145cbd60a050d8e46c2a7805504b901d7d/us_states.js"
}
;


function dropdown_onchange(choice) {
load_layer(dropdownlayers[choice.value]);

}


function load_layer(dropdownchoice) {
    clean_map();
    $.ajax({
        dataType: "json",
        url: dropdownchoice.url,
        success: function (data) {
            var layer = dropdownchoice.layer;
            layer.clearLayers();
            layer.addTo(map);
            $(data.features).each(function (key, data) {
                layer.addData(data);
            });

            layerControl.addOverlay(layer, dropdownchoice.name);
            map.fitBounds(layer.getBounds());
        }
    }).error(function () {});
}

http://jsfiddle.net/expedio/kf7zmuny/

1

See this pages:

  1. How do you load a GeoJSON file in Leaflet?

  2. How to load external geojson file into leaflet map

i hope can help you.

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.