les maps

assets/css/page/map.css

@@ -2,16 +2,6 @@
     text-align: center;
 }
 
-iframe {
-    margin-top: 50px;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-    width: 90vw;
-    aspect-ratio: 1220/710;
-    border: 0;
-}
-
 section {
     background-color: rgba(255,255,255,0.3);
     max-width: 800px;
@@ -25,8 +15,74 @@ section {
     padding: 50px;
 }
 
+#maps {
+    position: relative;
+    display: block;
+    margin: 5vh auto auto;
+    width: 90vw;
+    min-height: 50vh;
+    border: none;
+}
+
 @media (max-width: 700px) {
-    iframe {
+    #maps {
         width: 100%;
     }
 }
+
+/*iframe {
+    margin-top: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    width: 90vw;
+    aspect-ratio: 1220/710;
+    border: 0;
+}*/
+
+
+.change-map-button {
+    cursor: pointer;
+    border: solid 2px #c49621;
+    padding: 0.5em;
+}
+
+.animated {
+    background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
+    background-size: auto auto;
+    background-clip: border-box;
+    background-size: 200% auto;
+    color: #fff;
+    background-clip: text;
+    text-fill-color: transparent;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: textclip 2s linear infinite;
+    display: inline-block;
+}
+
+@keyframes textclip {
+    to {
+        background-position: 200% center;
+    }
+}
+
+.change-map-button:after {
+    content: "2D";
+}
+
+body.flat .change-map-button:after {
+    content: "3D";
+}
+
+body.flat #map3d {
+    display: none;
+}
+
+#map2d {
+    display: none;
+}
+
+body.flat #map2d {
+    display: block;
+}

assets/map/ajax.php

@@ -1,12 +1,12 @@
 <?php
