Mise en place de la carte de France interactive

src/Gmarche/Actions/RegionIndexAction.php

@@ -1,44 +1,31 @@
 <?php
 namespace App\Gmarche\Actions;
 
-use App\Gmarche\Table\RegionTable;
 use Framework\Actions\RouterAwareAction;
 use Framework\Renderer\RendererInterface;
-use Psr\Http\Message\ServerRequestInterface as Request;
 
 class RegionIndexAction
 {
-
     /**
      * @var RendererInterface
      */
     private $renderer;
 
-    /**
-     * @var RegionTable
-     */
-    private $regionTable;
-
     use RouterAwareAction;
 
     public function __construct(
-        RendererInterface $renderer,
+       RendererInterface $renderer
-        RegionTable $regionTable
     ) {
-        $this->renderer = $renderer;
+       $this->renderer = $renderer;
-        $this->regionTable = $regionTable;
     }
-
+    public function __invoke()
-    public function __invoke(Request $request)
     {
-        $params = $request->getQueryParams();
-        $regions = $this->regionTable->findAll()->paginate(15, $params['p'] ?? 1);
         session_start();
         if (isset($_SESSION['user'])) {
             $nom_user = $_SESSION['user'];
         } else {
             $nom_user = '';
         }
-        return $this->renderer->render('@gmarche/index', compact('nom_user','regions'));
+        return $this->renderer->render('@gmarche/index', compact('nom_user'));
     }
 }

src/Gmarche/GmarcheModule.php

@@ -21,6 +21,6 @@ class GmarcheModule extends Module
         $container->get(RendererInterface::class)->addPath('gmarche', __DIR__ . '/views');
         $router = $container->get(Router::class);
         $router->get("$gmarchePrefix", RegionIndexAction::class, 'gmarche.index');
-        $router->get("$gmarchePrefix{slug:[a-z\-0-9]+}", AntenneShowAction::class, 'gmarche.antenne');
+        $router->get("$gmarchePrefix{france}/{slug:[a-z\-0-9]+}", AntenneShowAction::class, 'gmarche.antenne');
     }
 }

src/Gmarche/views/index.twig

@@ -4,19 +4,113 @@
     Ğ1-Marché : Régions {% if page > 1 %}, page {{ page }} {% endif %}
 {% endblock %}
 {% block body %}
-    <div class="container" style="height:auto; width:24rem; text-align:center;border: 0px">
+    <div class="container" style="height:auto; width:28rem; text-align:center;border: 0px">
-        <img src="\images\logo_home.jpg" style="width:24rem;margin-left: 0px;"/>
+        <img src="\images\logo_home.jpg" style="width:22rem;"/>
-        <div class="row card" style="width: 22rem;margin-left: 0.1rem;">
+        <div class="row card" style="width:28rem;margin-left: -5.1rem;">
             <ul class="list-group list-group-flush">
-                {% for region in regions %}
+                <div class="mapcontainer">
-                   <a style="color:black;" href="{{ path('gmarche.antenne', {slug: region.slug, id: region.id} ) }}" title="{{ region.name }}">
+                    <div class="map">
-                       <li class="liste_regions list-group-item" style="padding: .2rem 1.25rem;">
+                        <span>Alternative content for the map</span>
-                    {{ region.name }}
+                    </div>
-                       </li>
+                    <div class="areaLegend"></div>
-                   </a>
+                    <div class="plotLegend"></div>
-                {% endfor %}
+                </div>
             </ul>
         </div>
     </div>
-   <!-- paginate(regions, 'gmarche.index') -->
+    <!-- paginate(regions, 'gmarche.index') -->
-{% endblock %}
+    <!-- "name" : "france_regions_2016",
+     "zoom": {
+     "enabled": true,
+     "maxLevel": 10-->
+    <script type="text/javascript">
+
+        $(".container").mapael({
+            map: {
+                name: 'france_regions_2016',
+                zoom: {
+                    //enabled: true
+                },
+                defaultArea: {
+                    attrs: {
+                        'fill': 'green',
+                        'stroke': '#99c7ff',
+                        'stroke-width': 0.6,
+                        'cursor': 'pointer'
+                    },
+                    attrsHover: {
+                        'stroke-width': 2.5,
+                        'fill': 'blue'
+                    }
+                }
+            },
+            areas: {
+                'region-84': {
+                    value: "Auvergne-Rhône-Alpes",
+                    href: "france/auvergne-rhone-alpes",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Auvergne-Rhône-Alpes</span>"}
+                },
+                'region-53': {
+                    value: "Bretagne",
+                    href: "france/bretagne",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Bretagne</span>"}
+                },
+                'region-27': {
+                    value: "Bourgogne-Franche-Comté",
+                    href: "france/bourgogne-franche-comte",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Bourgogne-Franche-Comté</span>"}
+                },
+                'region-24': {
+                    value: "Centre-Val de Loire",
+                    href: "france/centre-val-de-loire",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Centre-Val de Loire</span>"}
+                },
+                'region-94': {
+                    value: "Corse",
+                    href: "france/corse",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Corse</span>"}
+                },
+                'region-44': {
+                    value: "Grand-Est",
+                    href: "france/grand-est",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Grand-Est</span>"}
+                },
+                'region-32': {
+                    value: "Hauts-de-France",
+                    href: "france/hauts-de-france",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Hauts-de-France</span>"}
+                },
+                'region-11': {
+                    value: "Ile-de-France",
+                    href: "france/ile-de-france",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Ile-de-France</span>"}
+                },
+                'region-28': {
+                    value: "Normandie",
+                    href: "france/normandie",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Normandie</span>"}
+                },
+                'region-75': {
+                    value: "Nouvelle-Aquitaine",
+                    href: "france/nouvelle-aquitaine",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Nouvelle-Aquitaine</span>"}
+                },
+                'region-76': {
+                    value: "Occitanie",
+                    href: "france/occitanie",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Occitanie</span>"}
+                },
+                'region-52': {
+                    value: "Pays de la Loire",
+                    href: "france/pays-de-la-loire",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Pays de la Loire</span>"}
+                },
+                'region-93': {
+                    value: "Provence-Alpes-Côte d'Azur",
+                    href: "france/provence-alpes-cote-d-azur",
+                    tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Provence-Alpes-Côte d'Azur</span>"}
+                }
+            }
+        });
+    </script>
+{% endblock %}

views/layout.twig

@@ -7,6 +7,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="\images\favicon.ico">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalam&display=swap">
+    <link rel="stylesheet" href="\css\mapael.css">
     <link rel="stylesheet" href="\css\style.css">
     <style>
         body {
@@ -27,10 +28,12 @@
             grid-column: 2 / 3;
         }
     </style>
-    <!--<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->
-
     <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
     <script type="text/javascript" src="/js/connex.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mapael/2.1.0/js/jquery.mapael.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="https://rawgit.com/neveldo/mapael-maps/master/france/france_regions_2016.js" charset="utf-8"></script>
 </head>
 <body class="fond page">
     <div class="site">
@@ -50,7 +53,6 @@
                 <div class="navbar-text" style="color:lightgray;margin-right:15px; margin-top:3px;">
                     {{ "now"|date('d/m/y') }}
                 </div>
-                <!--{pourcent if current_user() pourcent}-->
                 {% if nom_user != '' %}
                    <!-- <button style="background-color: transparent;padding:0;border:0;" -->
                     <form method="post" style="margin-top:5px;" action="{{ path('account.profil') }}">