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

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]

MikeJones

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

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

baolinhtv

Hi i can add use bbcode example
but with button it freeze when i clicked
console error
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'selectionStart') at mapBBCode.js:7:21

damuji

Hello I configured at the ext but the map doesn't shows.
Thanks!!!