Load geojson files from a dropdown list

Question

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 :

And i have a dropdown list which contains disease names.

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 ?

score 3 · Answer 1 · answered Sep 30 '15 at 20:45

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/

score 1 · Answer 2 · edited Apr 13 '17 at 12:34

1

See this pages:

i hope can help you.

edited Apr 13 '17 at 12:34

Community

1

answered Sep 30 '15 at 11:48

Samane

989
6
23

Load geojson files from a dropdown list

2 Answers2