Merge pull request #2 from JeromeGillard/main

Next release 0.1.4
JeromeGillard · Nov 12, 2022 · cf15ea4 · cf15ea4
2 parents d4cc9ec + b3d9b2b
commit cf15ea4
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,40 @@
 # Flarum Map extension
 
-[![MIT license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/FriendsOfFlarum/upload/blob/master/LICENSE.md) [![Latest Stable Version](https://img.shields.io/packagist/v/jeromegillard/map.svg)](https://packagist.org/packages/jeromegillard/map) [![Total Downloads](https://img.shields.io/packagist/dt/jeromegillard/map.svg)](https://packagist.org/packages/jeromegillard/map)
+[![MIT license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/JeromeGillard/flarum-map/blob/main/LICENSE.md) [![Latest Stable Version](https://img.shields.io/packagist/v/jeromegillard/map.svg)](https://packagist.org/packages/jeromegillard/map) [![Total Downloads](https://img.shields.io/packagist/dt/jeromegillard/map.svg)](https://packagist.org/packages/jeromegillard/map) [![](https://img.shields.io/github/issues-raw/jeromegillard/flarum-map)](https://github.com/JeromeGillard/flarum-map/issues) [![](https://img.shields.io/github/issues-pr-raw/jeromegillard/flarum-map)](https://github.com/JeromeGillard/flarum-map/pulls)
 
 A [Flarum](http://flarum.org) 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
 
- ![Snaphost](assets/readme-snapshot.png)  
+ ![Snaphost](https://raw.githubusercontent.com/JeromeGillard/flarum-map/main/assets/readme-snapshot.png)  
+
+To include a map in your post, there's an icon in the bar when composing:  
+![Post icon](https://raw.githubusercontent.com/JeromeGillard/flarum-map/main/assets/readme-post-icon.png)
+
+It will insert that BBCode:
+```
+[map provider=osm style=street zoom=13]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:
+# 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:
@@ -20,76 +43,91 @@ The post above was written like this:
 # 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]
 ```
-There's an icon to help you insert a map in your post:
- ![Post icon](assets/readme-post-icon.png)
+
 
  ## Supported tile layers
+ Free, no registration needed: OpenStreetMap.
  | Provider | Style | Tiles type | Description |
  | -------- | ----- | ---------- | ----------- |
- |  MapTiler | `basic-v2` | Vectors | [Basic (basic-v2)](https://cloud.maptiler.com/maps/basic-v2/) |
- |  MapTiler | `basic-4326` | Vectors | [Basic EPSG:4326 (basic-4326)](https://cloud.maptiler.com/maps/basic-4326/) |
- |  MapTiler | `bright-v2` | Vectors | [Bright (bright-v2)](https://cloud.maptiler.com/maps/bright-v2/) |
- |  MapTiler | `openstreetmap` | Vectors | [OpenStreetMap (openstreetmap)](https://cloud.maptiler.com/maps/openstreetmap/) |
- |  MapTiler | `outdoor` | Vectors | [Outdoor (outdoor)](https://cloud.maptiler.com/maps/outdoor/) |
- |  MapTiler | `pastel` | Vectors | [Pasterl (pastel)](https://cloud.maptiler.com/maps/pastel/) |
- |  MapTiler | `hybrid` | Vectors | [Satelite hybrid (hybrid)](https://cloud.maptiler.com/maps/hybrid/) |
- |  MapTiler | `streets-v2` | Vectors | [Street (streets-v2)](https://cloud.maptiler.com/maps/streets-v2/) |
- |  MapTiler | `toner` | Vectors | [Toner (toner)](https://cloud.maptiler.com/maps/toner/) |
- |  MapTiler | `topo` | Vectors | [Topo (topo)](https://cloud.maptiler.com/maps/topo/) |
- |  MapTiler | `topographique` | Vectors | [Topographique (topographique)](https://cloud.maptiler.com/maps/topographique/) |
- |  MapTiler | `voyager` | Vectors | [Voyager (voyager)](https://cloud.maptiler.com/maps/voyager/) |
- |  MapTiler | `winter` | Vectors | [Winter (winter)](https://cloud.maptiler.com/maps/winter/) |
- |  OpenStreetMap | | Rasters | [OpenStreetMap](https://www.openstreetmap.org) | 
- |  MapBox | `mapbox/streets-v11` | Vectors | [Streets (mapbox/streets-v11)](https://www.mapbox.com/maps/streets) |
- |  MapBox | `mapbox/outdoors-v11` | Vectors | [Outdoors (mapbox/outdoors-v11)](https://www.mapbox.com/maps/outdoors) |
- |  MapBox | `mapbox/light-v10` | Vectors | [Light (mapbox/light-v10)](https://www.mapbox.com/maps/light) |
- |  MapBox | `mapbox/dark-v10` | Vectors | [Dark (mapbox/dark-v10)](https://www.mapbox.com/maps/dark) |
- |  MapBox | `mapbox/satellite-v9` | Vectors | [Satelite (mapbox/satellite-v9)](https://www.mapbox.com/maps/satellite) |
- |  MapBox | `mapbox/satellite-streets-v11` | Vectors | [Satelite streets (mapbox/satellite-streets-v11)](https://docs.mapbox.com/help/getting-started/satellite-imagery/) |
- |  MapBox | `mapbox/navigation-day-v1` | Vectors | [Navigation day (mapbox/navigation-day-v1)](https://api.mapbox.com/styles/v1/mapbox/navigation-day-v1.html?access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg#13/40.41695/-3.70192) |
- |  MapBox | `mapbox/navigation-night-v1` | Vectors | [Navigation night (mapbox/navigation-night-v1)](https://api.mapbox.com/styles/v1/mapbox/navigation-night-v1.html?access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg#13/40.41695/-3.70192) |
- |  ThunderForest | `cycle` | Rasters | [cycle](https://www.thunderforest.com/maps/opencyclemap/) |
- |  ThunderForest | `transport` | Rasters | [transport](https://www.thunderforest.com/maps/transport/) |
- |  ThunderForest | `landscape` | Rasters | [landscape](https://www.thunderforest.com/maps/landscape/) |
- |  ThunderForest | `outdoors` | Rasters | [outdoors](https://www.thunderforest.com/maps/outdoors/) |
- |  ThunderForest | `transport-dark` | Rasters | [transport-dark](https://www.thunderforest.com/maps/transport-dark/) |
- |  ThunderForest | `spinal-map` | Rasters | [spinal-map](https://www.thunderforest.com/maps/spinal-map/) |
- |  ThunderForest | `pioneer` | Rasters | [pioneer](https://www.thunderforest.com/maps/pioneer/) |
- |  ThunderForest | `mobile-atlas` | Rasters | [mobile-atlas](https://www.thunderforest.com/maps/mobile-atlas/) |
- |  ThunderForest | `neighbourhood` | Rasters | [neighbourhood](https://www.thunderforest.com/maps/neighbourhood/) |
- |  ThunderForest | `atlas` | Rasters | [atlas](https://www.thunderforest.com/maps/atlas/) |
-
-## Installation
-
-### Composer
+ |  `osm` | `street` | Rasters | [OpenStreetMap](https://www.openstreetmap.org), default. | 
+
+### MapTiler
+Free, API key needed at https://www.maptiler.com/
+ | Provider | Style | Tiles type | Description |
+ | -------- | ----- | ---------- | ----------- |
+ |  `maptiler` | `basic-v2` | Vectors | [Basic (basic-v2)](https://cloud.maptiler.com/maps/basic-v2/) |
+ |  `maptiler` | `basic-4326` | Vectors | [Basic EPSG:4326 (basic-4326)](https://cloud.maptiler.com/maps/basic-4326/) |
+ |  `maptiler` | `bright-v2` | Vectors | [Bright (bright-v2)](https://cloud.maptiler.com/maps/bright-v2/) |
+ |  `maptiler` | `openstreetmap` | Vectors | [OpenStreetMap (openstreetmap)](https://cloud.maptiler.com/maps/openstreetmap/) |
+ |  `maptiler` | `outdoor` | Vectors | [Outdoor (outdoor)](https://cloud.maptiler.com/maps/outdoor/) |
+ |  `maptiler` | `pastel` | Vectors | [Pasterl (pastel)](https://cloud.maptiler.com/maps/pastel/) |
+ |  `maptiler` | `hybrid` | Vectors | [Satelite hybrid (hybrid)](https://cloud.maptiler.com/maps/hybrid/) |
+ |  `maptiler` | `streets-v2` | Vectors | [Street (streets-v2)](https://cloud.maptiler.com/maps/streets-v2/) |
+ |  `maptiler` | `toner` | Vectors | [Toner (toner)](https://cloud.maptiler.com/maps/toner/) |
+ |  `maptiler` | `topo` | Vectors | [Topo (topo)](https://cloud.maptiler.com/maps/topo/) |
+ |  `maptiler` | `topographique` | Vectors | [Topographique (topographique)](https://cloud.maptiler.com/maps/topographique/) |
+ |  `maptiler` | `voyager` | Vectors | [Voyager (voyager)](https://cloud.maptiler.com/maps/voyager/) |
+ |  `maptiler` | `winter` | Vectors | [Winter (winter)](https://cloud.maptiler.com/maps/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)](https://www.mapbox.com/maps/streets) |
+ |  `mapbox` | `mapbox/outdoors-v11` | Vectors | [Outdoors (mapbox/outdoors-v11)](https://www.mapbox.com/maps/outdoors) |
+ |  `mapbox` | `mapbox/light-v10` | Vectors | [Light (mapbox/light-v10)](https://www.mapbox.com/maps/light) |
+ |  `mapbox` | `mapbox/dark-v10` | Vectors | [Dark (mapbox/dark-v10)](https://www.mapbox.com/maps/dark) |
+ |  `mapbox` | `mapbox/satellite-v9` | Vectors | [Satelite (mapbox/satellite-v9)](https://www.mapbox.com/maps/satellite) |
+ |  `mapbox` | `mapbox/satellite-streets-v11` | Vectors | [Satelite streets (mapbox/satellite-streets-v11)](https://docs.mapbox.com/help/getting-started/satellite-imagery/) |
+ |  `mapbox` | `mapbox/navigation-day-v1` | Vectors | [Navigation day (mapbox/navigation-day-v1)](https://api.mapbox.com/styles/v1/mapbox/navigation-day-v1.html?access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg#13/40.41695/-3.70192) |
+ |  `mapbox` | `mapbox/navigation-night-v1` | Vectors | [Navigation night (mapbox/navigation-night-v1)](https://api.mapbox.com/styles/v1/mapbox/navigation-night-v1.html?access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg#13/40.41695/-3.70192) |
+
+### ThunderForest
+Free, API key needed at https://www.thunderforest.com/
+ | Provider | Style | Tiles type | Description |
+ | -------- | ----- | ---------- | ----------- |
+ |  `thunderforest` | `cycle` | Rasters | [cycle](https://www.thunderforest.com/maps/opencyclemap/) |
+ |  `thunderforest` | `transport` | Rasters | [transport](https://www.thunderforest.com/maps/transport/) |
+ |  `thunderforest` | `landscape` | Rasters | [landscape](https://www.thunderforest.com/maps/landscape/) |
+ |  `thunderforest` | `outdoors` | Rasters | [outdoors](https://www.thunderforest.com/maps/outdoors/) |
+ |  `thunderforest` | `transport-dark` | Rasters | [transport-dark](https://www.thunderforest.com/maps/transport-dark/) |
+ |  `thunderforest` | `spinal-map` | Rasters | [spinal-map](https://www.thunderforest.com/maps/spinal-map/) |
+ |  `thunderforest` | `pioneer` | Rasters | [pioneer](https://www.thunderforest.com/maps/pioneer/) |
+ |  `thunderforest` | `mobile-atlas` | Rasters | [mobile-atlas](https://www.thunderforest.com/maps/mobile-atlas/) |
+ |  `thunderforest` | `neighbourhood` | Rasters | [neighbourhood](https://www.thunderforest.com/maps/neighbourhood/) |
+ |  `thunderforest` | `atlas` | Rasters | [atlas](https://www.thunderforest.com/maps/atlas/) |
+
+# Installation
+
+## Composer
 Install with composer:
 
 ```sh
 composer require jeromegillard/map:"*"
 ```
 
-### Configure extensions
+## Configure extensions
 1. Enable the `FoF Uploads` extension.
 2. Enable the `Map` extension.
 3. Configure `FoF Uploads` to add the new GPX Template: 
-  - Add `^application\/.*(gpx|json|xml|geojson|geo.json)` mime type upload adapter mapping.
-  - Select `Map` as template.  
-![Setup FoF Upload MIME type](assets/readme-fof-upload-mime.png)  
+  - Write `^application\/.*(gpx|json|xml|geojson|geo.json)` mime type upload adapter mapping.
+  - Select `Map` as template. 
+  - Click the `|+|` button to add the mapping
+![Setup FoF Upload MIME type](https://raw.githubusercontent.com/JeromeGillard/flarum-map/main/assets/readme-fof-upload-mime.png)  
 4. Then add `gpx,json,geojson` extensions to this list:  
-![Setup FoF Upload MIME type](assets/readme-fof-upload-extensions.png)  
-5. Configure the `Map` extension (optional).
-
-
-:warning: Don't forget to save your changes!
+![Setup FoF Upload MIME type](https://raw.githubusercontent.com/JeromeGillard/flarum-map/main/assets/readme-fof-upload-extensions.png)  
+5. :warning: **Save changes** (bottom of the screen)
+6. Configure the `Map` extension (optional).
 
-## Updating
+# Updating
 
 ```sh
 composer update jeromegillard/map:"*"
 php flarum migrate
 php flarum cache:clear
 ```
 
+# Go further
 ## GeoJSON
 
 FeatureCollection can be displayed.
@@ -124,7 +162,7 @@ I've prepared a all-in-one `docker-compose` file to get up and running to develo
 1. You can browse to `http://localhost` when logs shows "[INFO] End of startup script. Forum is starting."
 1. 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
+# Links
 
 - [Packagist](https://packagist.org/packages/jeromegillard/map)
 - [GitHub](https://github.com/JeromeGillard/flarum-map)

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -6,7 +6,7 @@ version: "3.7"
 
 services:
   flarum-dev:
-    image: mondedie/flarum:stable
+    image: jeromegillard/flarum
     container_name: flarum-dev
     env_file:
       - .env

diff --git a/js/dist/forum.js b/js/dist/forum.js
diff --git a/js/dist/forum.js.map b/js/dist/forum.js.map
diff --git a/js/package-lock.json b/js/package-lock.json
diff --git a/js/src/forum/components/mapConfigHelper.js b/js/src/forum/components/mapConfigHelper.js
@@ -268,7 +268,7 @@ export function createMap(pid) {
       $(this).data('mapStyle'),
       $(this).data('mapZoom')
     )
-    console.log(mapConf, $(this).data('mapStyle'));
+    //console.log(mapConf, $(this).data('mapStyle'));
     const nid = 'map-'+Math.floor(Math.random() * 1000);
     $(this).prop('id', nid);
 

diff --git a/locale/en.yml b/locale/en.yml
@@ -1,17 +1,12 @@
 jeromegillard-map:
-  # For more details on the format
-  # Checkout https://docs.flarum.org/extend/i18n/#appendix-a-standard-key-format
   admin:
     templates:
       map: Map
       file_description: Display a map in flarum. The original file will be available to download. The tiles provider and style will be the one defined in the extension's settings. <b>You must have flarum/bbcode installed and enabled for this to work</b>.
-      markdown-osm: Markdown map
-      markdown-osm_description: Markdown map description
     settings:
       tiles_provider:
         label: Default tiles layer provider
         help: Select the provider of the tiles layer that appears in the background
-        link: See here
       zoom:
         label: Default zoom level
         help: Any integer from 0 to 18.
@@ -22,7 +17,7 @@ jeromegillard-map:
         label: MapTiler token
         help: Register for free at <a>maptiler.com</a> to get a token. Please respect their <b>copyrights</b>.
       osm:
-        help: OpenStreetMap tiles are fine for programming your Leaflet map, but read the <a>Tile Usage Policy</a> of OpenStreetMap if you’re going to use the tiles in production.
+        help: OpenStreetMap tiles are fine for programming your map, but read the <a>Tile Usage Policy</a> of OpenStreetMap if you’re going to use the tiles in production.
       mapbox:
         label: Mapbox key
         help: Register for free at <a>mapbox.com</a> to get a token. Please respect their <b>copyrights</b>.
@@ -34,4 +29,4 @@ jeromegillard-map:
   forum:
     text_editor:
       bbcode_tooltip: insert a map
-      location_placeholder: WHERE?
+      location_placeholder: WHERE
diff --git a/locale/fr.yml b/locale/fr.yml
@@ -0,0 +1,32 @@
+jeromegillard-map:
+  admin:
+    templates:
+      map: Plan
+      file_description: Affiche un plan dans Flarum. Le fichier original sera disponible au téléchargement. Le fournisseur et le style des tuiles seront ceux définis dans les paramètres de l'extension. <b>Vous devez avoir flarum/bbcode installé et activé pour que cela fonctionne</b>.
+    settings:
+      tiles_provider:
+        label: Fournisseur de couches de tuiles par défaut
+        help: Sélectionnez le fournisseur de la couche de tuiles qui apparaît en arrière-plan
+      zoom:
+        label: Niveau de zoom par défaut
+        help: Nombre compris entre 0 et 18.
+      style:
+          label: Style par défaut pour {provider}
+          help: Choisissez un style de carte. <a>Découvrez leurs styles</a>.
+      maptiler:
+        label: Jeton MapTiler
+        help: Inscrivez-vous gratuitement sur <a>maptiler.com</a> pour obtenir un jeton. Veuillez respecter leurs <b>droits d'auteur</b>.
+      osm:
+        help: Les tuiles OpenStreetMap conviennent à la programmation de votre carte, mais lisez la <a>Politique d'utilisation des tuiles</a> d'OpenStreetMap si vous prévoyez d'utiliser les tuiles en production.
+      mapbox:
+        label: Jeton Mapbox
+        help: Inscrivez-vous gratuitement sur <a>mapbox.com</a> pour obtenir un jeton. Veuillez respecter leurs <b>droits d'auteur</b>.
+      thunderforest:
+        label: Clé d'API Thunderforest
+        help: Inscrivez-vous gratuitement sur <a>thunderforest.com</a> pour obtenir une clé API. Veuillez respecter leurs <b>conditions d'utilisation</b>.
+
+
+  forum:
+    text_editor:
+      bbcode_tooltip: insérer une carte
+      location_placeholder: LIEU