Map Interaction with drop-down list of states via API

Try choosing a state from the drop-down list.

JavaScript code for creating a drop-down list and tracking events

The drop-down list options can be filled using JavaScript as follows

var html = [$('<option>', {val: 0, text: 'Select a state'})],
    dropdown = $('#regions-dropdown');

$.each(map_cfg.map_data, function(i, obj) {
    html.push($('<option>', {id:'st'+obj.id, val:'st'+obj.id, text: obj.name}))
});

dropdown.html(html);

Each option's id and value must be specified according to the state's code in settings.js. You can use any HTML layout to place these elements to a form on the page. Your map is now much more dynamic!

The relevant JavaScript for map interaction:

var selected_region = 0;

map.on('click', function(ev, sid, map) {
    var option = $('#' + sid);
    if (selected_region != 0) map.stateHighlightOff(selected_region);
    if(selected_region == sid) {
        dropdown.find('option').first().prop('selected', true);
        selected_region = 0;
    } else {
        option.prop('selected', true);
        map.stateHighlightOn(sid, '#3CB371', '#ffffff');
        selected_region = sid;
    }
});

dropdown.on('change', function(ev){
    if (selected_region != 0) map.stateHighlightOff(selected_region);
    var id = $(this).val();
    if (id == 0) return false;
    map.stateHighlightOn(id, '#3CB371', '#ffffff');
    selected_region = id;
});

In this example, we use jQuery to create two event handlers. The first function is for the map ("click" event), and the second is for the drop-down ("change" event).

Tracking clicks on the map

The first function statement handles a click to the map area. It locates the selected area via $('#idName'), and makes the corresponding option selected in the drop-down. It then handles highlighting via stateHighlightOn or stateHighlightOff.

If the click event is triggered upon the already selected state, the drop-down list resets it to its initial state.

Tracking changes in dropdown

In the second function statement (dropdown), JavaScript handles changing of the selected option of the drop-down list.

The dropdown variable was initialized in the JavaScript code before.

It then calls stateHighlightOn and passes in a reference to the area relevant to the state that was selected. It also unselects the previously selected state via stateHighlightOff.

The global variable selected_region stores the currently selected state and is assigned with the id of the selected state in both handlers. The events then change the color of the corresponding area on the map, to add or remove highlighting. If highlighting is being turned on, optional parameters for the highlight color and border color can be passed.

In this example we use the demo version of the HTML5 US map.