HTML and CSS Reference
In-Depth Information
60.271663,573.62764 L 57.846745,573.62764 z M 81.44928,571.68771 L 82.904234,573.46598 L
83.874208,572.33436 L 83.065895,570.39442 L 81.44928,571.68771 z M 90.17899,559.2398 L
91.310623,565.0596 L 94.220522,565.86791 L 99.232017,562.958 L 103.59687,560.37142 L
101.98027,557.94651 L 102.46525,555.52159 L 100.36365,556.81488 L 97.453752,556.00657 L
99.070357,554.87495 L 101.01029,555.68325 L 104.89016,553.90497 L 105.37515,552.45003 L
102.95023,551.64172 L 103.75853,549.70178 L 101.01029,551.64172 L 96.322118,555.19827 L
91.472284,558.10817 L 90.17899,559.2398 z M 132.53423,539.35547 L 134.95915,537.90052 L
133.98918,536.12224 L 132.21091,537.09221 L 132.53423,539.35547 z" />
■
This data, as well as the data for all the other states, was downloaded from
http://en.wikipedia.org/wiki/File:Blank_US_Map.svg
. You can find a lot of similar material by going to
http://commons.wikimedia.org
and entering
svg map
in the search criteria.
Tip
Implementing the Initial Map
You'll start by creating the initial map without any styles applied. The actual path elements will be stored in an
SQL database. You will create the database, add a
State
table, and store the path definitions. You'll then create a
model using LINQ to SQL to provide the state data. Finally, you'll create a new view that will display the map and
then provide a link on the Index page to access it.
Creating the Database
The path elements can be quite long and are static (the shape of Alaska is not likely to change any time soon),
so they can be stored in a database and retrieved by .NET when needed to render the page. The MVC project
template that you used is already configured for a database connection. You'll need to create the
State
table and
populate it with the appropriate path definitions.
eXerCISe 9-4. CreatING the State taBLe
1.
The database used by .NET is not actually created until the first time is it accessed.
To manually create the database, In Visual Studio, select the Server Explorer
from the View menu. In the Data Connections node you should see one called
“DefaultConnection (Chapter
9
)”. Right-click this item and select the Modify
Connection link. This will display the Modify Connection dialog box shown in
Figure
9-5
.
