Find all products for your country

Map Interaction with drop-down list of states

A map can be made more interactive with a drop-down list of states. The states to highlight are associated with their corresponding links via the link ids. When a user selects a state in the drop-down, the corresponding area on the map can be highlighted.

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).

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.

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.


Privacy policy   |   Terms of Use

Home  |  Products  |  Showcase Gallery  |  Custom Design Service  |  Free Maps  |  Support  |  Contact
© 2006-2018 All Rights Reserved.
Fla-shop.com - Interactive Maps for Websites
Follow us Follow us on Twitter Follow us on Facebook