component:minimap Documentation Page

Minimap

This component makes it easy to insert images of geographic locations, possibly with a crosshair on top. Instead of creating the image with a photo-editing program, just write two lines of Wikidot code. The resulting image is fully navigable, both directionally and with zoom.

Example #1

Example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non varius erat. Morbi mattis, turpis nec vestibulum auctor, tortor libero cursus libero, at vulputate lorem sapien nec sem. Duis ornare sit amet felis eget scelerisque. Pellentesque suscipit urna turpis, ut placerat massa iaculis ut. Quisque eget pulvinar tortor. Aenean sagittis purus at metus blandit, a consequat felis placerat. Vivamus ultrices sapien id euismod ullamcorper.

Praesent vitae velit vitae ipsum pretium blandit. Quisque porttitor mattis mi scelerisque posuere. Fusce at euismod urna. Sed vulputate magna luctus lectus varius, varius euismod arcu volutpat. Ut velit velit, congue quis ipsum imperdiet, dapibus lobortis purus. In vitae risus ut ipsum suscipit laoreet non sed ex.

Nam facilisis erat justo, non tempus arcu vehicula sit amet. Praesent aliquam nibh diam, sit amet porttitor nulla dictum eget. Praesent vulputate dapibus porta. Aliquam erat volutpat. Mauris ultricies ex vitae risus efficitur, et dictum metus imperdiet. Aenean hendrerit congue diam, sed iaculis nibh lobortis quis. Pellentesque vestibulum eu nisi vel eleifend. Vivamus ac ante cursus, pretium justo non, semper felis. Aliquam quis aliquam velit, at hendrerit odio.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

▶ Code

The previous example was obtained with the following code:

[[include :scp-sandbox-3:component:minimap
latitude=43.769562|
longitude=11.255814|
caption=Example.
]]

Geographic coordinates can be copy-pasted from, e.g., LatLong.net.

Example #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non varius erat. Morbi mattis, turpis nec vestibulum auctor, tortor libero cursus libero, at vulputate lorem sapien nec sem. Duis ornare sit amet felis eget scelerisque. Pellentesque suscipit urna turpis, ut placerat massa iaculis ut. Quisque eget pulvinar tortor. Aenean sagittis purus at metus blandit, a consequat felis placerat. Vivamus ultrices sapien id euismod ullamcorper.

Praesent vitae velit vitae ipsum pretium blandit. Quisque porttitor mattis mi scelerisque posuere. Fusce at euismod urna. Sed vulputate magna luctus lectus varius, varius euismod arcu volutpat. Ut velit velit, congue quis ipsum imperdiet, dapibus lobortis purus. In vitae risus ut ipsum suscipit laoreet non sed ex.

Position of the anomaly.

Nam facilisis erat justo, non tempus arcu vehicula sit amet. Praesent aliquam nibh diam, sit amet porttitor nulla dictum eget. Praesent vulputate dapibus porta. Aliquam erat volutpat. Mauris ultricies ex vitae risus efficitur, et dictum metus imperdiet. Aenean hendrerit congue diam, sed iaculis nibh lobortis quis. Pellentesque vestibulum eu nisi vel eleifend. Vivamus ac ante cursus, pretium justo non, semper felis. Aliquam quis aliquam velit, at hendrerit odio.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

▶ Code

The previous example was obtained with the following code:

[[include :scp-sandbox-3:component:minimap
latitude=43.799562|
longitude=11.355814|
caption=Position of the anomaly.|
width=95%|
height=200px|
float=center|
zoom=8|
latviewoffset=-.03|
lonviewoffset=.2|
visualstyle=toner|
color=purple
]]

For an explanation on all parameters, see below.

Example #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non varius erat. Morbi mattis, turpis nec vestibulum auctor, tortor libero cursus libero, at vulputate lorem sapien nec sem. Duis ornare sit amet felis eget scelerisque. Pellentesque suscipit urna turpis, ut placerat massa iaculis ut. Quisque eget pulvinar tortor. Aenean sagittis purus at metus blandit, a consequat felis placerat. Vivamus ultrices sapien id euismod ullamcorper.

Site Virtus.

