Map extension: display a map, a GPX or a GeoJSON file in a post

JeromeGillard

Flarum Map extension

A Flarum extension.
Display a map in flarum in those ways:

insert a BBCode in a post
upload a .gpx file to display it on a map and a download link
upload a GeoJSON file (.geojson of .json) display it on a map and a download link

To include a map in your post, there's an icon in the bar when composing:

It will insert that BBCode:

[map provider=osm style=street zoom=13 title='Marker title' desc='Marker pop-up content. Leave title and desc both empty to hide the marker.']WHERE[/map]

The WHERE value can be any location:

Nonceveux, Liège, Belgium as a plain text place name.
50.45626367636966, 5.744007900692774 as coordinates to pin point an exact place.

You can also change the zoom level by changing the zoom attribute within the BBCode:

# Zoom=13 can fit my village
[map provider=osm style=street zoom=13]Nonceveux[/map]

# Zoom=8 can fit my country
[map provider=osm style=street zoom=8]Belgium[/map]

Valid values for zoom are between 0 (world) and 18 (house).

How to customize the map

The post above was written like this:

# Mapbox satelite streets (need to register at MapBox.com to get a free API key) :
[map provider=mapbox style=mapbox/satellite-streets-v11 zoom=15]Nonceveux, Liège, Belgium[/map]

