Documentation

Simple map functionality with capabilities of showing markers and lines.

Basics

The map is created from parameters defined in the URL. The simplest map only needs parameters for latitude and longitude coordinates defining the origo and a zoom level, everything else is optional.

Valid parameter values

• Latitude and longitude values are measured in degrees.
• Latitude values can be in the interval -90 to 90.
• Longitude values can be in the interval -180 to 180.
• Zoom level values can be in the interval 0 to 18.
• Values must be properly URL encoded. At the moment title is probably the only parameter that may need an encoded value (since all the other values are numbers or booleans).

Mandatory parameters

origo

The map is initially centered at coordinates defined by the origo parameter.
Example: origo=69.00,19.00.

zoom

The map has an initial zoom level.
Example: zoom=12.

Optional parameters

title

A title can be defined.
Example: title=My%20own%20special%20title.

point0, point1, ..., point9 (line instead of point?????)

pointN is an array of coordinates for which a polyline should be drawn between each consecutive point (order is therefore important). A polyline can be shown between (at least two) coordinates defined with the pointN parameter. Each point is defined by latitude and longitude coordinates.
Example: point0=69.059969,10.9575&point0=55.336944,10.9575.
You can draw up to ten distinct polylines. Use a different suffix number, 0-9, for each of them.
Example: point0=6,1&point0=6,2&point0=7,1&point1=8,5&point1=7,7&point1=8,9&point1=7,3 will draw two distinct polylines.

marker

marker is an array of coordinates where a marker should be placed. Markers can be shown for (one of several) defined points.
Example: marker=6.90,7.23 or marker=6.90,7.23&marker=69.2203,17.1234.

showMarkerForOrigo

A marker can be shown for origo (showMarkerForOrigo=true).

showCoordinates

If you click in the map, the current coordinates will popup (showCoordinates=true).

showCircle

Show the smallest possible circle, centered at origo, that "surrounds" every marker defined (showCircle=true).

showRectangle

Show the smallest possible rectangle that "surrounds" every marker defined (showRectangle=true).

usePolygon

Uses polygons instead of polylines when connecting points (usePolygon=true). This means that the last and first points in every list of points are connected with an implicit line.

Additional functionality

A link to a similar view in Google Maps is also shown.

Examples

• NNM logo all over the world
• The four outermost points in Sweden and the centre (defining both markers and polygon by hand)
• The four outermost points in Sweden and the centre (defining only markers and let the program calculate the rest)
• The Märket island, with its fascinating country (and time zone) border
• Various points in Stockholm (showing much of the NNM Map Viewer functionality)
• Three-country cairn (Sweden, Norway and Finland)
• Latitude zero and longitude zero
• Equator and zero meridian (with markers every 30°)
• Royal castle in Stockholm
• Njurunda church
• Mount Everest
• Åreskutan
• An interesting part of the 69th latitude
• An interesting part of the 27th longitude
• An interesting part of the 80th longitude

An example of a complete URL:

Create URL automagically

Here is a small form to help you create correct URLs for the NNM Map Viewer.

URL encoder

Here is a simple tool which you can use to URL encode your parameter values.

Convert DMS coordinates to decimal

Here is a simple tool which you can use to convert coordinates in DMS (degrees, minutes, seconds) to decimal. For example 69°15'20" (DMS) is the same as 69.255556 (decimal).

History

NNM Map Viewer was originally implemented by Anders Gustafson in November 2018.

• Current version, (released )
  • Breaking changes, since the parameter point is no longer used (instead use pointN, where N can be 0-9).
  • Breaking changes, since drawing polyline instead of polygon, unless explicitly asked for (via parameter usePolygon).
  • Possible to define multiple distinct polylines.
  • A DMS to decimal converter.
• Version 2.2 (released 2019-01-19)
  • Major refactorings.
  • Using classes and a more object-oriented approach.
• Version 2.1 (released 2019-01-05)
  • A form to help building correct URLs. Added scale. Bug fixes.
• Version, 2.0 (released 2018-11-22)
  • Breaking changes, since the URL parameters look differently than in version 1.0.
• Version 1.0 (released 2018-11-18)
  • Implemented with JavaScript, HTML, CSS, Leaflet JS and OpenStreetMap.

What's in the upcoming versions?

Some of the following may be done in a future version of NNM Map Viewer.

• Cleaning up and refactoring the code (JavaScript, HTML, CSS).
• Using JavaScript classes, arrow functions, functional style (map, filter, foreach, etc).
• Enhance user interface.
• Perhaps defining size of map.
• Clicking in map and get distance from origo.