Praesent vitae velit vitae ipsum pretium blandit. Quisque porttitor mattis mi scelerisque posuere. Fusce at euismod urna. Sed vulputate magna luctus lectus varius, varius euismod arcu volutpat. Ut velit velit, congue quis ipsum imperdiet, dapibus lobortis purus. In vitae risus ut ipsum suscipit laoreet non sed ex.

Nam facilisis erat justo, non tempus arcu vehicula sit amet. Praesent aliquam nibh diam, sit amet porttitor nulla dictum eget. Praesent vulputate dapibus porta. Aliquam erat volutpat. Mauris ultricies ex vitae risus efficitur, et dictum metus imperdiet. Aenean hendrerit congue diam, sed iaculis nibh lobortis quis. Pellentesque vestibulum eu nisi vel eleifend. Vivamus ac ante cursus, pretium justo non, semper felis. Aliquam quis aliquam velit, at hendrerit odio.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

▶ Code

The previous example was obtained with the following code:

[[include :scp-sandbox-3:component:minimap
latitude=41.855131|
longitude=12.568386|
caption=Site Virtus.|
height=350px|
zoom=13|
latviewoffset=0.025|
lonviewoffset=-0.015|
float=left|
color=blue|
visualstyle=street
]]

For an explanation on all parameters, see below.

Example #4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non varius erat. Morbi mattis, turpis nec vestibulum auctor, tortor libero cursus libero, at vulputate lorem sapien nec sem. Duis ornare sit amet felis eget scelerisque. Pellentesque suscipit urna turpis, ut placerat massa iaculis ut. Quisque eget pulvinar tortor. Aenean sagittis purus at metus blandit, a consequat felis placerat. Vivamus ultrices sapien id euismod ullamcorper.

Affected area.

Praesent vitae velit vitae ipsum pretium blandit. Quisque porttitor mattis mi scelerisque posuere. Fusce at euismod urna. Sed vulputate magna luctus lectus varius, varius euismod arcu volutpat. Ut velit velit, congue quis ipsum imperdiet, dapibus lobortis purus. In vitae risus ut ipsum suscipit laoreet non sed ex.

Satellite image.

Nam facilisis erat justo, non tempus arcu vehicula sit amet. Praesent aliquam nibh diam, sit amet porttitor nulla dictum eget. Praesent vulputate dapibus porta. Aliquam erat volutpat. Mauris ultricies ex vitae risus efficitur, et dictum metus imperdiet. Aenean hendrerit congue diam, sed iaculis nibh lobortis quis. Pellentesque vestibulum eu nisi vel eleifend. Vivamus ac ante cursus, pretium justo non, semper felis. Aliquam quis aliquam velit, at hendrerit odio.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

▶ Code

The previous example was obtained with the following code:

[[include :scp-sandbox-3:component:minimap
latitude=33.852241|
longitude=-118.274243|
caption=Affected area.|
width=200px|
height=350px|
zoom=9|
float=left|
crosshair=false|
visualstyle=watercolor
]]

[[include :scp-sandbox-3:component:minimap
latitude=33.852241|
longitude=-118.274243|
caption=Satellite image.|
width=200px|
height=350px|
zoom=7|
float=right|
crosshair=false|
visualstyle=terranight
]]

For an explanation on all parameters, see below.

Example #5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non varius erat. Morbi mattis, turpis nec vestibulum auctor, tortor libero cursus libero, at vulputate lorem sapien nec sem. Duis ornare sit amet felis eget scelerisque. Pellentesque suscipit urna turpis, ut placerat massa iaculis ut. Quisque eget pulvinar tortor. Aenean sagittis purus at metus blandit, a consequat felis placerat. Vivamus ultrices sapien id euismod ullamcorper.

Aerial view of the area of interest.

Praesent vitae velit vitae ipsum pretium blandit. Quisque porttitor mattis mi scelerisque posuere. Fusce at euismod urna. Sed vulputate magna luctus lectus varius, varius euismod arcu volutpat. Ut velit velit, congue quis ipsum imperdiet, dapibus lobortis purus. In vitae risus ut ipsum suscipit laoreet non sed ex.

