|User:ClemRutter/sandbox5}}

How to add a map to the infobox

edit

The simplest and cleanest way to add a map is to use the {{OSM Location map}}. This is a comprehensive template but we only need to use a tiny bit of it. We add this code to the infobox:

| module= {{OSM Location map               <!--The template name-->
 | float = centre
 | width = 250                             <!--housekeeping-->
 |  coord = {{coord|53.41459|-4.3341279}}  <!--latitude and longitude again-->
 |  zoom = 15                              <!--(1=whole world, 18=a street)-->
}}

This adds a small map with the school at the centre, however with no label. The |Zoom= can be usefully set at around 10 to 15.

A single pointer

edit

Two coordinate sets are needed |coord= positions the centre of the map, and |mark-coord= places the marker. When these are the same, the marker will be at the centre of the map.

| module ={{OSM Location map
 | float = centre
 | width = 250
 | coord = {{coord|52.954783199|-1.158108599}} <!-- Centred on the city centre-->
 | mark-coord = {{coord|52.9406|-1.1809}} | label = NUAST| label-pos = top
 | zoom = 12}} <!-- marking the school-->

A little bit of trial and error is needed with the |label-pos= which can be set as left, top, bottom and right, and |zoom= to prevent the labels on the overlay layer obscuring the labels on the base map layer.

Multiple pointers

edit

A three sites, labelled with the default marker. Four sets of co-ordinates are needed, one for the centre of the map, and the the three labels.

| module = {{OSM Location map
 | float = centre
 | width = 250
 | coord = {{coord|52.954783199|-1.158108599}}<!-- Centred on the city centre-->
 | mark-coord = {{coord|52.9557975|-1.110130099}} | label = Greenwood 1 | label-pos = top <!-- Marked on the Greenwood campus-->
 | mark-coord1 = {{coord|52.975830199|-1.1298709}} | label1 = Ransom | label-pos1 = left <!-- Two other marks-->
 | mark-coord2 = {{coord|52.9522013|-1.1194567}} | label2 = Greenwood 2 | label-pos2 = bottom <!-- The labels going above, below and to the side-->
 | zoom = 11}}
}}

So we see:

 
 
3km
2miles
 
Greenwood 1
 
Greenwood 2
 
Ransom

Cloning the code- using a new geotag

edit

Cloning this code is easy but pay attention to the format of the geotag. {{coord|52.9547|-1.1581}} it uses a | as a separator, Google Maps uses a ,. There is no warning message!

