Thematic Map of Africa

Click on a country to see information on that country. Click on of the radio buttons to change the legend and feature symbology.

This example shows how to use mulitple layers with the same data to achieve different effects and how to add HTML and Canvas elements to interact with the map. First, a continents layer is added to provide the shadow between the ocean and the conteintents. Then, a country layer is added to provide the filled colors. Another country layer is added to symbolize the selected country. The Scale Bar has to be rendered within the CanvasMap to make sure that the scale exactly matches the distances it represents in the map so the scene is called to add it as a Map Element to the default view. The ScaleBar will set itself up as a DIV within the view at the position defined in it's specified style. The other elements are added as DIV elements to the CANVAS_CONTAINER element. The element with the attribute headings is given two radio buttons, "Popuplation" and "GDP". A function, UpdateLegend(), is setup to change the Legend element's contents when a radio button is clicked. Finally, the country layer's MouseMove() function is overriden to update the coordinate element and the MouseDown() function is overriden to update the information element and change the style for the selected country.

Humboldt State University

Created by Jim Graham
The data for this example is from Natural Earth

Contact

james.graham@humboldt.edu