CUSTOMIZING THE MAP

CUSTOMIZING SVGMAPPER

Creating New Templates

SVG Mapper comes with a template_en.htm file (English template). It does require that there be an htm file with "template" in its name but you can create and use many different templates if you want. You are able to customize only what is in the map.htm file that is created. Content in the .svg files (legend, view, info and overview) is created by Avenue scripting in ArcView and is customizable only by deconstructing the extension and modifying the scripts in it. And I do not know how to do that.

Adding content to the lower left hand corner box.

This is the first table data <td> element in the next to the last table row <tr> element. In the template file it is completely empty

From Frontpage you can add text or an image. If you add an image make sure you include an alt tag for the image. This is a good location to put logos.

Altering the pop-up HTML record

Changing the field names - Often the field names look a little awkward, contain things like _ underscores, etc.. and you would like to make the box look a little better. For example, the field is called State_name in the attribute table but you would like it to read Name. The best way to do this is to define an alias in Arcview (Table/Properties) before creating the SVG website. If you do not do that, you can change it by opening the i_00.xml file in Word Pad. This is the file that contains all the data. Use the Find/Replace function to locate and change any field name you would like to alter.

You also need to replace information in the i_00.xsl style sheet.

Removing a field from display -This you must do in ArcView before you create the SVG site by making the field invisible from the Table/Properties dialog box.

Changing the colors - These two lines in style.css need to have their colors changed

