forked from rebillar/site-accueil-insa
integration de la map par un iframe
This commit is contained in:
parent
18a555e14a
commit
cddd56c763
5 changed files with 174 additions and 150 deletions
|
|
@ -1,93 +1,19 @@
|
|||
#map_section {
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
border: 2px solid white;
|
||||
width: 80%;
|
||||
* {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Map loading */
|
||||
#loading-screen {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
/*top: 0; */
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background-color: #000000;
|
||||
opacity: 1;
|
||||
transition: 1s opacity;
|
||||
}
|
||||
|
||||
#loading-screen.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loader {
|
||||
iframe {
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
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;
|
||||
width: 70vw;
|
||||
aspect-ratio: 1220/710;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@-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);
|
||||
@media (max-width: 700px) {
|
||||
iframe {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
149
assets/map/iframe_map.php
Normal file
149
assets/map/iframe_map.php
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<?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>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
let hoverColor = "#e9b82f";
|
||||
let normalColor = "#efbd95";
|
||||
|
||||
var rep2 = "assets/map/";
|
||||
var rep2 = "";
|
||||
|
||||
function get_name(id){
|
||||
return id.replace("map-", "");
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* Code : Ronan Bonnet
|
||||
*
|
||||
*/
|
||||
var rep = "assets/map/";
|
||||
var rep = "";
|
||||
|
||||
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js';
|
||||
|
||||
|
|
|
|||
73
map.php
73
map.php
|
|
@ -1,70 +1,19 @@
|
|||
<?php
|
||||
ob_start(); // Start reading html
|
||||
require_once 'assets/map/ajax.php';
|
||||
header('Location: construction.php');
|
||||
//header('Location: construction.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;
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
<main>
|
||||
<div id="boxjaune">
|
||||
<div id="circle_l" class="circle"></div>
|
||||
<div id="circle_r" class="circle"></div>
|
||||
<div id="title_in_box">Carte de l'insa</div>
|
||||
<div id="circle_l" class="circle"></div>
|
||||
<div id="circle_r" class="circle"></div>
|
||||
<div class="box-jaune">
|
||||
<span class="corners corners-top"></span>
|
||||
<span class="corners corners-bottom"></span>
|
||||
|
||||
<div class="title">Carte de l'INSA</div>
|
||||
|
||||
<span class="circles circles-top"></span>
|
||||
<span class="circles circles-bottom"></span>
|
||||
</div>
|
||||
|
||||
<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="assets/map/script_map3d.js" type="module"></script>
|
||||
|
||||
<div id="map" class="hidden">
|
||||
<?php echo file_get_contents("assets/map/map2d.svg"); ?>
|
||||
<canvas id="canvasID"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/map/script_map2d.js"></script>
|
||||
</section>
|
||||
<iframe src="assets/map/iframe_map.php"></iframe>
|
||||
|
||||
<p>
|
||||
Une petite note sur le numéro des salles : sur ton emploi du temps, le bâtiment est marqué en premier, et
|
||||
|
|
@ -77,7 +26,7 @@ function enable2DMap() {
|
|||
</p>
|
||||
|
||||
<p id="hint">
|
||||
Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591">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>.
|
||||
</p>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue