Meer informatie -
Voor de liefhebber zijn meer voorbeelden en instructies t.a.v. de kaarten te vinden op https://www.semantic-mediawiki.org/wiki/Category:Maps_examples
Standaard kaart / map oplossing Berghapedia vanaf 2018
We hebben er voor gekozen geen gebruik te maken van de googlemaps service en deze regel ("| service=googlemaps") staat er óf niet in óf voor 'service' staat een '#'.
Basiskaart
De tool die vanaf 2018 gebruikt wordt in Berghapedia heeft niet meer de eenvoudige gebruikersinteractie van de oude tool, maar is toch nog eenvoudig te gebruiken.
Regel 1: " {{#display_map: "
Regel 2: ''Adres'' of ''coördinaat''
Regel 3: " | zoom = 18 "
Regel 4: " | width=300 "
regel 5: " | height=400 "
Regel 6: " }} "
- Regel 1 is verplicht en altijd gelijk
- Regel 2 bevat óf het adres óf het coördinaat en eindigt met een ';'
- Regel 3 bevat de (in)zoom factor, waarbij 18 het verst ingezoomd is (is soms te veel van het goede)
- Regel 4 is de breedte van het kaartje in pixels. Optioneel
- Regel 5 is de hoogte van het kaartje in pixels. Optioneel en niet standaard toegepast
- Regel 6 is verplicht en altijd gelijk.
Optie 1, gebruik een adres
Voor het gebruiken van een adres zijn een aantal spelregels aan te houden:
- De opbouw is: Straat Nummer, Plaats, Land met een ',' ertussen.
- Vergeet niet de ';' achter het adres
Voorbeeld: "Stadsplein 70, 's-Heerenberg, Nederland;"
Optie 2, gebruik een coördinaat
Met het gebruiken van een coördinaat is de weergave veel exacter te gebruiken, maar de uitdaging zit in het 'vinden' van het juiste coördinaat.
- De opbouw is: coördinaat 1, coördinaat 2
- Vergeet niet de ';' achter het coördinaat
Voorbeeld: 51.907002, 6.188049 ;
Aanvullen van gegevens van een punt
Vaak wil je extra informatie toevoegen aan een punt op de kaart. Deze wordt zichtbaar bij slectie van het punt.
Door een '~' (tilde) achter het adres te plaatsten kan er extra teksten aan de punten toegevoegd worden, dit mogen ook doorverwijzingen zijn ([[ ...).
De toevoeging van een tweede '~' geeft de mogelijk om bij het klikken op de vlag nog meer informatie mee te geven.
Voorbeeld: " Stadsplein 70, 's-Heerenberg, Nederland~Het Heemkundehuus van de Heemkundekring Bergh~De HKB heeft tot einde 2018 op deze locatie gezeten; "
Het vinden van coördinaten
De optie met de coördinaten werkt erg exact, maar de grote uitdaging zit 'm in het bepalen van de juiste coördinaten.
Een handige optie is om Google Maps deze voor jouw te laten bepalen
- Open Google map op Google Maps
- Zoek nu naar het punt dat je wilt vinden door naar een adres in de nabijheid in te voeren.
- Ga met de muis op het punt staan dat je wilt markeren
- Klik op de rechter muisknop en bovenaan de opties staat het coördinaat, selecteer het en daarmee staat het nu op jouw kleombord (in het geheugen)
- Plak het coördinaat nu op regel 2 en sluit af met een ';'
Coördinaten en adressen
In deze voorbeelden kan, in plaats van adressen, de geografische coördinaten (breedte- en lengtegraad) van de locaties zijn gespecificeerd. Dit is overigens geen vereiste om meerdere locaties in één kaart op te nemen. Een aantal adressen (straat, plaats, land) werkt ook. Het gebruik van geografische coördinaten is aan te bevelen als er van de locatie geen precies adres bestaat of de vlaf net niet daar komt te staan waar je 'm hebben wilt. Bovendien, bij gebruik van geografische coördinaten zal de kaart niet wijzigen als, om een of andere reden, het adres van de locatie wijzigt. Bijvoorbeeld door een straatnaamwijziging. Op de website https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop&hl=nl kunnen de coördinaten van een adres, of een locatie als die geen adres heeft, worden opgezocht.
Voorbeelden
Simpele kaart
Om een kaart van een bepaalde locatie, bijvoorbeeld het adres van het Heemkundehuus, op een pagina te (laten) tonen moet tenminste de volgende code te worden toegevoegd:
{{#display_map:
Stadsplein 70, 's-Heerenberg, Nederland;
| zoom=18
}}
Dit levert :
Bezig met het laden van de kaart...
{"minzoom":false,"maxzoom":false,"mappingservice":"openlayers","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":18,"controls":["layerswitcher","mouseposition","autopanzoom","scaleline","navigation"],"layers":["new OpenLayers.Layer.OSM.Mapnik(\"OSM Mapnik\")","new OpenLayers.Layer.OSM.CycleMap(\"OSM Cycle Map\")"],"resizable":false,"overlays":[],"searchmarkers":"","kml":[],"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"","link":"","lat":51.8744185,"lon":6.2449783,"icon":""}],"imageoverlays":null}
Dit is de eenvoudigste methode en geeft een kaart met een standaard hoogte en beeldschermbreedte.
Kaart op maat
Met een wat uitgebreidere code is de kaart wat meer naar wens aan te passen.
Bijvoorbeeld, dezelfde kaart met een kleinere afmeting van 400 bij 400 pixels (in plaats van paginabreed), en met een tekst ("Het Heemkundehuus van de Heemkundekring Bergh"), als er op het rode markeersymbool wordt geklikt:
{{#display_map:
Stadsplein 70, 's-Heerenberg, Nederland~Het [[Heemkundehuus]] van de Heemkundekring Bergh~De HKB heeft tot einde 2018 op deze locatie gezeten;
| zoom=12
| width=300
}}
Dit levert:
Bezig met het laden van de kaart...
{"minzoom":false,"maxzoom":false,"mappingservice":"openlayers","width":"400px","height":"350px","centre":false,"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":18,"controls":["layerswitcher","mouseposition","autopanzoom","scaleline","navigation"],"layers":["new OpenLayers.Layer.OSM.Mapnik(\"OSM Mapnik\")","new OpenLayers.Layer.OSM.CycleMap(\"OSM Cycle Map\")"],"resizable":false,"overlays":[],"searchmarkers":"","kml":[],"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EHet \u003Ca href=\"/index.php?title=Heemkundehuus\" title=\"Heemkundehuus\"\u003EHeemkundehuus\u003C/a\u003E van de Heemkundekring Bergh\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EDe HKB heeft tot einde 2018 op deze locatie gezeten\n\u003C/p\u003E\u003C/div\u003E","title":"Het Heemkundehuus van de Heemkundekring Bergh\n","link":"","lat":51.8744185,"lon":6.2449783,"icon":""}],"imageoverlays":null}
Meervoudige kaart
Ook is het mogelijk om meerdere locaties en aanvullende teksten bij een selectie op dezelfde kaart weer te geven.
Bijvoorbeeld:
{{#display_map:
51.907002, 6.188049~[[Beek]];
51.901495, 6.223412~[[Bergherbos]];
51.910391, 6.164875~[[Byvanck]];
51.924896, 6.264954~[[Braamt]];
51.875378, 6.244601~[['s-Heerenberg]];
51.937333, 6.232359~[[Kilder]];
51.880756, 6.269503~[[Lengel]];
51.921906, 6.195087~[[Loerbeek]];
51.879485, 6.222939~[[Stokkum]];
51.916224, 6.30912~[[Vethuizen]];
51.900532, 6.264313~[[Vinkwijk]];
51.938074, 6.278601~[[Wijnbergen]];
51.905731, 6.257915~[[Zeddam]];
| zoom=12
| #service=googlemaps
| width=600
| height=600
}}
Dit levert:
Bezig met het laden van de kaart...
{"minzoom":false,"maxzoom":false,"mappingservice":"openlayers","width":"600px","height":"600px","centre":false,"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":12,"controls":["layerswitcher","mouseposition","autopanzoom","scaleline","navigation"],"layers":["new OpenLayers.Layer.OSM.Mapnik(\"OSM Mapnik\")","new OpenLayers.Layer.OSM.CycleMap(\"OSM Cycle Map\")"],"resizable":false,"overlays":[],"searchmarkers":"","kml":[],"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Beek\" title=\"Beek\"\u003EBeek\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Beek\n","link":"","lat":51.907002,"lon":6.188049,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Bergherbos\" title=\"Bergherbos\"\u003EBergherbos\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Bergherbos\n","link":"","lat":51.901495,"lon":6.223412,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Byvanck\" title=\"Byvanck\"\u003EByvanck\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Byvanck\n","link":"","lat":51.910391,"lon":6.164875,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Braamt\" title=\"Braamt\"\u003EBraamt\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Braamt\n","link":"","lat":51.924896,"lon":6.264954,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=%27s-Heerenberg\" title=\"\u0026#39;s-Heerenberg\"\u003E's-Heerenberg\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"'s-Heerenberg\n","link":"","lat":51.875378,"lon":6.244601,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Kilder\" title=\"Kilder\"\u003EKilder\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Kilder\n","link":"","lat":51.937333,"lon":6.232359,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Lengel\" title=\"Lengel\"\u003ELengel\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Lengel\n","link":"","lat":51.880756,"lon":6.269503,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Loerbeek\" title=\"Loerbeek\"\u003ELoerbeek\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Loerbeek\n","link":"","lat":51.921906,"lon":6.195087,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Stokkum\" title=\"Stokkum\"\u003EStokkum\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Stokkum\n","link":"","lat":51.879485,"lon":6.222939,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Vethuizen\" title=\"Vethuizen\"\u003EVethuizen\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Vethuizen\n","link":"","lat":51.916224,"lon":6.30912,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Vinkwijk\" title=\"Vinkwijk\"\u003EVinkwijk\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Vinkwijk\n","link":"","lat":51.900532,"lon":6.264313,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Wijnbergen\" title=\"Wijnbergen\"\u003EWijnbergen\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Wijnbergen\n","link":"","lat":51.938074,"lon":6.278601,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u003Ca href=\"/index.php?title=Zeddam\" title=\"Zeddam\"\u003EZeddam\u003C/a\u003E\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Zeddam\n","link":"","lat":51.905731,"lon":6.257915,"icon":""}],"imageoverlays":null}
Satelliet kaart
Door de aanpassing van de service (api) van Google Maps is het gebruik niet meer gratis en geeft de weergave standaard een foutmelding in beeld. We beschrijven de functionaliteit wel, maar gebruiken deze niet. (br>
Met een wat uitgebreidere code is de kaart wat meer naar wens aan te passen. Hiervoor hebben we wel 2 nieuwe regels nodig:
Regel 1: " | service=googlemaps "
Regel 2: " | type=satellite "
- Regel 1 geeft aan dat niet de OpenstreetMap maar de GoogleMaps service gebruikt moet worden
- Regel 2 geeft aan dat de weergave m.b.v. een satelliet weergave gedaan moet worden.
Bijvoorbeeld, dezelfde kaart (maar nu als satellietfoto), met een kleinere afmeting van 400 bij 400 pixels (in plaats van paginabreed), en met een tekst ("Het Heemkundehuus van de Heemkundekring Bergh"), als er op het rode markeersymbool wordt geklikt:
{{#display_map:
Stadsplein 70, 's-Heerenberg, Nederland~Het [[Heemkundehuus]] van de Heemkundekring Bergh;
| zoom=12
| service=googlemaps
| type=satellite
| width=300
| height=300
}}
Dit levert:
Bezig met het laden van de kaart...
{"minzoom":false,"maxzoom":false,"mappingservice":"googlemaps3","type":"SATELLITE","types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"width":"400px","height":"400px","centre":false,"title":"","label":"","icon":"","visitedicon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"wmsoverlay":false,"copycoords":false,"static":false,"zoom":18,"layers":[],"controls":["pan","zoom","type","scale","streetview"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"markercluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"tilt":0,"imageoverlays":[],"kml":[],"gkml":[],"fusiontables":[],"searchmarkers":"","enablefullscreen":false,"scrollwheelzoom":false,"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EHet \u003Ca href=\"/index.php?title=Heemkundehuus\" title=\"Heemkundehuus\"\u003EHeemkundehuus\u003C/a\u003E van de Heemkundekring Bergh\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Chr /\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003C/div\u003E","title":"Het Heemkundehuus van de Heemkundekring Bergh\n","link":"","lat":51.8744185,"lon":6.2449783,"icon":""}]}
Nb: Deze weergave is niet altijd beschikbaar.
Googlemaps service
De Service van Googlemaps levert in 2018 nog al eens problemen op. Vandaar dat we toen gekozen hebben om de service niet te gebruiken en alleen de openstreetview variant toe te passen. Helaas is daarin geen satelliet-weergave beschikbaar. Waar in de voorbeeldtekst '| #service=googlemaps' staat hebben deze dus uitgezet en zou de regel ook als totaal weggelaten kunnen/mogen worden.