.color1 { font-family:Arial,Helvetica,sans-serif;font-size:14px;background-color:#CAFFFF } /* Color 1 for tables */

.color2 { font-family:Arial,Helvetica,sans-serif;font-size:14px;background-color:#FFFFCE }

Changing the text size

The default size is 14; just change that number in these two lines. Here is where you could mess with the font as well.

.color1 { font-family:Arial,Helvetica,sans-serif;font-size:14px;background-color:#FAF0E6 } /* Color 1 for tables */

.color2 { font-family:Arial,Helvetica,sans-serif;font-size:14px;background-color:#F0FFF0 } /* Color 2 for tables */

Left-Justifying Text in the Box - The text by default is centered to left justify it ALIGN = left is an OK argument for a <th> and <td> tag but when I stick them in, they don't seem to do anything; the text keeps coming out in the center.

Changing the Title in the title bar of the pop-up

In data.js

attwin.document.writeln('<HTML><HEAD><TITLE>Attributes of Mexican States</TITLE></HEAD><BODY><TABLE border="1">');

In the <TITLE> tag replace the text

Removing the Shape and Area Fields

I have found no other way to do this other than going through the 1_00.xml file and taking them out of each <DATA> tag, one for each feature in the data layer. With a lot of features this could be tedious.

The Overview Box

Background color of Overview Box - Change the fill: portion of the line below. It takes this value from the background color in the Arcview view so normally the background of the main map view and overview are the same. You can change the background fill color of the main view the same way. The line below makes the fill color of the

Changing the Outline Color in the Overview Box - In the style.css file this is the style line that defines how the box showing the area you are zoomed in to on the entire map and sometimes it doesn't show well. Replacing "orange" with "black" creates a nice contrast against strong colors on the overview map.

.overview { fill:black;stroke:orange;stroke-width:5cm;opacity:0.3 } /* OverView rectangle */

Info Box (Info.svg)

Removing the field name from the map tip value - in this box the value of the map tip field for the data layer pops up as you move the cursor across the map. By design the field name precedes the value, e.g. "State_name Kansas' If you want to remove the first part, edit data.js. In the example below the field 'Name' will precede the map tip as it pops up in the lower right hand corner box. The second example removes that

var mapField = new Array;
mapField[0] = 'Name';
var value = mapField[index]+' ' +maptip;
textid.setData(value);

var mapField = new Array;
mapField[0] = 'Name';
var value = maptip;
textid.setData(value);

Editing Text Content of Info Box

../data/info.svg - edit with a text editor.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="200" height="150" zoomAndPan="disable">
<rect style="fill:seashell;stroke:black;stroke-width:1" x="0" y="0" width="100%" height="100%"/>
<a><polygon id="down" onclick="navclick('down')" points="184.94,28.3154 175.44,45.1029 165.94,28.1029 175.44,33.2029" style="stroke-miterlimit:4;stroke-linejoin:miter;stroke-width:1;stroke-opacity:1;stroke:rgb(0,0,0);fill-opacity:1;fill:lightblue;opacity:1"/></a>
<a><polygon id="up" onclick="navclick('up')" points="184.94,20.2393 175.44,3.45131 165.94,20.4513 175.44,15.3513" style="stroke-miterlimit:4;stroke-linejoin:miter;stroke-width:1;stroke-opacity:1;stroke:rgb(0,0,0);fill-opacity:1;fill:lightblue;opacity:1"/></a>
<g style="font-size:12">
<text id="idObj" x="10" y="20"> </text>
<text x="10" y="40">X: </text>
<text x="10" y="60">Y: </text>
<text id="coordx" x="22" y="40"> </text>
<text id="coordy" x="22" y="60"> </text>
</g>
<g style="font-size:10">
<text x="10" y="80">Projection: </text>
<text x="10" y="95">Units: UNKNOWN</text>
<text x="10" y="110">Original scale 1: 0</text>
<text x="10" y="125">Author: Here is where your name goes</text>
<text x="10" y="140">You could change this to the date the map was made </text>
</g>
</svg>

Changing the Greek symbols in the coordinate area

The template lines in the info.svg file are:

<text x="10" y="40">λ: </text>
<text x="10" y="60">φ: </text>
The Greek symbols are between the text tags and you can replace them with other text, e.g.

<text x="10" y="40">X coord: : </text>
<text x="10" y="60">Y coord:: </text>

Make sure you also change the x = locations in the next two lines because your change will take up more room than the replaced Greek symbols. Notice that the coordinates are in some kind of coordinate system but

Changing the Legend

Removing the field counts after the unique names in the legend - In addition to creating a legend, the SVG Mapper extension adds the number of records in that legend category. So, for example, if your map was counties of the US and you had colored them by the state name so each state's counties were a different color than adjoining states, the number of counties in the state would be appended to the state's name in the legend. To remove them, they come out of this location in the legend.svg file:

<text style="font-size:13" x="60.00" y="80">Aguascalientes - 1</text>

Removing the -1 takes that out

<text style="font-size:13" x="60.00" y="80">Aguascalientes</text>

Of course, if they are all unique things you can do a search and replace on all but if they have different values you will have to remove them individually.

Changing the name of the data layer - the extension will export whatever you called it in your ArcView project but if you forgot to change it there you can edit it in the legend.svg file.

<text style="font-size:16" x="10" y="15">View1 Legend</text>
<a><text onclick="info('i_00')" style="fill:blue;font-size:14" x="30" y="60">States.shp</text></a>

edited to become

<text style="font-size:16" x="10" y="15"> Legend</text>
<a><text onclick="info('i_00')" style="fill:blue;font-size:14" x="30" y="60">States of Mexico</text></a>

Removing the check button at the top of the legend - This button does an odd thing - it makes the map disappear and nothing appears in the map's location.

It is the line above with class = "button" that calls the function onoff that does it. Just remove that line.

Changing the color of the legend title

<a><text onclick="info('i_00')" style="fill:blue;font-size:14" x="30" y="60">States.shp</text></a>

Change the fill color in the style= statement of this line.

Creating a Custom Help File

The help file is called help.htm and is in the data directory. Edit with an html editor to add whatever content you wish.

Altering Content in middle bottom table element

<td valign="middle" rowspan="2">
Created with <a href="http://www.SVGMapper.com" target=_blank>SVGMapper
2</a>
The map has SVG
images embedded. You need <a href="http://www.adobe.com/svg/viewer/install/main.html" target=_blank>Adobe
SVG Viewer</a> to use SVG map.
Designed for screen
size 1024 x 768 or larger.
</td>
Remove or change content of this table element, e.g. adding a comment to restart the browser after installing the software (which you have to do).

<td valign="middle" rowspan="2">
Created with <a href="http://www.SVGMapper.com" target=_blank>SVGMapper
2</a>
The map has SVG
images embedded. You need <a href="http://www.adobe.com/svg/viewer/install/main.html" target=_blank>Adobe
SVG Viewer</a> to use SVG map. After installing viewer software you must restart your browser.
Designed for screen
size 1024 x 768 or larger.
</td>