Introduction

Including interactive maps in Humanities projects has become quite common, making the discovery and storage of spatial data an integral part of a project's workflow. As most of our Geo-Humanities projects store spatial data in TEI XML, Vertexer has been created to generate data formatted for easy insertion in to an external XML document.

Behind the scenes, Vertexer uses Google Maps functionality to provide the map, drawing, and searching features. Vertexer simply extracts and formats the data that the map produces, generating TEI-compliant geo-coordinates for user-drawn points, polygons, and polylines. Coordinates can then be copied and pasted directly in to a TEI geo element.

Application overview

Layout

The application is laid out with drawing tools in the top-right corner (highlighted in red), search and zoom functionality in the top-left (highlighted in green), and user input/output along the bottom (highlighted in blue).

Drawing and searching tools

The drawing tools panel provides three shape options: simple marker; polygon; and polyline. Moving around the map is done by using the hand cursor.

The search panel should be familiar to Google Maps users. Type in any location known to Google Maps and a short list of results display below the search box. Results are weighted toward the current focus of the map. For example, if the user is focused on Europe and runs a search for Athens, hits will be weighted to European locations, whereas if the focus of the map was North America, hits will be weighted to North American locations.

Users may prefer to control zoom level with the scroll wheel of their mouse, double-clicking the map, or clicking the zoom-in/zoom-out buttons to the left of the search bar.

Data input/output

The 'new feature' section of the page allows users to add previously-created features to the map for editing. This is useful when an initial effort to create a complex shape is incomplete or inaccurate. Users can paste the previously-created vertices in to the text area and click the button to add the feature to the map. The Vertexer will figure out what type of shape has been entered based on how many vertices have been entered and whether the first and last set of vertices are the same.

The 'selected feature' section of the page is the main point of the application and is where the ready-to-go vertices appear when a feature has been selected. Displayed vertices are automatically updated when a selected feature is changed.

The 'information' section of the page provides useful and interesting information about the map and the currently selected feature. The bookmark link allows users to bookmark the map's current zoom level, centre, and map type. The address stored will look something like this: https://hcmc.uvic.ca/people/greg/maps/vertexer/index.html?la=48.463&lo=-123.312&z=16&t=roadmap.

While the bookmarking is the main feature in this section, the other features contain interesting information as well. The current centre of the map and zoom level provide at-a-glance information that will be stored in a bookmark. The current cursor location, (displayed in latitude, longitude format) will prove useful when attempting to find general regions at low zoom levels. Length of a line, area of a feature and a feature's centre may be of peripheral interest.

Hacking the bookmark: the bookmark is just a link that contains the latitude (the 'la=48.463' part of the URL), longitude (the 'lo=-123.312' part of the URL), the zoom level (the 'z=16' part of the URL), and the map type (the 't=roadmap' part of the URL).

Tutorial

Define a point

To place a marker on the map, select the marker tool and click on the map. A green marker appears, with the bottom point over the spot clicked. The coordinates of this location display in the 'selected feature' portion of the page, pre-selected and ready to copy/paste in to your document. The marker is draggable if it is discovered to be in the wrong place.

A marker can also be added by using the search function. Try searching for 'Athens' and clicking on one of the results. Notice that a green marker appears and the map automatically zooms to level 5. Again, the coordinates will display in the 'selected feature' section of the page.

Note that, when a marker is dragged to a new location, the displayed vertices are updated automatically.

Define an area

To place a polygon on the map, select the polygon tool and click on the map. This creates the starting point of your polygon. Continue to click on different spots on the map to complete the polygon, returning to (and click on) the polygon's starting point to finalize the shape. Note that a shape's line does not begin to be drawn until a click is released. As with the marker, the vertices (coordinate set) representing the polygon will be displayed in the 'selected shape' box, pre-selected and ready to be copied/pasted in to another document.

Polygons can be edited after creation. The method is shape-independent and is described below.

Define a line or path

To place a polyline on the map, select the polyline tool and click on the map. This creates the starting point of a polyline. Continue to click on different spots on the map to add segments to the polyline. To complete a polyline, double-click where it should end. Again, note that a shape's line does not begin to be drawn until a click is released. Vertices (coordinate set) representing the polyline will be displayed in the 'selected feature' box, pre-selected and ready to be copied/pasted in to another document.

Polylines, like polygons, can be edited after creation. The method is shape-independent and is described below.

Add pre-defined shapes

On occasion, existing coordinates are discovered to be inaccurate. For simple markers it's a trivial task to create new coordinates, but for more complex shapes and lines, re-creating from scratch can be time-consuming. The Vertexer provides a feature to add a feature to the map using the vertices from the pre-existing shape. Once the feature is on the map the user is able to adjust it until the shape is correct. The new vertices are automatically updated in the 'selected feature' region of the page, and can be copied and pasted back in to the user's document.

