Foundation – creating your basic map

In this section, we will walk through the basics of creating a standard map. The example can be viewed by opening the example-1.html file of this chapter provided with this book. If you already have the http-server running, you can point your browser to http://localhost:8080/chapter-4/example-1.html. On the screen is Mexico (Oscar's beloved country)!

Let's walk through the code to get a step-by-step explanation of how to create this map.

The width and height can be anything you want. Depending on where your map will be visualized (cellphones, tablets, or desktops), you might want to consider providing a different width and height:

var height = 600;
var width = 900;

The next variable defines a projection algorithm that allows you to go from a cartographic space (latitude and longitude) to a Cartesian space (x,y)—basically a mapping of latitude and longitude to coordinates. You can think of a projection as a way to map the three-dimensional globe to a flat...