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;
|
text-align: center;
|
||||||
margin-top: 30px;
|
|
||||||
border: 2px solid white;
|
|
||||||
width: 80%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: auto;
|
||||||
/* Map loading */
|
margin-right: auto;
|
||||||
#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 {
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
width: 70vw;
|
||||||
left: 50%;
|
aspect-ratio: 1220/710;
|
||||||
top: 50%;
|
border: 0;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
@media (max-width: 700px) {
|
||||||
0% {
|
iframe {
|
||||||
-webkit-transform: rotate(0deg);
|
width: 100vw;
|
||||||
-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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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 hoverColor = "#e9b82f";
|
||||||
let normalColor = "#efbd95";
|
let normalColor = "#efbd95";
|
||||||
|
|
||||||
var rep2 = "assets/map/";
|
var rep2 = "";
|
||||||
|
|
||||||
function get_name(id){
|
function get_name(id){
|
||||||
return id.replace("map-", "");
|
return id.replace("map-", "");
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
* Code : Ronan Bonnet
|
* 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';
|
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
|
<?php
|
||||||
ob_start(); // Start reading html
|
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>
|
<main>
|
||||||
<div id="boxjaune">
|
<div class="box-jaune">
|
||||||
<div id="circle_l" class="circle"></div>
|
<span class="corners corners-top"></span>
|
||||||
<div id="circle_r" class="circle"></div>
|
<span class="corners corners-bottom"></span>
|
||||||
<div id="title_in_box">Carte de l'insa</div>
|
|
||||||
<div id="circle_l" class="circle"></div>
|
<div class="title">Carte de l'INSA</div>
|
||||||
<div id="circle_r" class="circle"></div>
|
|
||||||
|
<span class="circles circles-top"></span>
|
||||||
|
<span class="circles circles-bottom"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section id="map_section">
|
<iframe src="assets/map/iframe_map.php"></iframe>
|
||||||
<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>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Une petite note sur le numéro des salles : sur ton emploi du temps, le bâtiment est marqué en premier, et
|
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>
|
||||||
|
|
||||||
<p id="hint">
|
<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>.
|
Map</a>.
|
||||||
</p>
|
</p>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue