HTML and CSS Reference
<svg xmlns:svg=" http://www.w3.org/2000/svg " version="1.2"
width="959" height="593" id="map">
@foreach (State s in Model)
<path id="@s.StateCode.Trim()" class="@s.StateName.Trim()" d="@s.Path" />
Now you'll need to implement a controller action that will display the map view.
open the HomeController.cs class and add the following namespace.
using Chapter 9 .Models;
Then add the following method to the HomeController class. This executes a lINQ
query to extract all the records from the State table and provide it to the view.
public ActionResult Map()
StateDataContext DC = new StateDataContext();
var states = from s in DC.States select s;
Now you'll add a link on the Index.cshtml page that will display the map page.
Go to the Index.cshtml file and add the following line at the beginning of the body
element (just before the svg element):
@Html.ActionLink("Go to map", "Map", "Home")
Press F5 to build and run the application. The index page will be displayed. Click the
“Go to map” link. You should see a map of the United States and all of the states are
filled with the default color (black).
Styling the State Elements
Now that all the mechanical work is done you can have some fun styling the path elements. As I demonstrated
earlier with the snowman image, each element can be styled using a special style sheet. You can also style them
format each element.
Using Basic Fill Colors
You'll start by adding some simple fill rules. Using a simple element selector you'll set the stroke color to black
and khaki for the fill color. Then, to add some variety and to demonstrate using attribute selectors, you'll
change the fill color based on the state code. The id attribute contains the two-letter state code and the class
attribute contains the state name. Using the first letter of the id attribute you'll set the fill color as follows: