feat: release 1.0.0

README.md

@@ -4,17 +4,17 @@
 [![License](https://img.shields.io/github/license/MesseBasseProduction/MesseMap.svg)](https://github.com/MesseBasseProduction/MesseMap/blob/main/LICENSE)
 [![Doc](https://badgen.net/badge/documentation/written/green)](https://messebasseproduction.github.io/MesseMap/doc/index.html)
 
-A website that help you to create a map poster, so it can be exported ready to print, with the ability to scale the map for to given size. Different map layers available to create your unique *wall-memory* touch!
+A website that helps you to create a map poster, so it can be exported ready to print, with the ability to scale the map to a given size. Different map layers available to create your unique *wall-memory* touch!
 
-It features 7 poster styles, that can all be customized (positioning, colors). It allows user to define a title, a subtitle and a comment for their map. Each of these text's color can also be modified.
+It features 7 poster styles so far, that can all be customized (positioning, colors). It allows user to define a title, a subtitle and a comment for their map. Each of these text's color can also be modified. Available in 7 languages, translations welcome.
 
 Wanna try it ? We are running a [MesseMap instance](https://messemap.org) just for you! 
 
-[![Interface Screenshot](./assets/img/demo.png)](https://messemap.org)
+[![Interface Screenshot](/assets/img/demo.png)](https://messemap.org)
 
 When exporting the map to disk the user can set the output dimension, the lowest resolution being A7 at 300 dpi (600 x 848) and the highest being A2 at 300 dpi (6500 x 9193). The user can also set the output format, between `.png`, `.jpg`, `.webp` and `.pdf` (exports in PDF are done in the CYMK color space so they're ready to print). 
 
-**On Google Chrome, exproting large maps may lead to grey tiles. Unfortunatly this is a known ressource issue with Chrome ; please try with Firefox or non-webkit based browsers in the meantime.**
+**On Google Chrome, exporting large maps may lead to grey tiles. Unfortunatly this is a known ressource issue with Chrome ; please try with Firefox or non-webkit based browsers in the meantime.**
 
 ## Get started
 
@@ -28,12 +28,16 @@ It will expose the application on your localhost, port 8010. Saved posters will
 
 ## Map data
 
-All maps are released under [ODbL license](https://opendatacommons.org/licenses/odbl/). MesseMap is using open source maps released by [OpenStreetMap](https://www.openstreetmap.fr/), [GeoPortail](https://www.geoportail.gouv.fr/), [ESRI](https://www.esri.com/) and [Mapiful](https://www.mapiful.com/) providing astonishing data ready to use. A very warm thanks to those heroes!
+All maps are released under [ODbL license](https://opendatacommons.org/licenses/odbl/). MesseMap is using open source maps released by [OpenStreetMap](https://www.openstreetmap.fr/), [ESRI](https://www.esri.com/), [Carto](https://carto.com/basemaps/), [Mapiful](https://www.mapiful.com/) and [Stamen](http://maps.stamen.com) providing astonishing data ready to use. A very warm thanks to those heroes!
 
 ## Libraries
 
 The map handling is done using [Leaflet.js](https://leafletjs.com/) (BSD-2-Clause license), a Leaflet plugin to enable a smooth zooming, [SmoothWheelZoom](https://github.com/mutsuyuki/Leaflet.SmoothWheelZoom) (MIT license), another Leaflet plugin [Leaflet Control Search](https://github.com/stefanocudini/leaflet-search) (MIT license) to perform searches on the map, it uses [html2canvas](https://html2canvas.hertzen.com/) (MIT license), [html2canvas-proxy-nodejs](https://github.com/niklasvh/html2canvas-proxy-nodejs) (MIT license) and [jsPDF](https://github.com/parallax/jsPDF) (MIT license) to allow the exporting in all supported formats.
 
-## For geeks
+## Bonnus : Map tiles downloader
 
-This repository also includes a Python script, that will fetch and save to your disk tiles for a given map. It features several options, to download the map tiles by zone (Lat/Lng min and max point and zoom range) or as a whole (but beware, maps are huge in size terms). Just start the script with no arguments to begin `python ./MapDownloader.py`.
+This repository also includes a Python script, that will fetch and save to your disk tiles for a given map. It features several options, to download the map tiles by zone (Lat/Lng min and max point and zoom range) or as a whole (but beware, maps are huge in size terms). Just start the script with no arguments to begin `python ./src/py/MapDownloader.py` and fill the required information, then you can have one or several coffees.
+
+---
+
+[Messe Basse Production](https://github.com/MesseBasseProduction) --- 2022 / 2023

assets/html/about.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>MesseMap | Documentation</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta content="ie=edge" http-equiv="x-ua-compatible">
+  <meta name="description" content="The perfect website to craft an original map poster of your own! Browse the world, adjust your design, texts and colors, then download it at the resolution and filetype you want!">
+  <link rel="canonical" href="https://messemap.org/doc">
+  <!-- Style includes -->
+  <link rel="stylesheet" type="text/css" href="/assets/dist/MesseMap.bundle.css">
+  <!-- Favicon zone -->
+  <link rel="apple-touch-icon" sizes="57x57" href="/assets/img/favicon/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/assets/img/favicon/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/assets/img/favicon/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/assets/img/favicon/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/assets/img/favicon/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/assets/img/favicon/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/assets/img/favicon/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/assets/img/favicon/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="/assets/img/favicon/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favicon/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
+  <link rel="manifest" href="/assets/img/favicon/manifest.json">
+  <meta name="msapplication-TileColor" content="#56d45b">
+  <meta name="msapplication-TileImage" content="/assets/img/favicon/ms-icon-144x144.png">
+  <meta name="theme-color" content="#56d45b">
+  <!-- Open graph and Twitter metas -->
+  <meta property="og:title" content="MesseMap">
+  <meta property="og:url" content="https://messemap.org/">
+  <meta property="og:image" content="/assets/img/logo-social.png">
+  <meta property="og:description" content="The perfect website to craft an original map poster of your own! Browse the world, adjust your design, texts and colors, then download it at the resolution and filetype you want!">
+  <meta property="og:site_name" content="MesseMap">
+  <meta property="og:type" content="website">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="MesseMap">
+  <meta name="twitter:description" content="The perfect website to craft an original map poster of your own! Browse the world, adjust your design, texts and colors, then download it at the resolution and filetype you want!">
+  <meta name="twitter:image:src" content="/assets/img/logo-social.png">
+  <!-- Matomo analytics script -->
+  <script>
+    var _paq = window._paq = window._paq || [];
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() {
+      var u="//matomo.mycozy.space/";
+      _paq.push(['setTrackerUrl', 'https:'+u+'matomo.php']);
+      _paq.push(['setSiteId', '37']);
+      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+      g.type='text/javascript'; g.async=true; g.src='https:'+u+'matomo.js'; s.parentNode.insertBefore(g,s)
+    })();
+  </script>
+</head>
+<body class="light-theme">
+  <a href="/">Découvrir le site</a>
+  <a href="/doc">Documentation du code</a>
+</body>
+</html>

assets/html/credits.html

@@ -16,6 +16,7 @@ <h1>{{MODAL_TITLE}}</h1>
       <option value="de">{{MODAL_DE}}</option>
       <option value="it">{{MODAL_IT}}</option>
       <option value="pt">{{MODAL_PT}}</option>
+      <option value="pl">{{MODAL_PL}}</option>
     </select>
   </div>
   <div class="button-wrapper">

index.html → assets/html/index.html

@@ -1,28 +1,56 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
   <meta charset="utf-8">
-  <meta content="ie=edge" http-equiv="x-ua-compatible">
-  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
-  <meta content="initial-scale=1" name="viewport">
-  <meta name="Leaflet" content="Leaflet">
   <title>MesseMap | Frame a special place for you and download it, or make a print of it !</title>
-  <link rel="icon" href="https://raw.githubusercontent.com/MesseBasseProduction/messe-basse-production.com/master/assets/img/logo.png" type="image/png" sizes="32x32">
-  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin="" />
-  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet-search.min.css" crossorigin="" />
-  <link rel="stylesheet" type="text/css" href="./assets/dist/MesseMap.bundle.css">
-  <!-- Matomo analytics https://matomo.org/ -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta content="ie=edge" http-equiv="x-ua-compatible">
+  <meta name="description" content="The perfect website to craft an original map poster of your own! Browse the world, adjust your design, texts and colors, then download it at the resolution and filetype you want!">
+  <link rel="canonical" href="https://messemap.org/">
+  <!-- Style includes -->
+  <link rel="stylesheet" type="text/css" href="/assets/lib/leaflet.min.css">
+  <link rel="stylesheet" type="text/css" href="/assets/lib/leaflet-search.min.css">
+  <link rel="stylesheet" type="text/css" href="/assets/dist/MesseMap.bundle.css">
+  <!-- Favicon zone -->
+  <link rel="apple-touch-icon" sizes="57x57" href="/assets/img/favicon/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/assets/img/favicon/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/assets/img/favicon/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/assets/img/favicon/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/assets/img/favicon/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/assets/img/favicon/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/assets/img/favicon/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/assets/img/favicon/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="/assets/img/favicon/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favicon/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
+  <link rel="manifest" href="/assets/img/favicon/manifest.json">
+  <meta name="msapplication-TileColor" content="#56d45b">
+  <meta name="msapplication-TileImage" content="/assets/img/favicon/ms-icon-144x144.png">
+  <meta name="theme-color" content="#56d45b">
+  <!-- Open graph and Twitter metas -->
+  <meta property="og:title" content="MesseMap">
+  <meta property="og:url" content="https://messemap.org/">
+  <meta property="og:image" content="/assets/img/logo-social.png">
+  <meta property="og:description" content="The perfect website to craft an original map poster of your own! Browse the world, adjust your design, texts and colors, then download it at the resolution and filetype you want!">
+  <meta property="og:site_name" content="MesseMap">
+  <meta property="og:type" content="website">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="MesseMap">
+  <meta name="twitter:description" content="The perfect website to craft an original map poster of your own! Browse the world, adjust your design, texts and colors, then download it at the resolution and filetype you want!">
+  <meta name="twitter:image:src" content="/assets/img/logo-social.png">
+  <!-- Matomo analytics script -->
   <script>
     var _paq = window._paq = window._paq || [];
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
     _paq.push(['trackPageView']);
     _paq.push(['enableLinkTracking']);
     (function() {
       var u="//matomo.mycozy.space/";
-      _paq.push(['setTrackerUrl', u+'matomo.php']);
+      _paq.push(['setTrackerUrl', 'https:'+u+'matomo.php']);
       _paq.push(['setSiteId', '37']);
       var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      g.type='text/javascript'; g.async=true; g.src='https:'+u+'matomo.js'; s.parentNode.insertBefore(g,s)
     })();
   </script>
 </head>
@@ -60,7 +88,7 @@ <h1 id="toggle-style" data-id="toggle-style-container">{{STYLE}}<span data-id="t
               <label for="dark-theme">{{DARK_THEME}}</label>
               <div class="theme-input-holder">
                 <div id="theme-editor" class="theme-editor">
-                  <img src="./assets/img/option.svg" alt="theme-editor-option">
+                  <img src="/assets/img/option.svg" height="14" width="14" alt="theme-editor-option">
                 </div>
                 <input type="checkbox" id="dark-theme" class="switch">
               </div>
@@ -75,17 +103,17 @@ <h1 id="toggle-texts" data-id="toggle-texts-container">{{TEXT}}<span data-id="to
             <label for="user-title">{{MAP_TITLE}}</label>
             <div class="input-with-color">
               <input id="user-title" type="text" value="Messe Basse" placeholder="{{MAP_TITLE_PLACEHOLDER}}" maxlength="32">
-              <input type="color" id="title-color" class="text-edit" data-type="title">
+              <input type="color" id="title-color" aria-label='Title color' class="text-edit" data-type="title">
             </div>
             <label for="user-subtitle">{{MAP_SUBTITLE}}</label>
             <div class="input-with-color">
               <input id="user-subtitle" type="text" value="France" placeholder="{{MAP_SUBTITLE_PLACEHOLDER}}" maxlength="32">
-              <input type="color" id="subtitle-color" class="text-edit" data-type="subtitle">
+              <input type="color" id="subtitle-color" aria-label='Subtitle color' class="text-edit" data-type="subtitle">
             </div>
             <label for="user-comment">{{MAP_COMMENT}}</label>
             <div class="input-with-color">
               <input id="user-comment" type="text" value="44.797°N / 1.542°E" placeholder="{{MAP_COMMENT_PLACEHOLDER}}" maxlength="42">
-              <input type="color" id="comment-color" class="text-edit" data-type="comment">
+              <input type="color" id="comment-color" aria-label='Comment color' class="text-edit" data-type="comment">
             </div>
           </div>
           <h1 id="toggle-export" data-id="toggle-export-container">{{EXPORT}}<span data-id="toggle-export-container" class="toggle">▲</span></h1>
@@ -136,7 +164,7 @@ <h1 id="toggle-export" data-id="toggle-export-container">{{EXPORT}}<span data-id
         <div id="map" class="map"></div>
         <div class="user-text-wrapper">
           <h1 id="title"></h1>
-          <h3><span class="before"></span><span id="subtitle" class="subtitle"></span><span class="after"></span></h3>
+          <h2><span class="before"></span><span id="subtitle" class="subtitle"></span><span class="after"></span></h2>
           <p id="comment"></p>
         </div>
       </div>
@@ -146,22 +174,20 @@ <h3><span class="before"></span><span id="subtitle" class="subtitle"></span><spa
   <div id="modal-overlay" class="modal-overlay"></div>
   <div id="print-overlay" class="print-overlay">
     <h1>MesseMap</h1>
-    <p><a href="messe-basse-production.com" class="mbp-link" target="_blank" rel="noopener noreferer">messe-basse-production.com</a></p>
+    <p><a href="https://messe-basse-production.com" class="mbp-link" target="_blank" rel="noopener noreferer">messe-basse-production.com</a></p>
     <p id="print-status"></p>
     <div id="print-progress" class="progress"></div>
   </div>
   <!-- Leaflet script and plugins -->
-  <script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
-  <script src="https://unpkg.com/leaflet-search@3.0.2/dist/leaflet-search.min.js" crossorigin=""></script>
+  <script type="text/javascript" src="/assets/lib/leaflet.min.js" loading="lazy"></script>
+  <script type="text/javascript" src="/assets/lib/leaflet-search.min.js" loading="lazy"></script>
   <!-- html2canvas script to allow map exporting -->
-  <script type="text/javascript" src="./assets/lib/html2canvas.min.js"></script>
+  <script type="text/javascript" src="/assets/lib/html2canvas.min.js" loading="lazy"></script>
   <!-- jsPDF script to create 'ready to print' images -->
-  <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
+  <script type="text/javascript" src="/assets/lib/jspdf.min.js" loading="lazy"></script>
   <!-- Then load MesseMap Js bundle -->
-  <script type="text/javascript" src="./assets/dist/MesseMap.bundle.js"></script>
+  <script type="text/javascript" src="/assets/dist/MesseMap.bundle.js"></script>
   <!-- Finally, start MesseMap instance -->
-  <script type="text/javascript">
-    window.MesseMap = new MesseMap();
-  </script>
+  <script type="text/javascript">window.MesseMap = new MesseMap();</script>
 </body>
 </html>

assets/img/favicon/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>