The code I used is available on my GitHub repo.
Here’s the result:
Perhaps the first thing you notice (after the map) are the blue markers. When you hover over them you get a popup indicating the City’s name and its population.
N.B. In order to see the markers you may need to alter the defaulting properties so that the dimensions are set correctly (ie. right-click on the caption and select ‘Properties’). After amendment, your properties should look like:
The next thing to note is the ListBox on the right. If I click on any combination of cities, only the markers for those cities show up on the map. You do not have to stretch your imagination to extend this concept to any dimension associated with the city, eg. region, currency, etc. Clicking on those other dimensions would filter the cities which, in turn, would filter the markers on the map.
It’s worthwhile pointing out that Leaflet provides a lot of functionality out of the box. You set the image’s centre and initial zoom level using the setView method:
var mymap = L.map('mapMap').setView([20, 10], 2);