Pbacsich at 16:08, 19 April 2023

2023-04-19T16:08:34Z

← Older revision		Revision as of 16:08, 19 April 2023
Line 1:		Line 1:
	== Source ==		== Source ==

	This is a copy taken on 19 April 2023 of the wiki page [https://maps.extension.wiki/wiki/Displaying_Leaflet_maps Displaying Leaflet maps] on [ https://maps.extension.wiki maps.extension.wiki].		This is a copy taken on 19 April 2023 of the wiki page [https://maps.extension.wiki/wiki/Displaying_Leaflet_maps Displaying Leaflet maps] on [https://maps.extension.wiki maps.extension.wiki].

Pbacsich at 16:07, 19 April 2023

2023-04-19T16:07:49Z

← Older revision		Revision as of 16:07, 19 April 2023
Line 198:		Line 198:
	Antwerp~The city Antwerp~ ~ ~ ~Antwerp		Antwerp~The city Antwerp~ ~ ~ ~Antwerp
	</display_map>		</display_map>


			----
			> [[Help:Index]]

			[[Category:ZWIKI Help]]

Pbacsich at 16:05, 19 April 2023

2023-04-19T16:05:43Z

← Older revision		Revision as of 16:05, 19 April 2023
Line 1:		Line 1:
	== Source ==		== Source ==

	This is a copy taken on 19 April 2023 of the wiki page Displaying Leaflet maps on maps.extension.wiki		This is a copy taken on 19 April 2023 of the wiki page [https://maps.extension.wiki/wiki/Displaying_Leaflet_maps Displaying Leaflet maps] on [ https://maps.extension.wiki maps.extension.wiki].


	== Contents ==		== Contents ==
Line 154:		Line 155:
	~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity		~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity
	</pre>		</pre>



	Example:		Example:
Line 169:		Line 172:
	\| scrollwheelzoom=off		\| scrollwheelzoom=off
	}}		}}


	=== GeoJSON ===		=== GeoJSON ===

	As of version 5.6, Maps supports display of [https://en.wikipedia.org/wiki/GeoJSON GeoJSON] via the <code>geojson</code> parameter. See [[Leaflet_GeoJSON#GeoJSON_files\|Leaflet GeoJSON files]].		As of version 5.6, Maps supports display of [https://en.wikipedia.org/wiki/GeoJSON GeoJSON] via the <code>geojson</code> parameter. See [[Leaflet_GeoJSON#GeoJSON_files\|Leaflet GeoJSON files]].


	== Alternative syntax ==		== Alternative syntax ==

Pbacsich: copy of the wiki page Displaying Leaflet maps on maps.extension.wiki

2023-04-19T15:16:35Z

copy of the wiki page Displaying Leaflet maps on maps.extension.wiki

New page

== Source ==

This is a copy taken on 19 April 2023 of the wiki page Displaying Leaflet maps on maps.extension.wiki

== Contents ==

Maps supports embedding of dynamic maps using the free and open source [https://leafletjs.com Leaflet library].

== Basic syntax ==

Displaying maps is done with the <code>#display_map</code> parser function.

<pre><nowiki>
{{#display_map:center=Brandenburg Gate, Berlin, Germany}}
</nowiki></pre>

{{#display_map:center=Brandenburg Gate, Berlin, Germany|scrollzoom=off|zoom=15}}

== Customization ==

Leaflet maps can be customized using various parameters.

<pre><nowiki>
{{#display_map:center=Berlin|width=400|height=250}}
</nowiki></pre>

{{#display_map:center=Berlin|width=400|height=250|scrollzoom=off|zoom=11}}

See [[Customizing Leaflet Maps]] for a full overview of customization parameter, including examples.

== Displaying data ==

=== Markers ===

<pre><nowiki>
{{#display_map:Brandenburg Gate, Berlin, Germany}}
</nowiki></pre>

{{#display_map:Brandenburg Gate, Berlin, Germany|scrollzoom=off}}

You can display multiple locations by separating them with semicolons. And it is possible to use [[coordinates]] instead of location names.

<pre><nowiki>
{{#display_map:Berlin; Brussel; 40Â° 42' 46.02" N, 74Â° 0' 21.39" W}}
</nowiki></pre>

{{#display_map:Berlin; Brussel; 40Â° 42' 46.02" N, 74Â° 0' 21.39" W|scrollzoom=off}}

You can customize the markers per location. The syntax is:

<pre>Location~Popup title~Popup text~File:CustomIcon~Group~Inline label~File:VisitedIcon</pre>

* '''Location''': the location where to display the marker. Both [[coordinates]] and addresses are supported
* '''Popup title''' and '''Popup text''': optional content for a popup shown when the marker is clicked. No popup is shown if both are empty
* '''File:CustomIcon''': optional name of an image to display instead of the default marker
* '''Group''':
* '''Inline label''': optional label shown next to the marker. Currently only shown when using Google Maps
* '''File:VisitedIcon''': optional name of an image to display as marker when the marker is clicked

Example:

<pre>
{{#display_map:
Berlin~The city Berlin~Berlin is a really nice city and there is plenty of Club Mate~Red-marker.png;
Amsterdam~The city Amsterdam~Amsterdam is the capital of The Netherlands~Green-marker.png
}}
</pre>

{{#display_map:
Berlin~The city Berlin~Berlin is a really nice city and there is plenty of Club Mate~Red-marker.png;
Amsterdam~The city Amsterdam~Amsterdam is the capital of The Netherlands~Green-marker.png
| scrollwheelzoom=off
}}

=== Lines ===

Via the <code>lines</code> parameter you can display lines on the map. Each line has at least two locations. As with markers you can specify a popup title and text. You can also specify the looks of the line. The syntax is:

<pre>
First address:Second address:Optional third address:etc
~Popup title~Popup text~Line color~Line opacity~Line thickness
</pre>

Example:

<pre>
{{#display_map:lines=
Berlin:Brussels:London;
Amsterdam:Paris~Amsterdam to Paris line~I am a text~green~0.42~10
}}
</pre>

{{#display_map:lines=
Berlin:Brussels:London;
Amsterdam:Paris~Amsterdam to Paris line~I am a text~green~0.42~10
| scrollwheelzoom=off
}}

=== Polygons ===

Via the <code>polygons</code> parameter you can display polygons on the map. Each polygons has at least two locations. As with markers you can specify a popup title and text. You can also specify the looks of the polygon. The syntax is:

<pre>
First address:Second address:Optional third address
~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity
~Show only on hover
</pre>

Example:

<pre>
{{#display_map:polygons=
Berlin:Brussels:London;
Amsterdam:Paris:Frankfurt~I am a title~And I am a description~green~0.7~10~blue~0.5
}}
</pre>

{{#display_map:polygons=
Berlin:Brussels:London;
Amsterdam:Paris:Frankfurt~I am a title~And I am a description~green~0.7~10~blue~0.5
| scrollwheelzoom=off
}}

=== Circles ===

Via the <code>circles</code> parameter you can display circles on the map. Each circles has a center and a diameter. You can specify the popup title and text and the looks of the circle. The syntax is:

<pre>Address of the center:Diameter~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity</pre>

Example:

<pre>
{{#display_map:circles=
Amsterdam:500;
Amsterdam:100~I am a title~And I am a description~green~0.7~10~blue~0.5
| zoom=14
}}
</pre>

{{#display_map:circles=
Amsterdam:500;
Amsterdam:100~I am a title~And I am a description~green~0.7~10~blue~0.5
| scrollwheelzoom=off
| zoom=14
}}

=== Rectangles ===

Via the <code>rectangles</code> parameter you can display rectangles on the map. Each rectangle has a North East location and a South West location. You can specify the popup title and text and the looks of the rectangle. The syntax is:

<pre>
North East location:South West location
~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity
</pre>

Example:

<pre>
{{#display_map:rectangles=
Berlin:Brussels;
Amsterdam:London~I am a title~And I am a description~green~0.7~10~blue~0.5
}}
</pre>

{{#display_map:rectangles=
Berlin:Brussels;
Amsterdam:London~I am a title~And I am a description~green~0.7~10~blue~0.5
| scrollwheelzoom=off
}}

=== GeoJSON ===

As of version 5.6, Maps supports display of [https://en.wikipedia.org/wiki/GeoJSON GeoJSON] via the <code>geojson</code> parameter. See [[Leaflet_GeoJSON#GeoJSON_files|Leaflet GeoJSON files]].

== Alternative syntax ==

When you have many customized markers, using the <code>#display_map</code> parser function can get unwieldy. For this reason you can also use the <code><nowiki><display_map></nowiki></code> tag. It has all the same parameters as the parser function, the only difference is the syntax. Each location goes own its own line and they do not need to be separated with a semicolon.

Example:

<pre>
<display_map height="150px" scrollwheelzoom="off" service="leaflet">
Gent, Belgie~The city Ghent~Ghent is awesome~ ~ ~Ghent
Brussel~The city Brussel~The capital of Belgium~ ~ ~Brussels
Antwerp~The city Antwerp~ ~ ~ ~Antwerp
</display_map>
</pre>

<display_map height="150px" scrollwheelzoom="off" service="leaflet">
Gent, Belgie~The city Ghent~Ghent is awesome~ ~ ~Ghent
Brussel~The city Brussel~The capital of Belgium~ ~ ~Brussels
Antwerp~The city Antwerp~ ~ ~ ~Antwerp
</display_map>

Help:Displaying Leaflet maps - Revision history

Pbacsich at 16:08, 19 April 2023

Pbacsich at 16:07, 19 April 2023

Pbacsich at 16:05, 19 April 2023

Pbacsich: copy of the wiki page Displaying Leaflet maps on maps.extension.wiki