Nam facilisis erat justo, non tempus arcu vehicula sit amet. Praesent aliquam nibh diam, sit amet porttitor nulla dictum eget. Praesent vulputate dapibus porta. Aliquam erat volutpat. Mauris ultricies ex vitae risus efficitur, et dictum metus imperdiet. Aenean hendrerit congue diam, sed iaculis nibh lobortis quis. Pellentesque vestibulum eu nisi vel eleifend. Vivamus ac ante cursus, pretium justo non, semper felis. Aliquam quis aliquam velit, at hendrerit odio.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

▶ Code

The previous example was obtained with the following code:

[[include :scp-sandbox-3:component:minimap
latitude=27.178302|
longitude=9.641738|
caption=Aerial view of the area of interest.|
width=70%|
height=250px|
zoom=9|
latviewoffset=-0.1|
lonviewoffset=0.1|
float=left|
color=white|
crosshair=true|
visualstyle=ortho|
minzoomoffset=-5
]]

For an explanation on all parameters, see below.

Example #6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non varius erat. Morbi mattis, turpis nec vestibulum auctor, tortor libero cursus libero, at vulputate lorem sapien nec sem. Duis ornare sit amet felis eget scelerisque. Pellentesque suscipit urna turpis, ut placerat massa iaculis ut. Quisque eget pulvinar tortor. Aenean sagittis purus at metus blandit, a consequat felis placerat. Vivamus ultrices sapien id euismod ullamcorper.

Aerial picture.

Praesent vitae velit vitae ipsum pretium blandit. Quisque porttitor mattis mi scelerisque posuere. Fusce at euismod urna. Sed vulputate magna luctus lectus varius, varius euismod arcu volutpat. Ut velit velit, congue quis ipsum imperdiet, dapibus lobortis purus. In vitae risus ut ipsum suscipit laoreet non sed ex.

Nam facilisis erat justo, non tempus arcu vehicula sit amet. Praesent aliquam nibh diam, sit amet porttitor nulla dictum eget. Praesent vulputate dapibus porta. Aliquam erat volutpat. Mauris ultricies ex vitae risus efficitur, et dictum metus imperdiet. Aenean hendrerit congue diam, sed iaculis nibh lobortis quis. Pellentesque vestibulum eu nisi vel eleifend. Vivamus ac ante cursus, pretium justo non, semper felis. Aliquam quis aliquam velit, at hendrerit odio.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

Nam facilisis erat justo, non tempus arcu vehicula sit amet. Praesent aliquam nibh diam, sit amet porttitor nulla dictum eget. Praesent vulputate dapibus porta. Aliquam erat volutpat. Mauris ultricies ex vitae risus efficitur, et dictum metus imperdiet. Aenean hendrerit congue diam, sed iaculis nibh lobortis quis. Pellentesque vestibulum eu nisi vel eleifend. Vivamus ac ante cursus, pretium justo non, semper felis. Aliquam quis aliquam velit, at hendrerit odio.

Proin sagittis nisi nec pharetra molestie. Nam sed mollis diam. Nulla libero sapien, venenatis non finibus at, eleifend sed est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et velit eget sapien vulputate efficitur. Aliquam viverra iaculis lacus nec sodales.

▶ Code

The previous example was obtained with the following code:

[[include :scp-sandbox-3:component:minimap
latitude=40.752776|
longitude=-74.015974|
caption=Aerial picture.|
width=250px|
height=450px|
zoom=10|
latviewoffset=-0.051|
lonviewoffset=0.051|
float=right|
color=black|
crosshair=false|
visualstyle=ortho|
grayscale=true|
]]

For an explanation on all parameters, see below.

Parameters

▶ Open

In detail, here are all the possible parameters:

Parameter	Description	Needed	Values
latitude	map/crosshair latitude value	mandatory	you can find it, e.g., at LatLong.net
longitude	map/crosshair longitude value	mandatory	you can find it, e.g., at LatLong.net
caption	caption	mandatory	add the map description here
width	window width	optional	examples: width=90%, width=300px (default: 200px)
height	window height	optional	example: height=400px (default: 450px)
float	window position	optional	possible values: left, center, right (default)
zoom	map zoom level	optional	possible values: from 3 to 18 (default: 8)
crosshair	indicates whether to draw the crosshairs or not	optional	possible values: true (default), false
color	crosshair color	optional	examples: color=red (default), color=dodgerblue (see below for a comprehensive list)
visualstyle	different types of map view	optional	possible values: toner (default), terrain, watercolor, street, streetfr, topo, terranight, plan, ortho (see Visual Styles section below for an example of each; also note that each different visualstyle needs a different attribution, see Licensing section below)
latviewoffset	shifts the latitude of the view (not the crosshair), for a more dramatic effect	optional	use small values1, for example: 0.1, -0.4 (default: 0)
lonviewoffset	shifts the longitude of the view (not the crosshair), for a more dramatic effect	optional	use small values2, for example: 0.1, -0.4 (default: 0)
minzoomoffset	the minimum zoom-out value	optional	possible values: from -20 to 0 (default: -2)
maxzoomoffset	the maximum zoom-in value	optional	possible values: from 0 to 20 (default: 2)
grayscale	changes color of the map to grayscale	optional	possible values: true, false (default)
invert	invert the map's colormap	optional	possible values: true, false (default)
sepia	set the map to a sepia tone	optional	possible values: true, false (default)
hue	change the map's hue	optional	possible values: from 0 to 360 (default: 0)
addlines	adds lines like borders, regions, roads, et cetera3	optional	possible values: true, false (default)
addlabels	adds labels such as country names, city names, street names, et cetera4	optional	possible values: true, false (default) — note that setting this parameter to true needs an ulterior attribution, see at the end of the Licensing section
addrailways	adds drawing of the railway system	optional	possible values: true, false (default) — note that setting this parameter to true needs an ulterior attribution, see at the end of the Licensing section
zoomcontrols	adds the buttons to control the zoom level	optional	possible values: true, false (default)
attributions	adds the license attribution directly on the map	optional	this is turned off by default, and that means that it is mandatory to add attributions, like, e.g., it is done for images (unless this parameter is set to true). For details on attributions, see the Licensing section below — possible values: true, false (default)

Next, the list of color names that can be used by the parameter color can be found here; the complete article about web colors can be found here.

Visual Styles

▶ Open

Here is a rendition of the available visual styles; each one is written in the description.

toner

terrain

watercolor

street

streetfr

topo

terranight

plan (licensing still under investigation)

ortho (licensing still under investigation)

watercolor + addlines

watercolor + addlabels

watercolor + addrailways

watercolor + addlines + addlabels + addrailways

watercolor + grayscale

watercolor + addlines + addlabels + addrailways + grayscale

watercolor + invert

watercolor + sepia

watercolor + hue=150

watercolor + grayscale + invert

Licensing

▶ Open

Licensing depends on the visualstyle parameter used.

— terrain, toner

Module	Library	License
Map manager	Leaflet	BSD 2-Clause
Map tiles	Stamen Design	CC-BY 3.0
Map data	OpenStreetMap	ODbL

Copy/pastable:

