NNM Map Viewer
Documentation
Simple map functionality with capabilities of showing markers and lines.
Basics
The map is created from parameters defined in the URL.
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.
Optional parameters
- title
-
A title can be defined. Example:
title=My%20own%20special%20title
.
- point
-
point
is an array of coordinates for which a polygon should be drawn between each consecutive point (order is therefore important). A polygon can be shown between (at least two) coordinates defined with the point
parameter. Each point is defined by latitude and longitude coordinates. Example: point=69.059969,10.9575&point=55.336944,10.9575
.
- 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
).
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).
Additional functionality
A link to a similar view in Google Maps is also shown.
Examples
An example of a complete URL:
http://anders.nemonisimors.com/projects/map/v2.1/mapViewer.html?title=Mount%20Everest&origo=27.987907,86.924852&zoom=18&showMarkerForOrigo=true
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.
History
NNM Map Viewer was originally implemented by Anders Gustafson in November 2018.
-
Current version, , was released . A form to help building correct URLs. Added scale. Bug fixes.
-
Version, 2.0, was released 2018-11-22. Breaking changes, since the URL parameters look differently than in version 1.0.
-
Version 1.0, was released 2018-11-18. Implemented with JavaScript, HTML, CSS, Leaflet JS and OpenStreetMap.
What's in the upcoming versions?
-
Cleaning up and refactoring the code (JavaScript, HTML, CSS).
-
Using JavaScript classes, arrow functions, functional style (map, filter, foreach, etc).
-
Enhance user interface.
-
Possibility to define several distinct polygons.