-$selector = ['gymnase', 'bib', 'ru', 'csh', 'tp', 'stpi', 'gc', 'gpe', 'gp', 'gei', 'gm', 'exam', 'loge', 'laverie', 'gmm', 'r3', 'r4', 'r5', 'r6', 'r7', 'r1', 'r2', 'amicale', 'pk', 'trou'];
+
+$selector = ['gymnase', 'ru_bib', 'csh', 'tp', 'stpi', 'gc', 'gpe', 'gp', 'gei', 'gm', 'exam', 'loge', 'laverie', 'gmm', 'r3', 'r4', 'r5', 'r6', 'r7', 'r1', 'r2', 'amicale', 'pk', 'trou'];
 
 
 //attention, les éléments sont dans l'ordre
 $title = [
 'Le gymnase',
-'bib\'insa et cafet',
+'ru, bib\'insa et cafet',
-'le ru',
 'Le CSH',
 'Le bâtiment des TPs',
 'Le STPI, amphi Riquet et amphi Vinci',
@@ -33,8 +33,7 @@ $title = [
 
 $desc = [
 'Parce qu\'à l\'INSA on fait aussi du sport.',
-'Ton repère si tu aimes le travail de groupe.\n<br><br>\nEt juste dessous la cafét pour varier les plaisirs et pour te sauver le soir.',
+'Le RU: Sympa, convivial, grand avant 12h13.<br><br>La Bib: Ton repère si tu aimes le travail de groupe.<br><br>Et juste dessous la cafét pour varier les plaisirs et pour te sauver le soir.',
-'Sympa, convivial, grand avant 12h13.',
 'LE bâtiment avec TOUTES tes matières préférées : en plus de l\'anglais et des autres langues enseignées à l\'INSA, on t\'y parle aussi d\'Expression, de Gestion, de Philo, de PPI...youpi !',
 'Nom bizarre pour un bâtiment mais tu y iras seulement pour les TP d\'Electrocinétique et d\'Optique\n',
 'Le bâtiment des salles de cours classiques, avec son bureau des stages, son administration des premières années, et...ses sous-sols.\n\nY\'a aussi l\'amphi Vinci (et ses 300 places, souvent occupées en même temps sauf étonnamment en gestion) et l\'amphi Riquet (pour Pierre-Paul, celui qui a initié la construction du canal, il est plus petit mais plus convivial).',
@@ -61,16 +60,19 @@ $desc = [
 
 
 
-//c'est peu compréhensible mais l'ancien systeme (avant Baptiste Rébillard <- moi) utilisait inutilement une base de donnée
+//c'est peu compréhensible mais l'ancien systeme (avant Baptiste Rébillard & Guillaume Joffre (shameless promotion)) utilisait inutilement une base de donnée
 
-if (isset($_GET['function'])) {
+$_POST = json_decode(file_get_contents('php://input'), true);
-    if (htmlspecialchars($_GET['function']) == "get_map_info")
+
+if (isset($_POST["function"])) {
+    if (htmlspecialchars($_POST['function']) == "get_map_info")
         get_map_info();
-    elseif (htmlspecialchars($_GET['function']) == "get_map_selectors")
+    elseif (htmlspecialchars($_POST['function']) == "get_map_selectors")
         get_map_selectors();
 }
 
 function get_map_selectors() {
+
     header('Content-Type: application/json');
 
     global $selector;
@@ -85,9 +87,9 @@ function get_map_selectors() {
 }
 
 function get_map_info() {
-    if (isset($_GET['selector'])) {
+    if (isset($_POST['selector'])) {
 
-        $select = htmlspecialchars($_GET['selector']);
+        $select = htmlspecialchars($_POST['selector']);
 
         header('Content-Type: application/json');
 
@@ -109,3 +111,7 @@ function show_error() {
     echo "Échec : ";
     var_dump($_GET);
 }
+
+
+
+

assets/map/alert.js

@@ -0,0 +1,38 @@
+
+
+
+
+
+function CustomAlert(){
+    this.alert = function(message,title){
+        document.body.innerHTML = document.body.innerHTML + '<div id="dialogoverlay"></div><div id="dialogbox" class="slit-in-vertical"><div><div id="dialogboxhead"></div><div id="dialogboxbody"></div><div id="dialogboxfoot"></div></div></div>';
+
+        let dialogoverlay = document.getElementById('dialogoverlay');
+        let dialogbox = document.getElementById('dialogbox');
+
+        let winH = window.innerHeight;
+        dialogoverlay.style.height = winH+"px";
+
+        dialogbox.style.top = "100px";
+
+        dialogoverlay.style.display = "block";
+        dialogbox.style.display = "block";
+
+        document.getElementById('dialogboxhead').style.display = 'block';
+
+        if(typeof title === 'undefined') {
+            document.getElementById('dialogboxhead').style.display = 'none';
+        } else {
+            document.getElementById('dialogboxhead').innerHTML = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i> '+ title;
+        }
+        document.getElementById('dialogboxbody').innerHTML = message;
+        document.getElementById('dialogboxfoot').innerHTML = '<button class="pure-material-button-contained active" onclick="customAlert.ok()">OK</button>';
+    }
+
+    this.ok = function(){
+        document.getElementById('dialogbox').style.display = "none";
+        document.getElementById('dialogoverlay').style.display = "none";
+    }
+}
+
+let customAlert = new CustomAlert();

assets/map/iframe_map.php

@@ -1,149 +0,0 @@
-<?php
-//ce fichier doit être inclut dans une page html avec un iframe de telle sorte à ce que tout les liens dans les js soient OK.
-require_once 'ajax.php';
-?>
-
-<script src="https://code.jquery.com/jquery-3.3.1.min.js"
-        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
-
-<style>
-.hidden {
-    display: none;
-}
-
-/* Map loading */
-#loading-screen {
-    position: absolute;
-    z-index: 2;
-    /*top: 0; */
-    left: 0;
-    width: 100vw;
-    height: 50vh;
-    background-color: #000000;
-    opacity: 1;
-    transition: 1s opacity;
-}
-
-#loading-screen.fade-out {
-    opacity: 0;
-}
-
-.loader {
-    display: block;
-    position: relative;
-    left: 50%;
-    top: 50%;
-    width: 40vh;
-    height: 40vh;
-    margin: -20vh 0 0 -20vh;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #9370DB;
-    -webkit-animation: spin 2s linear infinite;
-    animation: spin 2s linear infinite;
-}
-.loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #BA55D3;
-    -webkit-animation: spin 3s linear infinite;
-    animation: spin 3s linear infinite;
-}
-.loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #FF00FF;
-    -webkit-animation: spin 1.5s linear infinite;
-    animation: spin 1.5s linear infinite;
-}
-
-@-webkit-keyframes spin {
-    0%  {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes spin {
-    0%   {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-#map_section {
-    position: absolute;
-    margin: auto;
-    margin-top: 0;
-    left: 0;
-    top: 0;
-    width: 100vw;
-}
-</style>
-
-<script>
-function enable3DMap() {
-    var map3d = document.querySelector('#maps #map3d');
-    var map = document.querySelector('#maps #map');
-
-    map3d.classList.add("hidden");
-    map.classList.add("hidden");
-    map3d.classList.remove("hidden");
-}
-
-function enable2DMap() {
-    var map3d = document.querySelector('#maps #map3d');
-    var map = document.querySelector('#maps #map');
-    map.classList.add("hidden");
-    map3d.classList.add("hidden");
-    map.classList.remove("hidden");
-}
-</script>
-
-    <section id="map_section">
-        <div id="maps_button">
-            <button onclick="enable3DMap()" class="main-button">Map 3D</button>
-            <button onclick="enable2DMap()" class="main-button">Map 2D</button>
-        </div>
-
-        <section id="loading-screen">
-            <div class="loader"></div>
-        </section>
-        
-        <div id="maps" class="">
-            <script src="script_map3d.js" type="module"></script>
-
-            <div id="map" class="hidden">
-                <?php echo file_get_contents("map2d.svg"); ?>
-                <canvas id="canvasID"></canvas>
-            </div>
-        </div>
-
-        <script type="text/javascript" src="script_map2d.js"></script>
-    </section>

assets/map/map2D.php

@@ -0,0 +1,9 @@
+<?php
+
+require_once 'ajax.php';
+
+?>
+
+
+<?php echo file_get_contents("assets/map/map2d.svg"); ?>
+<script type="text/javascript" src="assets/map/script_map2d.js"></script>

assets/map/map2d.svg

@@ -11,7 +11,7 @@
    preserveAspectRatio="xMinYMin meet"
    viewBox="0 0 600 800"
    version="1.1"
-   id="svg2"
+   id="map2d"
    inkscape:version="0.91 r13725"
    sodipodi:docname="map.svg">
   <metadata

assets/map/map3D.php

@@ -0,0 +1,105 @@
+<?php
+
+
+
+require_once 'ajax.php';
+
+?>
+
+<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
+
+
+<style>
+
+    #loading-screen {
+        position: absolute;
+        z-index: 2;
+        /*top: 0; */
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        transition: 1s opacity;
+    }
+
+    #loading-screen.fade-out {
+        opacity: 0;
+    }
+
+    .loader {
+        display: block;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        width: 40vh;
+        height: 40vh;
+        margin: -20vh 0 0 -20vh;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #9370DB;
+        -webkit-animation: spin 2s linear infinite;
+        animation: spin 2s linear infinite;
+    }
+    .loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #BA55D3;
+        -webkit-animation: spin 3s linear infinite;
+        animation: spin 3s linear infinite;
+    }
+    .loader:after {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #FF00FF;
+        -webkit-animation: spin 1.5s linear infinite;
+        animation: spin 1.5s linear infinite;
+    }
+
+    @-webkit-keyframes spin {
+        0%  {
+            -webkit-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes spin {
+        0%   {
+            -webkit-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+
+</style>
+
+
+
+<div id="loading-screen">
+    <div class="loader"></div>
+</div>
+
+<script src="assets/map/script_map3d.js" type="module"></script>

assets/map/script_map2d.js

@@ -2,47 +2,64 @@
 let hoverColor = "#e9b82f";
 let normalColor = "#efbd95";
 
-var rep2 = "";
+const rep2 = "assets/map";
 
 function get_name(id){
     return id.replace("map-", "");
 }
 
-function clicked(elem){
+function clicked(elem) {
-    $.alert({
+
-        title: 'Chargement...',
+
-        content: function () {
+    let payload = {
-            let self = this;
-            let object = {
         "function": 'get_map_info',
         'selector': get_name(elem.id),
     };
-            return $.ajax({
+
-                url: rep2+'ajax.php',
+    function doChecks(response) {
-                data: object,
+        if (!response.ok) {
-                method: 'get'
+            throw Error(response.statusText);
-            }).done(function (data) {
-                if (data.length > 0) {
-                    self.setTitle(data[0]['title']);
-                    self.setContent(data[0]['description']);
-                } else {
-                    self.setTitle('Erreur');
-                    self.setContent('Une erreur est survenue')
         }
-            }).fail(function(){
+        return response;
-                self.setContent('Something went wrong.');
+    }
-            });
+
-        },
+    function readIt(response) {
+        return response.json()
+    }
+
+    fetch(rep2 + '/' + 'ajax.php', {
+        method: 'POST',
+        body: JSON.stringify(payload),
+        headers: {
+            "Content-type": "application/json; charset=UTF-8"
+        }
+    }).then(doChecks).then(readIt).then((data) => {
+        if (data.length > 0) {
+            Swal.fire({
+                title: '<strong id="modal-title">' + data[0]['title'] + '</strong>',
+                html: data[0]['description']
+            })
+        } else {
+            Swal.fire({
+                title: "Erreur",
+                html: "Une erreur est survenue",
+                timer: 3000,
+                timerProgressBar: true
+            })
+        }
+    }).catch((error) => {
+        console.error(error);
     });
+
 }
 
 function hover_in(elem){
-    $(elem).css({
+    const css = elem.style
-        "fill": hoverColor,
+
-        'cursor': 'pointer',
+    css.fill = hoverColor
-    });
+    css.cursor = "pointer"
 }
 
 function hover_out(elem){
-    $(elem).css("fill", normalColor);
+    elem.style.fill = normalColor
 }

assets/map/script_map3d.js

@@ -3,7 +3,10 @@
 *   Code : Ronan Bonnet
 *
 */
-var rep = "";
+
+
+/** repository containing this script and the map3D.glb **/
+var rep = "./assets/map";
 
 import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js';
 
@@ -25,6 +28,7 @@ render();
 
 var height, width;
 
+
 /**
  * Initializes the 3D plan
  * Creates and loads every needed things
@@ -35,13 +39,15 @@ function init() {
     //
     // Creates HTML
     //
+    var maps = document.getElementById("maps");
+
     container = document.createElement('div');
     container.id = 'map3d';
 
-  height = document.querySelector('#maps').clientHeight;
+    height = maps.clientHeight;
-  width = document.querySelector('#maps').clientWidth;
+    width = maps.clientWidth;
-  var svg = document.querySelector('#maps #map');
+
-  document.querySelector('#maps').insertBefore(container, svg);
+    maps.appendChild(container);
 
 
     //
@@ -86,7 +92,7 @@ function init() {
     //
     var loader = new GLTFLoader(loadingManager);
 
-  loader.load(rep+'map3D.glb', function(gltf) {
+    loader.load(rep + '/' + 'map3D.glb', function(gltf) {
         var object = gltf.scene;
         gltf.scene.scale.set( 2, 2, 2 );
         gltf.scene.position.x = 0;				    //Position (x = right+ left-)
@@ -96,7 +102,6 @@ function init() {
         scene.add(gltf.scene);
 
         render();
-
     });
 
 
@@ -153,24 +158,34 @@ function init() {
 
 }
 
+function doChecks(response) {
+    if (!response.ok) {
+        throw Error(response.statusText);
+    }
+    return response;
+}
+
+function readIt(response) {
+    return response.json()
+}
+
 /**
  * Get all the selectors (buildings identifiers)
  * @returns Array with all the selectors
  */
 function getSelectors() {
-  let info = {};
-  let object = {
-    "function": 'get_map_selectors',
-    'info': info,
-  }
-  return $.ajax({
-      url: rep+'ajax.php',
-      data: object,
-      method: 'get',
-      success: function(data){
 
+    const payload = {
+        "function": 'get_map_selectors'
     }
-  });
+
+    return fetch(rep + '/' + 'ajax.php', {
+        method: 'POST',
+        body: JSON.stringify(payload),
+        headers: {
+            "Content-type": "application/json; charset=UTF-8"
+        }
+    }).then(doChecks).then(readIt)
 }
 
 /*
@@ -191,60 +206,60 @@ function handleClickOnBuilding(x,y) {
     if (intersects.length > 0) {
 
         var selector = intersects[0].object.name.toString().toLowerCase(); // Name of the building we clicked on
-
+        console.debug(selector)
         // Wait for getSelectors() to be done
         // If we do not wait, everything will be executed before checking what is inside the database
-    $.when(getSelectors().done(function(data) {
+        getSelectors().then((data) => {
             if (data.map(x => x.selector).includes(selector)){
-        // Use the same thing as the one for the 2D map
+
-        $.alert({
+                let payload = {
-          title: 'Chargement...',
-          content: function () {
-              let self = this;
-              let object = {
                     "function": 'get_map_info',
                     'selector': selector,
                 };
-              return $.ajax({
+
-                  url: rep+'ajax.php',
+                fetch(rep + '/' + 'ajax.php', {
-                  data: object,
+                    method: 'POST',
-                  method: 'get'
+                    body: JSON.stringify(payload),
-              }).done(function (data) {
+                    headers: {
+                        "Content-type": "application/json; charset=UTF-8"
+                    }
+                }).then(doChecks).then(readIt).then((data) => {
                     if (data.length > 0) {
-                      self.setTitle(data[0]['title']);
+                        Swal.fire({
-                      self.setContent(data[0]['description']);
+                            title: '<strong id="modal-title">' + data[0]['title'] + '</strong>',
+                            html: data[0]['description']
+                        })
                     } else {
-                      self.setTitle('Erreur');
+                        Swal.fire({
-                      self.setContent('Une erreur est survenue')
+                            title: "Erreur",
-                      return;
+                            html: "Une erreur est survenue",
+                            timer: 3000,
+                            timerProgressBar: true
+                        })
                     }
-              }).fail(function(){
+                }).catch((error) => {
-                  self.setContent('Something went wrong.');
+                    console.error(error);
                 });
-          },
-        }); 
-      } else {
-
             }
-    }));
+        }).catch((error) => {
-
+            console.error(error);
+        });
     }
 }
 
 /**
  * Get the position where the user clicked (mouse) on a building and process it
  */
-function onClick() {
+function onClick(e) {
 
-  event.preventDefault();
+    e.preventDefault();
-
-  height = document.querySelector('#maps').clientHeight;
-  width = document.querySelector('#maps').clientWidth;
 
+    //height = document.querySelector('#maps').clientHeight;
+    //width = document.querySelector('#maps').clientWidth;
 
     const rect = renderer.domElement.getBoundingClientRect();
-  mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
+    mouse.x = ( ( e.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
-  mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
+    mouse.y = - ( ( e.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
     handleClickOnBuilding(mouse.x, mouse.y);
 
 }
@@ -252,11 +267,11 @@ function onClick() {
 /**
  * Get the position where the user clicked (smartphone) on a building and process it
  */
-function onTouchEnd() {
+function onTouchEnd(e) {
     var clientX, clientY;
 
-  clientX = event.changedTouches[0].clientX;
+    clientX = e.changedTouches[0].clientX;
-  clientY = event.changedTouches[0].clientY;
+    clientY = e.changedTouches[0].clientY;
 
     const rect = renderer.domElement.getBoundingClientRect();
     mouse.x = ( ( clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
@@ -270,22 +285,22 @@ function onTouchEnd() {
  * Process something when the user moved the mouse over a building
  * @todo add text over the building
  */
-function onMouseOver() {
+function onMouseOver(e) {
 
-  event.preventDefault();
+    e.preventDefault();
 
     height = document.querySelector('#maps').clientHeight;
     width = document.querySelector('#maps').clientWidth;
 
 
     const rect = renderer.domElement.getBoundingClientRect();
-  mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
+    mouse.x = ( ( e.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
-  mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
+    mouse.y = - ( ( e.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
 
     createTextOverBuilding(mouse.x,mouse.y)
-
 }
 
+
 function createTextOverBuilding(x,y) {
     mouse.x = x;
     mouse.y = y;
@@ -300,10 +315,7 @@ function createTextOverBuilding(x,y) {
         console.log(intersects);
 
 
-
     }
-
-  
 }
 
 function makeLabelCanvas(baseWidth, size, name) {
@@ -352,8 +364,11 @@ function makeLabelCanvas(baseWidth, size, name) {
  */
 function onWindowResize() {
 
-  height = document.querySelector('#main-content .inner').clientHeight;
+    var maps = document.getElementById("maps");
-  width = document.querySelector('#main-content .inner').clientWidth;
+
+    height = maps.clientHeight;
+    width = maps.clientWidth;
+
     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();
 

map.php

@@ -2,20 +2,35 @@
 ob_start(); // Start reading html
 //header('Location: construction.php');
 ?>
-<main>
+
+
+
+<main id ="reference">
+
     <div class="box-jaune">
         <span class="corners corners-top"></span>
         <span class="corners corners-bottom"></span>
 
-        <div class="title">Carte de l'INSA</div>
+        <div class="title">Carte de l'INSA - <span class="change-map-button animated" id="change-map-button">version : </span></div>
 
         <span class="circles circles-top"></span>
         <span class="circles circles-bottom"></span>
     </div>
 
-    <iframe id="iframe-map" src="assets/map/iframe_map.php"></iframe>
 
 
+    <div id="maps">
+
+        <!-- content will be included in #map3d -->
+        <?php include('assets/map/map3D.php') ?>
+
+        <!-- content wil be in #map2d -->
+        <?php include('assets/map/map2D.php') ?>
+    </div>
+
+
+
+    <!-- Note -->
     <section>
 
         <p>
@@ -23,20 +38,30 @@ ob_start(); // Start reading html
             ensuite le chiffre des centaines pour l'étage, et après à toi de trouver !
         </p>
         <p>
-            Par exemple, GM 212, c'est au GM, deuxième étage.
+            Par exemple, GM 212, c'est au GM, deuxième étage.<br>
-            <br>
+            Et si t'as Amphi 108, c'est au premier étage du STPI (c'est ton département et c'est là où il y a les amphis).
-            Et si t'as Amphi 108, c'est au premier étage du STPI(c'est ton département et c'est là où il y a les amphis).
         </p>
 
         <p id="hint">
-            Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591" class="link">Open Street
+            Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591" class="link">Open Street Map</a>.
-                Map</a>.
         </p>
 
     </section>
 
 </main>
 
+<!-- needed for showing custom alert, JE FERAI UN TRUC MAISON PLUS TARD TKT -->
+<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+<!--- Switch between 2D and 3d maps --->
+<script defer>
+    const Thatbutton = document.getElementById("change-map-button");
+    Thatbutton.addEventListener("click", (e) => {
+        document.body.classList.toggle("flat");
+    })
+</script>
+
+
 <?php
 $infopage = ["", "Plan", ob_get_clean(), "", "map"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
 include("structure/template.php");