# GPX example:
[upl-file uuid=e89405b4-7c99-4af6-9fb3-8bd80df9ea64 size=2kB url=http://localhost/assets/files/2022-10-31/1667250318-401743-gpxexample.gpx]gpxexample.gpx[/upl-file]

# GeoJSON example:
[upl-file uuid=022d8589-8c9c-4e63-b0ad-1942b5a4b480 size=133kB url=http://localhost/assets/files/2022-10-11/1665509211-565647-trail-center-ambleve.geojson]trail-center-ambleve.geojson[/upl-file]

Supported tile layers

Free, no registration needed: OpenStreetMap.
| Provider | Style | Tiles type | Description |
| -------- | ----- | ---------- | ----------- |
| osm | street | Rasters | OpenStreetMap, default. |

MapTiler

Free, API key needed at https://www.maptiler.com/
| Provider | Style | Tiles type | Description |
| -------- | ----- | ---------- | ----------- |
| maptiler | basic-v2 | Vectors | Basic (basic-v2) |
| maptiler | basic-4326 | Vectors | Basic EPSG:4326 (basic-4326) |
| maptiler | bright-v2 | Vectors | Bright (bright-v2) |
| maptiler | openstreetmap | Vectors | OpenStreetMap (openstreetmap) |
| maptiler | outdoor | Vectors | Outdoor (outdoor) |
| maptiler | pastel | Vectors | Pasterl (pastel) |
| maptiler | hybrid | Vectors | Satelite hybrid (hybrid) |
| maptiler | streets-v2 | Vectors | Street (streets-v2) |
| maptiler | toner | Vectors | Toner (toner) |
| maptiler | topo | Vectors | Topo (topo) |
| maptiler | topographique | Vectors | Topographique (topographique) |
| maptiler | voyager | Vectors | Voyager (voyager) |
| maptiler | winter | Vectors | Winter (winter) |

MapBox

Free, API key needed at https://www.mapbox.com/
| Provider | Style | Tiles type | Description |
| -------- | ----- | ---------- | ----------- |
| mapbox | mapbox/streets-v11 | Vectors | Streets (mapbox/streets-v11) |
| mapbox | mapbox/outdoors-v11 | Vectors | Outdoors (mapbox/outdoors-v11) |
| mapbox | mapbox/light-v10 | Vectors | Light (mapbox/light-v10) |
| mapbox | mapbox/dark-v10 | Vectors | Dark (mapbox/dark-v10) |
| mapbox | mapbox/satellite-v9 | Vectors | Satelite (mapbox/satellite-v9) |
| mapbox | mapbox/satellite-streets-v11 | Vectors | Satelite streets (mapbox/satellite-streets-v11) |
| mapbox | mapbox/navigation-day-v1 | Vectors | Navigation day (mapbox/navigation-day-v1) |
| mapbox | mapbox/navigation-night-v1 | Vectors | Navigation night (mapbox/navigation-night-v1) |

ThunderForest

Free, API key needed at https://www.thunderforest.com/
| Provider | Style | Tiles type | Description |
| -------- | ----- | ---------- | ----------- |
| thunderforest | cycle | Rasters | cycle |
| thunderforest | transport | Rasters | transport |
| thunderforest | landscape | Rasters | landscape |
| thunderforest | outdoors | Rasters | outdoors |
| thunderforest | transport-dark | Rasters | transport-dark |
| thunderforest | spinal-map | Rasters | spinal-map |
| thunderforest | pioneer | Rasters | pioneer |
| thunderforest | mobile-atlas | Rasters | mobile-atlas |
| thunderforest | neighbourhood | Rasters | neighbourhood |
| thunderforest | atlas | Rasters | atlas |

Installation

Composer

Install with composer:

composer require jeromegillard/map:"*"

Configure extensions

Enable the FoF Uploads extension.
Enable the Map extension.
Configure FoF Uploads to add the new GPX Template:
- Write ^application\/.*(gpx|json|xml|geojson|geo.json) mime type upload adapter mapping.
- Select Map as template.
- Click the |+| button to add the mapping
Then add gpx,json,geojson extensions to this list:
:warning: Save changes (bottom of the screen)
Configure the Map extension (optional).

Updating

composer update jeromegillard/map:"*"
php flarum migrate
php flarum cache:clear

Go further

GeoJSON

FeatureCollection can be displayed.

As an example, to generate the GeoJSON file assets/GeoJSON.example.json to get a view of all trails of the Amblève Trail Center, follow those steps:

# Go to https://overpass-turbo.eu/
# Input that query:
[out:json][timeout:25];
(
  relation(13959062);>>;
)->.a;
rel.a;
out body;
>;
out skel qt;

# Click export, as GeoJSON

Development

I've prepared a all-in-one docker-compose file to get up and running to develop this Flarum extension easily.

Prepare the environment

create the flarum-dev.env.local file. There's an example just nearby.
Spin the containers: docker-compose up -d
Enter the container: docker exec -it -w /flarum/app flarum-dev /bin/sh
Allow local packages sources: composer config repositories.0 path "packages/*"
Install the extension: composer require jeromegillard/map *@dev
Wait for the container to start. It might be long stuck on last log "[INFO] Setting folder permissions", just wait.
You can browse to http://localhost when logs shows "[INFO] End of startup script. Forum is starting."
To rebuild the front-end, outside the container, go to the js folder and do npm install then npm run dev (you'll need npm installed on your computer).

Links

MikeJones

JeromeGillard Looks awesome! Now I want to know what flarum you built this for! We may have similar interests ;-)

luceos

What an amazing first contribution Jerome, oh wow! You even added a fof upload upload type (this.. is not going to stick).

Well done! Very well done!

JeromeGillard

luceos Thanks a lot. It just all started because I wanted those functionalities for my own use.

What do you mean by the upload type is not going to stick? Will that extension evolve/be replaced? I found it very hard to find documented codes to achieve it. Anyway I'll try to follow it.

Do not hesitate to test it and report issues on Github, I need peer review.

luceos

JeromeGillard What do you mean by the upload type is not going to stick?

No I meant the terminology I used "fof upload upload type" 😂 All is fine, I don't expect any radical changes soon.

huguadao

I just need the plug-in to use BBcode to display the approximate regional location (of course, it is better to mark the location accurately). How should I get such a geographical location code? Thank you～

[osm provider=mapbox style=mapbox/satellite-streets-v11 zoom= 12JNonceveuxl/asm]

JeromeGillard

huguadao Hi, there was an outdated BBCode [osm in my screenshot, sorry. I've now updated the documentation (see first post).

The easy way to display a map of the location Nonceveux, Liège, Belgium (this is my village) is:

[map provider=osm style=street zoom=13]Nonceveux[/map]

Now if you want to pin point an exact point on a map, you can provide coordinates within the BBCode:

[map provider=osm style=street zoom=13]50.45626367636966, 5.744007900692774[/map]

MikeJones Thanks! I've deployed it on my village's website to display mountain bike trails: Nonceveux.be

New Release v0.1.3

Fix bug with BBCode style override,
Added documentation.
Enforce style override check
add MapTiler provider
add SVG tiles support for MapTiler & Mapbox
support rendering maps within Pages (fof/pages), browsed trough Links (fof/links)

Here's how to update.

huguadao

JeromeGillard Hello, I configured it according to the profile, but the map was not displayed!

demo link：https://u2di.com/d/2

JeromeGillard

huguadao Thanks for your precious feedback. I mistakenly assumed you've registered to MapTiler or MapBox to get an API key, sorry.

This should work out of the box:

[map provider=osm style=street zoom=8]Belgium[/map]

If you want to use another map tiles provider or style, refer to the doc above.

Hope this helps 🙂

JeromeGillard

New release v0.1.4

Update placeholder to not confuse end-users.
Improve documentation
Add French localization
Tested with Flarum 1.5.0
Bump loader-utils from 2.0.2 to 2.0.4 in /js

Here's how to upgrade:

composer update jeromegillard/map:"*"
php flarum migrate
php flarum cache:clear

JeromeGillard

New release v0.1.6

Marker can be displayed on map. Thanks to @brian-guru @bientran 🎉
Security update (from v0.1.5)

azbce

This is awesome and works perfectly! Thank you!

I have created my own XYZ base map at 'https://azbackroads.com/maps/basemap/az_basemap/{z}/{x}/{y}.png'

How can I use this base map as the default map?

huguadao

I finally succeeded in using it, but I used this method to obtain accurate coordinate values https://landbbs.com/d/4 . I don't know if it's possible to introduce another process in the map plugin:

publish a post - click on the map icon - pop up a mini map window, select the marked point location - confirm - insert bbcode code containing coordinate values

Litalino

JeromeGillard/flarum-map11 << Update fof-upload V1.5.0 error

https://discuss.flarum.org/d/4154-friendsofflarum-upload-the-intelligent-file-attachment-extension/2247

FIX public_html/vendor/jeromegillard/map/src/Templates/MapTemplate.php JeromeGillard/flarum-map12

<?php

namespace JeromeGillard\FlarumMap\Templates;

//use FoF\Upload\Templates\AbstractTextFormatterTemplate;
use FoF\Upload\Templates\AbstractTemplate;
use Illuminate\Contracts\View\View;
use FoF\Upload\File;

/*
 * This class handles the fof-upload formatter
 */
class MapTemplate extends AbstractTemplate
{
    /**
     * @var string
     */
    protected $tag = 'jeromegillard-map';

    /**
     * The human readable name of the template.
     *
     * @return string
     */
    public function name(): string
    {
        return $this->trans('jeromegillard-map.admin.templates.map');
    }

    /**
     * {@inheritdoc}
     */
    public function description(): string
    {
        return $this->trans('jeromegillard-map.admin.templates.file_description');
    }

    /**
     * The xsl template to use with this tag.
     *
     * @return string
     */
    public function template(): View
    {
        return $this->getView('fof-upload.templates::jeromegillard-map');
    }

    /**
     * The bbcode to be parsed.
     *
     * @return string
     */
    public function bbcode(): string
    {
        return '[upl-file uuid={IDENTIFIER} size={SIMPLETEXT2} url={URL}]{SIMPLETEXT1}[/upl-file]';
    }

    

    public function preview(File $file): string
    {
        //return "[upl-file uuid={$file->uuid} preview_uri={$file->url} fullscreen_uri={URL}]";
        return "[upl-file uuid={$file->uuid} name={$file->base_name} size={$file->humanSize}]";
        //return $file->url;
    }
}

Litalino

Plugin error : Not show media /// Disabling the plugin works fine

My media not show file 🇦

Admin View User 🇦

JeromeGillard

New release v0.1.9

Fix: Update MapTemplate.php fof-upload 1.5.0 thanks to @Litalino. This will prevent Flarum to crash but uploaded files (GPX or GeoJSON) can't be displayed anymore.

Here's how to upgrade:

composer update jeromegillard/map:"*"
php flarum migrate
php flarum cache:clear

wallforfry

Hi @JeromeGillard !
Is there any fix incoming for the GPX viewer ?

eddiewebb

Checkout version 2.0.5 of eddiewebb/flarum-gpx-preview which is not as feature rich but will embed interactive map of GPX files.

Image showing embeded google map from gpx file