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
). Will be overridden ifshowConcentricCircles
is used, i.e. you can only use eithershowCoordinates
orshowConcentricCircles
, not both. - concentricCircles
-
If you click in the map, concentric circles will be displayed with the current coordinates as origo. You define the maximum radius in kilometer for the outermost circle, for example (
concentricCircles=50km
), then all circles that have smaller radius than this will be displayed. The concentric circles have radius: 1 km, 2 km, 4 km, 8 km, 16 km, 32 km, 64 km, 128 km, 256 km, 512 km and 1024 km. Will overrideshowCoordinates
.
You click outside the outermost circle to remove the concentric circles. You may have to zoom out to see the outermost circle.
You can click inside the circles to get popup information about a specific circle. - 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)
- Four county corner (Dalarnas län, Gävleborgs län, Uppsala län and Västmanlands län)
- Four corners monument (Arizona, Colorado, New Mexico and Utah)
- Latitude zero and longitude zero
- Equator and zero meridian (with markers every 30°)
- Royal castle in Stockholm
- Njurunda church
- Mount Everest
- Åreskutan
- Concentric circles in New York area
- Concentric circles in Stockholm area
- Concentric circles in Helsingborg area
- 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 )
- Upgraded Leaflet JS from 1.9.2 to 1.9.4.
-
Version 3.6.0 (released 2022-11-13)
- Added functionality for displaying concentric circles.
-
Version 3.5.1 (released 2022-11-04)
- Upgraded Leaflet JS from 1.7.1 to 1.9.2.
-
Version 3.5.0 (released 2021-08-22)
- Added favicon .
- Using semantic versioning (SemVer) for the releases.
-
Version 3.4 (released 2021-01-16)
- Fixed bug when using latest version of Table of Contents.
- Upgraded Leaflet JS from 1.5.1 to 1.7.1.
-
Version 3.3 (released 2019-10-19)
- Made the height of the map relative in size to the viewport (90%), instead of being fixed sized.
- Upgraded Leaflet JS from 1.4.0 to 1.5.1.
-
Version 3.2 (released 2019-03-10)
- 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.
-
Getting correct current local time via a time API for the coordinates at origo and the marker points, eg a parameter
showLocalTimeForMarkers
.
Contact
Feedback on the NNM Map Viewer is highly appreciated, so please, email any comments, questions, suggestions, errata, etc to