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