||~ Module ||~ Library ||~ License ||
|| Map manager || [https://leafletjs.com/ Leaflet] || [https://github.com/Leaflet/Leaflet/blob/main/LICENSE BSD 2-Clause] ||
|| Map tiles || [http://stamen.com/ Stamen Design] || [http://creativecommons.org/licenses/by/3.0 CC-BY 3.0] ||
|| Map data || [http://openstreetmap.org/ OpenStreetMap] || [http://www.openstreetmap.org/copyright ODbL] ||

— watercolor

Module	Library	License
Map manager	Leaflet	BSD 2-Clause
Map tiles	Stamen Design	CC-BY 3.0
Map data	OpenStreetMap	CC BY-SA 3.0

Copy/pastable:

||~ Module ||~ Library ||~ License ||
|| Map manager || [https://leafletjs.com/ Leaflet] || [https://github.com/Leaflet/Leaflet/blob/main/LICENSE BSD 2-Clause] ||
|| Map tiles || [http://stamen.com/ Stamen Design] || [http://creativecommons.org/licenses/by/3.0 CC-BY 3.0] ||
|| Map data || [http://openstreetmap.org/ OpenStreetMap] || [http://creativecommons.org/licenses/by-sa/3.0 CC BY-SA 3.0] ||

— street

Module	Library	License
Map manager	Leaflet	BSD 2-Clause
Map tiles, data	OpenStreetMap	CC BY-SA 3.0

Copy/pastable:

||~ Module ||~ Library ||~ License ||
|| Map manager || [https://leafletjs.com/ Leaflet] || [https://github.com/Leaflet/Leaflet/blob/main/LICENSE BSD 2-Clause] ||
|| Map tiles, data || [http://openstreetmap.org/ OpenStreetMap] || [http://creativecommons.org/licenses/by-sa/3.0 CC BY-SA 3.0] ||

— streetfr

Module	Library	License
Map manager	Leaflet	BSD 2-Clause
Map tiles, data	OpenStreetMap France	CC BY-SA 3.0

Copy/pastable:

||~ Module ||~ Library ||~ License ||
|| Map manager || [https://leafletjs.com/ Leaflet] || [https://github.com/Leaflet/Leaflet/blob/main/LICENSE BSD 2-Clause] ||
|| Map tiles, data || [http://openstreetmap.org/ OpenStreetMap France] || [http://creativecommons.org/licenses/by-sa/3.0 CC BY-SA 3.0] ||

— topo

Module	Library	License
Map manager	Leaflet	BSD 2-Clause
Map tiles	SRTM, OpenTopoMap	CC BY-SA 3.0
Map data	OpenStreetMap	CC BY-SA 3.0

Copy/pastable:

||~ Module ||~ Library ||~ License ||
|| Map manager || [https://leafletjs.com/ Leaflet] || [https://github.com/Leaflet/Leaflet/blob/main/LICENSE BSD 2-Clause] ||
|| Map tiles || [http://viewfinderpanoramas.org SRTM], [https://opentopomap.org OpenTopoMap] || [http://creativecommons.org/licenses/by-sa/3.0 CC BY-SA 3.0] ||
|| Map data || [http://openstreetmap.org/ OpenStreetMap] || [http://creativecommons.org/licenses/by-sa/3.0 CC BY-SA 3.0] ||

— terranight

Module	Library	License
Map manager	Leaflet	BSD 2-Clause
Map tiles	Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System ESDIS with funding provided by NASA/HQ	No Copyright

Copy/pastable:

||~ Module ||~ Library ||~ License ||
|| Map manager || [https://leafletjs.com/ Leaflet] || [https://github.com/Leaflet/Leaflet/blob/main/LICENSE BSD 2-Clause] ||
|| Map tiles || [[size smaller]]Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System [https://www.earthdata.nasa.gov/ ESDIS] with funding provided by NASA/HQ[[/size]] || [https://www.earthdata.nasa.gov/engage/open-data-services-and-software/data-information-policy No Copyright] ||

— plan, ortho

Module	Library	License
Map manager	Leaflet	BSD 2-Clause
Map tiles, data	Geoportail France	under investigation

Copy/pastable:
under investigation

— addlines, addlabels

If you add any of addlines or addlabels (or both) you have to add also the following attribution (if you copy/paste, as a new row):

Map data

Stamen Design, OpenStreetMap

CC BY-SA 3.0

Copy/pastable:

|| Map data || [http://stamen.com Stamen Design], [http://openstreetmap.org/ OpenStreetMap] || [http://creativecommons.org/licenses/by-sa/3.0 CC BY-SA 3.0] ||

— addrailways

If you add addrailways you have to add also the following attribution (if you copy/paste, as a new row):

Map data

OpenStreetMap, OpenRailwayMap

CC BY-SA 3.0

Copy/pastable:

|| Map data || [http://openstreetmap.org/ OpenStreetMap], [https://www.OpenRailwayMap.org OpenRailwayMap] || [http://creativecommons.org/licenses/by-sa/3.0 CC BY-SA 3.0] ||

Components

▶ Open

There are three pages containing this component:

• component:minimap-howto — this page
  • component:minimap — link
    • component:minimap-base — link

Footnotes

1. The higher the zoom value, the smaller this should be so as not to shift the view too much.

2. The higher the zoom value, the smaller this should be so as not to shift the view too much.

3. It is useful with visual styles without them, such as watercolor, terranight, ortho, otherwise it would be redundant.

4. It is useful with visual styles without them, such as watercolor, terranight, ortho, otherwise it would be redundant.