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
-
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 thepointN
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
ormarker=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 )
- Added Table of Contents.
-
Fixed bug with polylines that only allowed
point0
,point1
andpoint2
. Nowpoint0
-point9
will hopefully work as expected.
-
Version 3.1 (released 2019-02-08)
- Minor bug fixes.
-
Version 3.0 (released 2019-02-04)
-
Breaking changes, since the parameter
point
is no longer used (instead usepointN
, 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.
-
Breaking changes, since the parameter
-
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.
- Defining size of map.
- Clicking in map and get distance from origo.
- Different layers.
Contact
Feedback on the NNM Map Viewer is highly appreciated, so please, email any comments, questions, suggestions, errata, etc to