Using Leaflet to design a Disc Golf Course: Difference between revisions

Revision as of 15:05, 2 October 2025

tldr; There is a quick 3-step process to make maps:

Draft your map at geojson.io (because it's quick, has a good UI, supports multiple shapes and generates the JSON data).
Copy/paste the JSON data into the GeoJson namespace on this site to "save" it for use or refinement.
Use "#display_map" on any page on this site to embed/display the saved map data.

That's it!

From there, you can edit or revise the map data from either the display page, or the underlying data page. And, it's simple to copy/paste the JSON back and forth between here and GeoJSON.io too if you want to use that edit interface.

This is an example of how to create maps in this wiki

Example[edit]

The mapping capabilities of this site depend naturally on the Maps Extension. That wonderful extension supports map data in the GeoJson format.

We used GeoJson.io to quickly come up with the JSON to design a 'back of the napkin' sketch of a Disc Golf Course. The process and results compared favorably to some of the other mapping tools. This is what I did for Partridge Brook Park Disc Golf Course

Step 1 Create JSON[edit]

Go to https://geojson.io and draw a map.

We ended up at https://geojson.io/#map=17.15/42.855467/-70.863373 where we could draw in the browser with a satellite imagery basemap and the JSON data is displayed in a panel next to the drawing.

Step 2: Create a page to save the JSON[edit]

We created GeoJson:PartridgeBrookParkDG and copy/pasted what we got from step 1.

(You can name the page whatever you like, but it has to be in the GeoJSON namespace).

Step 3: Display or embed the map on a content page.[edit]

Use the #display_map parser function to show your map on any content page.

You can edit the map from either the "display page", or the underlying map data page - it's the same data and result.

{{#display_map: center="-70.864801793366439,42.854582093535043" | geojson=PartridgeBrookParkDG | scrollwheelzoom=off | service=leaflet }} displays the data which is stored in GeoJson:PartridgeBrookParkDG, resulting in the map shown here.

Note: The alternate display_map tag syntax for the Maps extension is not compatible with GeoJSON data. In other words, this won't work: <display_map center="-70.864801793366439,42.854582093535043" geojson="PartridgeBrookParkDG" height="450px" scrollwheelzoom="off" service="leaflet"></display_map> That's because the tag syntax is ideal for showing multiple markers, each on their own line whereas GeoJSON is a data file.)

Loading map...

Circles[edit]

While Leaflet does allow to draw circles with a point and a radius. The circles that you draw in GeoJson.io are not true circles. Instead they are polygons made up of dozens of points on an arc that approximate a circle. So, your data gets bulky and hard to edit.

References[edit]

@@ Line 1: / Line 1: @@
-{{Messagebox|text=This is an example of how to create maps in this wiki|type=success}}
+'''tldr;''' There is a quick 3-step process to make maps:
+# Draft your map at geojson.io (because it's quick, has a good UI, supports multiple shapes and generates the JSON data).
+# Copy/paste the JSON data into the GeoJson namespace on this site to "save" it for use or refinement.
+# Use "#display_map" on any page on this site to embed/display the saved map data.
+That's it!
+From there, you can edit or revise the map data from either the display page, or the underlying data page. And, it's simple to copy/paste the JSON back and forth between here and GeoJSON.io too if you want to use that edit interface.{{Messagebox|text=This is an example of how to create maps in this wiki|type=success}}
+== Example ==
 [[File:Partridge Brook Park Disc Golf Course 18-hole layout.png|alt=18-hole disc golf course - green beginner course|thumb|Partridge Brook Park Disc Golf Course (PBPDGC) possible layout]]
-Using the [[Maps]] Extension (and with some help from '''[https://geojson.io GeoJson.io]''' to quickly come up with the JSON) you can design a 'back of the napkin' sketch of a Disc Golf Course very easily compared to some of the other mapping tools. This is what I did for [[Partridge Brook Park Disc Golf Course]] By visiting https://geojson.io/#map=17.15/42.855467/-70.863373 you can draw in your browser with a satellite imagery basemap to generate the JSON that you would copy into this site.
+The mapping capabilities of this site depend naturally on the [[Maps]] Extension. That wonderful extension supports map data in the GeoJson format.
-Example:
+We used '''[https://geojson.io GeoJson.io]''' to quickly come up with the JSON to design a 'back of the napkin' sketch of a Disc Golf Course. The process and results compared favorably to some of the other mapping tools. This is what I did for [[Partridge Brook Park Disc Golf Course]]
-Using the '''#display_map''' parser function <code><nowiki>{{#display_map: center="-70.864801793366439,42.854582093535043" | geojson=PartridgeBrookParkDG | scrollwheelzoom=off | service=leaflet }}</nowiki></code> displays the '''data''' which is stored in [[GeoJson:PartridgeBrookParkDG]]. If you have edit rights in this wiki, you can edit both this page, and the underlying map data. Note: The alternate '''display_map''' tag syntax does not appear to be compatible with GeoJSON data e.g. this won't work: <code><nowiki><display_map center="-70.864801793366439,42.854582093535043" geojson="PartridgeBrookParkDG" height="450px" scrollwheelzoom="off" service="leaflet"></display_map></nowiki></code> (The tag syntax is ideal for showing multiple markers, each on their own line.)
-{{#display_map: center="-70.864801793366439,42.854582093535043" | geojson=PartridgeBrookParkDG | scrollwheelzoom=off | service=leaflet }}
+=== Step 1 Create JSON ===
+Go to [https://geojson.io/#map=17.15/42.855467/-70.863373 https://geojson.io] and draw a map.
+We ended up at https://geojson.io/#map=17.15/42.855467/-70.863373 where we could draw in the browser with a satellite imagery basemap and the JSON data is displayed in a panel next to the drawing.
+=== Step 2: Create a page to save the JSON ===
+We created [[GeoJson:PartridgeBrookParkDG]] and copy/pasted what we got from step 1.
+(You can name the page whatever you like, but it has to be in [https://wiki.freephile.org/wiki/Special:PrefixIndex?prefix=&namespace=420 the GeoJSON namespace]).
+=== Step 3: Display or embed the map on a content page. ===
+Use the <code>#display_map</code> '''parser function''' to show your map on any content page.
+You can edit the map from either the "display page", or the underlying map data page - it's the same data and result.
+<code><nowiki>{{#display_map: center="-70.864801793366439,42.854582093535043" | geojson=PartridgeBrookParkDG | scrollwheelzoom=off | service=leaflet }}</nowiki></code> displays the '''data''' which is stored in [[GeoJson:PartridgeBrookParkDG]], resulting in the map shown here.
-The process is a quick 3-step process to make personalized maps:
+Note: The alternate <code>display_map</code> '''tag syntax''' for the Maps extension is not compatible with GeoJSON data. In other words, this won't work: <code><nowiki><display_map center="-70.864801793366439,42.854582093535043" geojson="PartridgeBrookParkDG" height="450px" scrollwheelzoom="off" service="leaflet"></display_map></nowiki></code> That's because the tag syntax is ideal for showing multiple markers, each on their own line whereas GeoJSON is a data file.)
-# Draft the map at geojson.io (because it's quick, has a good UI, supports multiple shapes and generates the JSON data).
+{{#display_map: center="-70.864801793366439,42.854582093535043" | geojson=PartridgeBrookParkDG | scrollwheelzoom=off | service=leaflet }}
-# Copy/paste the JSON data into the GeoJson namespace on this site to "save" it for use or refinement.
-# Use "#display_map" on any page on this site to embed/display the saved map data.
-# You can edit or revise the map data from either the display page, or the underlying data page. And, it's simple to copy/paste the JSON back and forth between here and GeoJSON.io too if you want to use that edit interface.
 == See Also ==