Upload files to "/"
This commit is contained in:
commit
e9e4db55ba
|
|
@ -0,0 +1,117 @@
|
||||||
|
// Initialiser la carte centrée sur la France
|
||||||
|
const map = L.map('map').setView([46.711100, 1.719100], 6);
|
||||||
|
|
||||||
|
// Fond de carte
|
||||||
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
attribution: '© OpenStreetMap contributors'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
"archi privés": new L.Icon({
|
||||||
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-orange.png',
|
||||||
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
}),
|
||||||
|
"archi hotel & spa": new L.Icon({
|
||||||
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png',
|
||||||
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
}),
|
||||||
|
"archi publics": new L.Icon({
|
||||||
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png',
|
||||||
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
}),
|
||||||
|
"paysagiste": new L.Icon({
|
||||||
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
|
||||||
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
}),
|
||||||
|
"pauseurs": new L.Icon({
|
||||||
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-yellow.png',
|
||||||
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
}),
|
||||||
|
"fournisseurs": new L.Icon({
|
||||||
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
|
||||||
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
}),
|
||||||
|
"piscinistes": new L.Icon({
|
||||||
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png',
|
||||||
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
}),
|
||||||
|
"chantiers emblématiques": new L.Icon({
|
||||||
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-black.png',
|
||||||
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
popupAnchor: [1, -34],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
// Charger les données du Google Sheet (CSV)
|
||||||
|
fetch("https://docs.google.com/spreadsheets/d/e/2PACX-1vQri4kOnjImxQFwbX5idNhjlQk1Hp-N6um5Ll46OVo4Hoe2o9SWKaHT2OYbNfb_j75StQ0VLDfBkq-6/pub?output=csv")
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(csv => {
|
||||||
|
const lines = csv.split("\n").slice(1); // Enlever l'en-tête
|
||||||
|
lines.forEach(line => {
|
||||||
|
const [nombre, type, lon, lat, nom, email, numero, note, website] = line.split(",");
|
||||||
|
|
||||||
|
// Vérifier que les coordonnées sont valides
|
||||||
|
if (!isNaN(parseFloat(lat)) && !isNaN(parseFloat(lon))) {
|
||||||
|
const typeKey = (type || "").trim().toLowerCase();
|
||||||
|
const icon = iconMap[typeKey] || iconMap["fournisseurs"]; // par défaut = rouge
|
||||||
|
|
||||||
|
const popup = `
|
||||||
|
<strong>${nom}</strong><br>
|
||||||
|
Email: ${email}<br>
|
||||||
|
Tel: ${numero}<br>
|
||||||
|
Note: ${note}<br>
|
||||||
|
<a href="${website}" target="_blank">Site web</a>
|
||||||
|
`;
|
||||||
|
|
||||||
|
L.marker([parseFloat(lat), parseFloat(lon)], { icon: icon })
|
||||||
|
.addTo(map)
|
||||||
|
.bindPopup(popup);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Erreur de chargement du CSV :", error);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const typeKey = data.type.trim().toLowerCase();
|
||||||
|
const icon = iconMap[typeKey] || iconMap["fournisseurs"]; // couleur par défaut = rouge
|
||||||
|
|
||||||
|
const marker = L.marker([data.lat, data.lon], { icon: icon })
|
||||||
|
.addTo(map)
|
||||||
|
.bindPopup(popup);
|
||||||
|
|
||||||
|
markers.push(marker);
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
[core]
|
||||||
|
repositoryformatversion = 0
|
||||||
|
filemode = false
|
||||||
|
bare = false
|
||||||
|
logallrefupdates = true
|
||||||
|
symlinks = false
|
||||||
|
ignorecase = true
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Database Rosa Gres France</title>
|
||||||
|
<!--Link with CSS-->
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
|
||||||
|
<!--Link with Js-->
|
||||||
|
|
||||||
|
|
||||||
|
<!--Police google-->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
|
||||||
|
<!-- Incluimos Leaflet CSS -->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<img src="imagenes/logo.png" height="70">
|
||||||
|
<h1>DATABASE ROSA GRES</h1>
|
||||||
|
<h2 id="France">France</h2>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<div>
|
||||||
|
<button class="comerciales" id="Alicia">Alicia</button>
|
||||||
|
<button class="comerciales">Jean-Paul</button>
|
||||||
|
<button class="comerciales">Olivier</button>
|
||||||
|
<button class="comerciales">Thibaut</button>
|
||||||
|
<button class="comerciales">Thomas</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="typo">Archi Hotel & Spa</button>
|
||||||
|
<button class="typo">Archi Publics</button>
|
||||||
|
<button class="typo">Archi Privés</button>
|
||||||
|
<button class="typo">Chantiers Emblématiques</button>
|
||||||
|
<button class="typo">Fournisseurs</button>
|
||||||
|
<button class="typo">Pauseurs</button>
|
||||||
|
<button class="typo">Paysagiste</button>
|
||||||
|
<button class="typo">Piscinistes</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<!-- Incluimos Leaflet JavaScript -->
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||||
|
//<script>
|
||||||
|
// Inicializamos el mapa
|
||||||
|
//const map = L.map('map').setView([46.711100, 1.719100], 5);
|
||||||
|
|
||||||
|
// Añadimos la capa de OpenStreetMap
|
||||||
|
//L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
// attribution: '© OpenStreetMap contributors'
|
||||||
|
//}).addTo(map);
|
||||||
|
|
||||||
|
// Añadimos un marcador
|
||||||
|
//L.marker([46.711100, 1.719100])
|
||||||
|
// .addTo(map)
|
||||||
|
// .bindPopup('Client X <br> mail:blabknkjdka <br> phone: +33 6 15 39 52 65 <br> primer marcador')
|
||||||
|
// .openPopup();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="backend.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Unnamed repository; edit this file 'description' to name the repository.
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
body{
|
||||||
|
background-color: black;
|
||||||
|
font-family: 'Figtree';
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#France {
|
||||||
|
color: rgb(196, 196, 196) ;
|
||||||
|
margin: 0px 3px 3px 3px;
|
||||||
|
padding-top: 0px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.comerciales {
|
||||||
|
background-color: rgb(182, 182, 182);
|
||||||
|
width: 80px;
|
||||||
|
height: 20px;
|
||||||
|
border: 0.5px rgb(255, 255, 0) solid;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comerciales:hover {
|
||||||
|
background-color: rgb(128, 128, 128);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comerciales:active {
|
||||||
|
background-color: rgb(56, 56, 56);
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
border: 0.5px rgb(255, 0, 0) solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.typo{
|
||||||
|
background-color: rgb(204, 204, 204);
|
||||||
|
width: 50px;
|
||||||
|
height: 20px;
|
||||||
|
border: px beige solid;
|
||||||
|
font-size: 7px;
|
||||||
|
vertical-align: top;
|
||||||
|
border: 0.5px rgb(255, 255, 0) solid;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typo:hover {
|
||||||
|
background-color: rgb(128, 128, 128);
|
||||||
|
}
|
||||||
|
|
||||||
|
.typo:active {
|
||||||
|
background-color: rgb(56, 56, 56);
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
border: 0.5px rgb(255, 0, 0) solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*SIZE OF THE MAP*/
|
||||||
|
#map {
|
||||||
|
height: 600px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue