Map Annotation
This describes a forthcoming feature, expected to be released in February 2013. It is not generally available yet.
Introduction
This page provides information about interactive annotation of the University Map. If you are interested in scripting or programming overlays from other data sets, see the UCamGeoJSON API.
Note: if all you want to do is create a link to show your department etc on the map, you don't need to create any annotation. Just use the link shown in your browser address bar when you are looking at the full results for the institution. For example: http://map.cam.ac.uk/Department+of+Geography . This also means if you move, the link will show up-to-date information without any changes.
Also if you only want a single pin on the map, you can do this directly from the map: click where you want it and choose the pin icon. Then copy the URL from the browser address bar.
This page deals with more substantial annotations.
Why?
It is useful to be able to customize the University Map. This might be for
- something ephemeral, like emailing directions or highlighting a meeting place to someone;
- something semi-permanent such as locations of a series of events around the University (for example, consider the Cambridge Shakespeare Festival, or Science Week);
- something permanent, such as more detail or special interest information (for example, consider disability information, college staircase locations, college meeting rooms, or the Granta Backbone Network).
Where?
This is achieved by referencing in the map URL a set of annotations stored at a another URL somewhere on the internet. This could be
- temporary storage provided by the map server itself,
- your personal University web pages,
- a departmental website,
- a shared Dropbox file (or other cloud service)
- anywhere, really, subject to certain security limitations
This URL is given in the fragment part of the map URL, that is, the bit after a hash sign '#', like this
http://map.cam.ac.uk/#http://some.annotations.com/annotation1.json
How?
The link provides a set of data in UCamGeoJSON format. This can be generated programatically where you have a geographically-minded data set to display, but for more casual use interactive Map Annotation, in effect to draw on top of the map and then save your annotations for other people to refer to.
Getting started
Annotate Map on the More link of the main map takes you to the map annotation page. This provides a web app where you can draw onto the map and then save the drawing for other people to see, by providing a link on a web page or sending them a link by email, and so on.
A set of annotations comprises one or more features, which are independent from each other, and layered so that if they overlap one will draw on top of another. You can draw three different kinds of feature: points (to which images and text can be attached), lines and areas.
Points represent real geographical locations, so as you zoom out they get close together visually. However, images and text applied to a point are fixed size: they do not scale up and down as the map is scaled, so they may overlap at larger scales.
Adding points, lines and areas
If you make a mistake at any time, you can use the Undo button (or the CTRL+Z key) to reverse your change. Redo on the Data reverse Undo.
Click on the map to make a point. This is shown with a small red mark called a handle. Red indicates that it is selected, that is, identifying a point and feature to which changes will be made. The others are green. Select a handle by clicking on it. Clicking on the already selected handle will deselect it. SHIFT+Click (that is, click while holding down the Shift key) selects additional handles.
Having made a point, you can now either can add a second point to start drawing a line, or apply text and/or an image to the single point.
To help you see where a line will go, a putative 'rubber band' line is connected from the selected point. This will go away if you add an image or text, but if it bothers you, press the ESC key to explicitly turn off line formation.
Once a single point is selected (which it will be immediately after you have made one), the left hand side panel changes to offer a form where you can add images, text, colour, borders etc. to the point. Details below.
If instead you make a line, the panel changes to offer properties for the line, such as width and colour. Click again to add further points to the line. You can extend an existing line from either end by clicking the relevant handle.
Once you have at least three vertices, you can form a closed area by clicking on the first handle. If you cancel the rubber-band line with ESC, clicking the first handle will just select it, and therefore offer to extend it from the other end.
Changing existing features
Move a point by dragging its handle. You can either re-position a decorated single point, or change the shape of a line or area by moving one of its vertices.
You can also move the whole of a line or area by dragging starting anywhere within in its bounding rectangle.
The menus provide means to change existing features. Naturally, the Features menu offers things you can do to features as a whole, and the Points menu things you can do to points.
Features
- Delete Feature deletes the complete feature containing a selected point.
- Bring To Front and Send To Back change the order of the feature containing a selected point in the layers, affecting how they appear when they overlap (and also which feature you would be able to drag around to move it: if features overlap, the one on top will be the one that is moved).
- Duplicate Feature to make a copy of the feature containing a selected point, slightly offset from the original
- To start over with no features, use Clear All on the Data menu. (If you accidentally delete everything with this, you can Undo it).
- Select All selects the first handle of all features.
- Select None deselects all selected handles.
Points
These apply only to points in areas and lines.
- Insert Point adds a new point half way along the line segment of a line or edge of an area which precedes the selected point. Once you have inserted a point, you can move it to where you want it by dragging in the usual way.
- You may well have forgotten which way round the points go. Notice the point before the selected point is a lighter shade of green. The new point goes between the selected point and the lighter green point.
- Remove Point removes the selected point. You can only remove a point from an area with more than three points or a line with more than two.
- Make Horizontal and Make Vertical align the selected point with the previous (lighter green) point horizontally or vertically respectively.
Saving and Loading
Save Features
When you have completed your annotation, you'll want to do something with it. Use Save Features on the Data menu to do this.
There are two ways you can save your data:
- Store it on our server. Just press the button and we'll save the data and give you a URL you can send on. Quick and easy, but this is for casual use only. They are limited size (though almost anything you would have the patience to produce interactively will be quite small), are not guaranteed to be backed up, and will be deleted after three months.
- Take your own copy and place it on your own server. You can either save to a file or copy the data (it is just a text file) and paste it where needed.
If you are making a link to the annotated map to go on a web page, then you would store the file as you would an image in your web site and reference it as above in the map URL.
You could also store it in Dropbox or another cloud service and share the file, so that it can be referenced without logging in. Or you could put it on your public personal University web pages to which most staff and students have access.
Load Features
Load Features on the Data menu does the opposite of Save. You can load annotations from a URL or by pasting the contents of a file, and then amend them. While you can replace files you have stored yourself, it isn't currently possible to replace annotation stored on the map server, only to save the new version with a different URL.
Changing Appearance
Put appropriate numbers in the boxes and use the menus etc in the left hand panel to change the appearance of the feature you have selected.
Click the subheadings in each section to set properties in that group.
Most sizes are measured in pixels (dots on the screen). There is a pixel scale for reference at the bottom of the left hand panel.
Heading
With nothing selected (deselect any selected point by clicking on it) you can set a heading for the whole page. The recipients of your annotations will see this in the same style as the headline in the left hand panel as shown while annotating.
Point style
The image and text that can be shown at a point are surrounded by a box. That box can have a coloured background and/or border. The relationship of the text and image position and size of the box can be adjusted, and the box can be positioned relative to the point (so that a particular place in the icon - an arrow head for example - can lie on the point).
Image/Icon
You can choose from some ready-made symbols (including arrows at 5 degree intervals), or use an image somewhere else on the internet, including one you put there yourself, so long as it has a URL. The image will usually be in a JPG or PNG file. PNG is preferable for icons and symbols as they can have transparent backgrounds - for example a pointing hand symbol. JPG is better for general pictures - for example, a photograph of you marking the location of your office.
Many browsers let you pick up the URL of an image by right clicking and then 'Save Image URL' or similar. Beware of using third-party images, both for copyright reasons and longevity you may have no control over.
You can adjust the image to be smaller than the original. Set just one of width and height to maintain aspect ratio. This is independent of the width of the enclosing box, except that if you don't set the box size explicitly, or add text, it will be the same size as the image.
You will often want to centre or otherwise adjust the position of the image relative to the point, in Layout.
Text
Type some text to be displayed. Unless you have chosen a ready-made image as well, or manually adjusted the offset, the box containing the text will extend to the right and down from the point. You may want to restrict the width, but not the height, of longer text.
You can also adjust the font, size, colour, style, underlining and various spacings from this panel.
Layout
These settings control how the box, image and text are positioned in relation to each other.
The offset of the top-left corner of the box will often be negative to move the box up and to the left.
Link & Hover Text
You can add a link to the box so that your recipients can be taken to a particular web page when they click on your annotation. Enter the URL of your target page here. Note that the links aren't actually active while drawing annotation because it is too easy to accidentally click on one and move away from annotating the map.
Also, you can provide text which appears when the mouse hovers over the annotation. On most tablets, this requires a tap to see, and if there is also a link, following the link then requires a second tap.
Background
Choose the colour of the background of the box here, and whether it is partially transparent.
Padding is an extra coloured margin around the box. Even if the box is transparent, the border still takes this into account, and so the location of the top-left corner of the box is positioned relative to the point.
Without any padding, text or border, an opaque image will occupy the whole box so you won't see the background colour.
Border
You can give a width, colour and radius for rounded corners here. A subtle 1 pixel dark border with rounded corners is often helpful to delineate the annotation against the map background.
Line style
Colour and width
Set the colour and width of your line here - if you don't change it, it will be a thin (1 pixel wide) solid line.
Note that lines are drawn with rounded ends and corners. This is more noticeable with thicker lines.
Details
Your line can be partially transparent. You can also use dashes.
Area style
Fill
Set just the colour and transparency of the filled area here.
Outline
Set the width and colour of the outline around the area here, and how transparent it should be. You can also have dashed outlines.
Note that the outline is drawn centred on the line around the area. As well as intruding into the area, partially transparent thick outlines are transparent with respect to the area as well as the map.