Although illegal characters will be automatically removed from the input, it is important to remember that vertices pasted in to the 'new feature' box still need to be formatted correctly. To recap, this means that coordinate pairs are comma-separated, with no intervening space (e.g. 48.464755,-123.309667), and each set of coordinates are separated from the next by a space. As an example, a properly formatted set of vertices which describe the walk to HCMC from the closest parking lot looks like this: 48.461753,-123.307661 48.462023,-123.308251 48.462108,-123.30839 48.462578,-123.308412 48.46255,-123.308959 48.46304,-123.309689 48.46304,-123.309978 48.463923,-123.310751

The following image shows the map after adding the vertices above for a polyline. To re-create this, just copy these vertices and paste them in to the 'new feature' box, then clicking the add new feature button. Remember to click the zoom button to bring the polyline in to view.

Manipulating shapes

Editing a shape that is already on the map is as simple as grabbing a point and dragging it to the desired spot on the map. A point is represented by an opaque, white circle at segment joints. Notice that each segment is split with a semi-transparent, white circle. This does not become a point in a shape until it has been dragged to a new location. At that point, the 'selected feature' vertices are automatically updated to include the new point.

The following image shows a polygon during an edit. Notice that the current border remains visible and opaque during the edit and provides a semi-transparent border line with the active segment node (the opaque, white circle) to represent the live edit. When the segment node is released, the shape is change.

Note that after dragging a segment node to a new location an 'undo' option appears beside the new node position. Clicking undo will move the segment node to its previous position.

When editing complex shapes it may be necessary to simplify the shape by collapsing two segments in to one. To accomplish this, right-click on any node in a polygon or polyline to display a node deletion button. Note that, when a node is deleted in this manner, there is no undo option.

Multiple feature

There are no restrictions on the number of features that can be displayed on a single map. Each feature is selectable and editable on its own. No special action needs to be taken. As previously noted, the vertices displayed in the 'selected feature' area reflect the currently selected feature and will change when a new feature is selected.

Mapping terminology

Coordinates/vertices

Any given location on earth can be represented by a set of coordinates in (alpha)numeric form. Specific points are represented by a pair of coordinates, while more sophisticated features are represented by many coordinate pairs making up lines and polygons. These representations generally use latitude (lat) and longitude (lon) coordinates to accomplish this.

In many modern cases, especially online maps, the coordinate system uses exclusively numerical data to represent features on a map: for example, the centre point of the University of Victoria's Ring Road is located at 48.463° latitude and -123.312° longitude. The TEI-compliant representation of this coordinate pair is 48.463,-123.312. When rendered on a map, this type of feature is usually indicated with some kind of simple marker. Note that online maps frequently use single coordinate pairs to represent general positions such as the centre of the UVic campus.

More complex shapes can be described using coordinates. Polygons can be represented by sequentially chaining coordinate pairs: for example, the rough footprint of the Clearihue building on the UVic campus can be rendered thusly: 48.46388,-123.311035 48.463887,-123.310579 48.463915,-123.310118 48.463887,-123.309774 48.46394,-123.309603 48.4641,-123.309635 48.464157,-123.309801 48.464645,-123.309898 48.464659,-123.309721 48.464798,-123.309748 48.464762,-123.310214 48.464684,-123.310204 48.464613,-123.311169 48.46388,-123.311035. This is just a long list of space-separated coordinates (which are themselves comma-separated). As we use single coordinate sets to indicate approximate locations, we use polygons to provide a more accurate representation of a specific area on earth. Polylines (also called polygonal chains) are, simply put, connected line segments. In online mapping systems, the fundamental difference between polygons and polylines is that polygons re-use their initial coordinates to close the shape, whereas polylines do not because the 'shape' does not close.

Features

In the context of this application the term feature refers to a shape combined with geo-coordinates - a spatial indicator. We use shapes (like polygons or lines) and geo-cordinates to represent locations on a geographical reference system like an online map, and at that point it becomes a feature. Ultimately, though, the distinction between a shape and a feature is fine one, and the two terms are frequently used interchangably.

Features in Vertexer have two states: selected and unselected. Selected polygons and markers have segment markers and a green background, while unselected polygons and markers have a red background and no segment markers. Polylines do not change colour, and are considered selected when segment markers are visible. Vertices for selected features are displayed in the 'selected feature' area of the application. Notice that the coordinates are pre-selected - there is no need to re-select them before copying. The buttons to the right of this panel allow users to delete selected features from the map and zoom in to a feature.