Add Search to your Interactive Map | Documentation
Interactive maps look great and make it easy for your visitors to navigate to their region of choice with a simple click. Unfortunately, not everyone visiting your site will have a strong grasp of geography. Therefore, you might consider supplementing your map with a searchable drop down menu like this one:
This tutorial will show you how to easily add your own searchable dropdown menu using the jQuery plugin Chosen and a little bit of JavaScript. Follow these steps:
Choose the map you want to install:
Follow the standard installation instructions. This requires embedding the worldmap.js file and mapdata.js files and adding a div with the id "map" to your webpage:
Add HTML for a blank dropdown with the id state_list above your map:
<select data-placeholder="Choose a Country..." id="state_list" style="width:350px;" tabindex="1">
<option value=""></option>
</select>
Add the following custom JavaScript/jQuery to your page (in the downloadable example, this can be found in the search.js file):
$(document).ready(function(){
var state_list=$("#state_list")
for (var state in simplemaps_worldmap_mapdata.state_specific){
var key=state;
var value=simplemaps_worldmap_mapdata.state_specific[state].name;
state_list.append($("<option></option>").attr("value",key).text(value));
}
state_list.chosen();
state_list.change(function(){
var id=$(this).val();
simplemaps_worldmap.state_zoom(id);
});
})
simplemaps_worldmap.hooks.back=function(){
$("#state_list").val(''); //When you zoom out, reset the select
$("#state_list").trigger("chosen:updated"); //update chosen
}
In plain English, the above:
Iterates over your mapdata.js file to add every state to your dropdown
Tells Chosen to do it's magic on the dropdown with the id state_list
Listens for a state to be selected and uses the JavaScript API to zoom in on that state
Resets the dropdown to "Choose a Country" after the back button has been clicked (using JavaScript hooks)
Since this is a complicated example, you should download the demo and view the source files:
