Demonstration of a script to make maps with annotations

Overview

This is a demonstration of a script to make maps with annotations. With it, you can put pins and annotations on any map image by specifying the latitude and longitude for each pin. When you click a pin, the annotation is pinned and kept shown.

Annotation data is embedded in HTML as CSV, Markdown, or JSON data. Each record of annotation is composed of latitude, longitude, and contents to be shown. You can use any map image of Mercator projection. By specifying the latitude and the longitude of the top-left corner and the bottom-right corner respectively, the cordination of each pin can be calculated accordingly.

Read the source code of this page to understand details of how to use it. The following points are essential.

Loads the JavaScript file mapannotation.js.
Loads the CSS file mapannotation.css.
Embeds CSV/Markdown/JSON annotation data as an undisplayed element.
Puts a map image, whose onload atttibute calls the renderMapAnnotations function.
Specifies the longitudes and latitudes of the top-left corner and the bottom-right corner in the parent element.

As the above script is released as an open-source code under the MIT licnese, you can use it by copying the files. It's easy to modify presentation details by editing the CSS.

As The map images in this page are from OpenStreetMap, you can copy them without any permission. You can obtain map images of any regions by captureing screen images. To check the latitude and longitude of the corner points, right-clicking the same locations on Google Maps is easy.

Annotation data in CSV

You write annotation data as an undisplayed HTML element. The simplest format is CSV.

Annoation data in Markdown

Annotation data in JSON

Map of the whole Japan and all prefecture capitals

23 wards of Tokyo

Grid Images

Rendering images in grid structure is also supported. It is useful to show a lot of images which are organized by labels.

The Image list is embedded in HTML as CSV, Markdown, or JSON data. Each record is composed of a label, a list of images, and an optional comment. Images of a record are shown in the same cell.