Using the geotag from the article, open Google maps. Find the spot, right click and and click on the geotag in the popup thumbnail (it won't work if there is already a named object at that spot- move a few paces and try again. Copy and paste the geo into your code and change the , to |.

| module = {{OSM Location map
 | float = centre
 | width = 250
 | coord = {{coord|52.954783199|-1.158108599}}<!-- Centred on the city centre-->
 | mark-coord = {{coord|52.9529|-1.1435}} | label = Adams Building | label-pos = top
 | mark-coord3 ={{coord|52.970114| -1.155012}} | label3 = Clarendon| label-pos3 = top
 | zoom = 12}}

Using different markers or sizes of marker

edit

In multi marker setups, the |mark-size= is the default, and |mark-sizen= will override it.

With the new building, the old building is shown smaller, and with a different colour image that comes from the same set.

| module = {{OSM Location map
 | float = center
 | width = 250
 | coord = {{coord|51.924|-2.578}}
 | mark-size = 15
 | mark-coord = {{coord|51.924|-2.578}}| label = John Kyrle High School  | label-pos = top
 | mark1 = Yellow pog.svg 
 | mark-size1 = 8
 | mark-coord1 = {{coord|51.914860| -2.575066}}| label1 = Old Grammar School | label-pos1 = top
 | zoom = 13 }}


 
 
1km
0.6miles
 
John Kyrle High School
 
Old Grammar School

Map using svg overlay as a marker

edit

Little Venice

edit

See Little Venice for the map in situ

  1. Take the coords- goto OpenStreet Map site- locate the spot- click the very small What is here link. Get accurate coords for the centre of the map, Example 51.5254, -0.1824.
| module = {{OSM Location map <!-- Set up the map- its size and centre-->
 | float = centre
 | height= 260
 | width = 600
 | coord = {{coord|51.5266| -0.1824}} <!-- Map centred -->
 | zoom = 14 <!-- usually 10, 12 or 14-->
 <!-- do the first mark with an imported svg-->
 | mark = Little Venice overlay.svg
  | mark-coord = {{coord|51.5254| -0.1824}}    <!-- lat and lon location for the overlay -->
  | mark-size = 300       <!--height of the overlay, matches the frame-->
  | mark-dim = 2.20  <!--dimension (scale factor) to set width needed as map is not a square-->
  | mark-title=none       <!--no marker within the full screen version-->
 <!--Adding a labelled marker-->
 | mark-coord1 = {{coord|51.5254| -0.1824}} 
  | label1 = Little Venice
  | label-pos1 = bottom <!-- top, bottom, right or left -->
 }}
 
Little Venice overlay.svg
 
 
500m
550yds
 
 
Little Venice

The overlay is here File:Little Venice overlay.svg.

To make one, go to the OSM on your wiki page. Click on full interactive map. Do a screen capture of the window [Shft PrtSc] and save it anywhere [Crtl S]. Open 'Inkscape'- Import [Crtl I] Recent file, select the top of the list. Edit- resize to current object [Shift Crtl R]. Lock the layer, open new layer. Start drawing. When finished, hide background layer- save. [Crtl S]
Upload this file via the upload wizard. Enter the file name in the {{OSM Location map template}}. Show preview.[Shift Alt P]

Now we will reduce the size.

| module =  {{OSM Location map <!-- Set up the map- its size and centre-->
 | float = centre
 | height= 300
 | width = 400
 | coord = {{coord|51.5266| -0.1824}} <!-- Map centred -->
 | zoom = 14 <!-- usually 10, 12 or 14-->
 <!-- do the first mark with an imported svg-->
 | mark = Little Venice overlay.svg
  | mark-coord = {{coord|51.5254| -0.1824}}    <!-- lat and lon location for the overlay -->
  | mark-size = 300       <!--height of the overlay, matches the frame-->
  | mark-dim = 2.20  <!--dimension (scale factor) to set width needed as map is not a square-->
  | mark-title=none       <!--no marker within the full screen version-->
 <!--Adding a labelled marker-->
 | mark-coord1 = {{coord|51.5254| -0.1824}} 
  | label1 = Little Venice
  | label-pos1 = bottom <!-- top, bottom, right or left -->
 }}
 
 
500m
550yds
 
 
Little Venice

Okay- this is striving for the perfect balance.

Lower Thames Crossing

edit
| module = {{OSM Location map
 | float = right
 | width = 280
 | coord = {{Coord|51.4492| 0.4147}}
 | minimap = file<!-- file -->
 | mini-file = Greater London UK location map 2.svg
 | mini-width = 90
 | mini-height = 72
 | minipog-x = 80
 | minipog-y = 36
 | scalemark = 120
 <!-- Add the map overlay-->
 | mark = M25-LTC overlay.svg
  | mark-coord = {{Coord|51.4492| 0.3947}} 
  | mark-size = 300     <!--must match zoom level- guess value-->
  | mark-dim = 0.84      <!--dimension (scale factor) stays the same--> 
 <!-- On to the ÷marks -->
 | mark-coord1 = {{Coord|51.4262|0.4116}} | label1 = Tunnel Portal | label-pos1 = left
 | mark-coord2 = {{Coord|51.4583|0.4102}} | label2 = Tunnel Portal| label-pos2= right
 | mark-coord6= {{Coord|51.5662|0.2884}} | label6 = A127 | label-pos6 = left
| mark-coord3 = {{Coord|51.4037| 0.4075}} | label3 = A2 | label-pos3 = bottom
| mark-coord4 = {{Coord|51.5019| 0.3551}} | label4 = A13| label-pos4 = left
| mark-coord5 = {{Coord|51.5400| 0.2884}} | label5 = LTC/M25| label-pos5 = left
|zoom =9
}}
 
 
10km
6miles
 
 
A127
 
LTC/M25
 
A13
 
A2
 
Tunnel Portal
 
Tunnel Portal
 

The motoways are not aligning yet- tweak

 
 
10km
6miles
 
 
A127
 
LTC/M25
 
A13
 
A2
 
Tunnel Portal
 
Tunnel Portal
 

London schools template showing two styles of map

edit
Fortismere School
 
Address
 
Tetherdown (South Wing), Creighton Avenue (North Wing)

,
London, England
,
N10 1NS (South Wing)
N10 1NE (North Wing)

United Kingdom
Coordinates51°35′34″N 0°09′03″W / 51.59285°N 0.15095°W / 51.59285; -0.15095
Information
TypeFoundation school
Established1983 (Tollington Park in 1879)
Local authorityHaringey
Department for Education URN102156 Tables
OfstedReports
Chair of GovernorsMark Chapman
HeadZoe Judge, Jo Davey
GenderCoeducational
Age11 to 18
Enrollment1,750
Colour(s)  Blue
  Green
CollegesAlexandria, Ephesus, Colosseum, Rhodes, Olympia, Petra
Websitefortismere.haringey.sch.uk
 
 
500m
550yds
 
Fortismere
 
Creighton (North Wing)
 
Tetherdown (South Wing)
 
Fortismere School, Muswell Hill

Fortismere School is a mixed, comprehensive, foundation secondary school situated just off the A504 in Muswell Hill in the London Borough of Haringey.

Chart

edit
 
Serendipity!

A little dated however. --ClemRutter (talk) 09:27, 29 June 2018 (UTC)

Overlay

edit
| module = {{overlay
|image = To the Right Honourable the Master, Wardens, & Elder Bretham of the Trinity House, this chart of the entrances to The River Thames is ... dedicated (8250889146).jpg
|columns = 2
|width = 704
|height = 500
|overlay1 = East Swin
|overlay1top = 100
|overlay1left = 350
|overlay2 = West Swin
|overlay2top = 108
|overlay2left = 500
|overlay3 = Middle Deep Swin
|overlay3top = 80
|overlay3left = 160
|overlay4 = Kangaroo Ridge Triple Chairlift mid station
|overlay4top = 185
|overlay4left = 263
|overlay5 = Basin Poma (J-Bar) unload point
|overlay5top = 185
|overlay5left = 395
|overlay6 = Ego flats
|overlay6top = 235
|overlay6left = 350
|overlay7 = Snow gums
|overlay7link = Snow gum
|overlay7top1 = 125
|overlay7left1 = 650
|overlay7top2 = 130
|overlay7left2 = 50
}}
 
1
2
3
4
5
6
1
East Swin
2
West Swin
3
Middle Deep Swin
4
Kangaroo Ridge Triple Chairlift mid station
5
Basin Poma (J-Bar) unload point
6
Ego flats
Snow gums

Annotate

edit
{{Annotated image 
| float=none 
| caption=Labels link to articles, 
<span style{{=}}"background-color:blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}}Channels,
<span style{{=}}"background-color:gold">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}}Sand features,
<span style{{=}}"background-color:red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}} settlements
| image=To the Right Honourable the Master, Wardens, & Elder Bretham of the Trinity House, this chart of the entrances to The River Thames is ... dedicated (8250889146).jpg 
| width=800| height=650 <!-- of box-->
| image-width=750 <!-- of the image that must be jiggled into the box -->
| image-left=20 
| image-top=20
| annotations =
<!--Channels-->
{{Annotation|350|300|<span style{{=}}"background-color:blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}}[[Swin (Thames)|The Swin]]}}
{{Annotation|450|210|<span style{{=}}"background-color:blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}}[[Swin (Thames)|The Wallet]]}}
{{Annotation|480|280|<span style{{=}}"background-color:blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}}[[Thames Estuary|Kings Channel]]}}
{{Annotation|450|390|<span style{{=}}"background-color:blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}}[[Thames Estuary|Princes's Channel]]}}
{{Annotation|450|420|<span style{{=}}"background-color:blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}}[[Thames Estuary|Queen's Channel]]}}
{{Annotation|500|250|<span style{{=}}"background-color:#753a00">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}} [[Black deep]]}}
{{Annotation|170|280|<span style{{=}}"background-color:blue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}}[[Thames Estuary|Yantlet Channel]]}}
<!--Sand banks-->
{{Annotation|580|350|<span style{{=}}"background-color:gold">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}} [[Kentish Knock (England)|Kentish Knock]]}} 
{{Annotation|460|350|<span style{{=}}"background-color:gold">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}} [[Long sand]]}} 
{{Annotation|430|320|<span style{{=}}"background-color:gold">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}} [[Knock John sand]]}} 
<!--Settlements-->
{{Annotation|125|325|<span style{{=}}"background-color:red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> {{=}} [[Chatham Dockyard]] }}
}}
       =The Swin
       =The Wallet
       =Kings Channel
       =Princes's Channel
       =Queen's Channel
       = Black deep
       =Yantlet Channel
       = Kentish Knock
       = Long sand
       = Knock John sand
       = Chatham Dockyard
Labels link to articles,        =Channels,       =Sand features,       = settlements