carte Saint Chamas

<!-- BOUTON PDF COMPATIBLE AVEC MODULES JS --> <div style="margin: 15px 0;"> <button id="pdfDownloadBtn" onclick="lancerTelechargerPDF()" style=" background: linear-gradient(45deg, #4CAF50, #45a049); color: white; padding: 12px 24px; border: none; border-radius: 20px; cursor: pointer; font-size: 16px; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 3px 10px rgba(76,175,80,0.3); display: inline-flex; align-items: center; gap: 8px; " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 5px 15px rgba(76,175,80,0.4)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 3px 10px rgba(76,175,80,0.3)'"> 📥 <span id="btnText">Download map as PDF</span> </button> <div id="pdfStatus" style=" margin: 10px 0; padding: 10px; border-radius: 5px; font-weight: bold; text-align: center; transition: all 0.3s ease; display: none; "></div> <!-- Zone de diagnostic masquée en production --> <div id="diagnostic" style=" margin: 10px 0; padding: 10px; background: #f0f0f0; border-radius: 5px; font-size: 12px; font-family: monospace; display: none; "></div> </div> <script> // Fonction de lancement sécurisée function lancerTelechargerPDF() { console.log('🚀 Début du processus de téléchargement PDF'); // Charger jsPDF de manière asynchrone if (typeof jsPDF === 'undefined' && typeof window.jspdf === 'undefined') { console.log('📦 Chargement de jsPDF...'); const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'; script.onload = function() { console.log('✅ jsPDF chargé'); setTimeout(executerTelechargerPDF, 100); // Petit délai pour s'assurer que jsPDF est prêt }; script.onerror = function() { console.error('❌ Erreur chargement jsPDF'); afficherStatut('❌ Erreur de chargement', 'error'); }; document.head.appendChild(script); } else { console.log('✅ jsPDF déjà disponible'); executerTelechargerPDF(); } } // Fonction principale d'exécution function executerTelechargerPDF() { const lang = window.location.pathname.includes('/f/') ? 'fr' : 'en'; const textes = { fr: { btnText: 'Télécharger la carte en PDF', processing: '⏳ Chargement de la carte...', success: '✅ Carte téléchargée ! Consultez vos téléchargements.', error: '❌ Erreur lors du chargement', filename: 'carte-' }, en: { btnText: 'Download map as PDF', processing: '⏳ Loading map...', success: '✅ Map downloaded! Check your downloads.', error: '❌ Loading error', filename: 'map-' } }; const t = textes[lang]; // Diagnostic masqué en production function diagnostic(message) { // Zone de diagnostic désactivée pour la production // const diagDiv = document.getElementById('diagnostic'); // if (diagDiv) { // diagDiv.style.display = 'block'; // diagDiv.innerHTML += message + '<br>'; // } console.log('DIAGNOSTIC:', message); } function afficherStatut(message, type = 'success') { const statusDiv = document.getElementById('pdfStatus'); if (statusDiv) { statusDiv.textContent = message; statusDiv.style.display = 'block'; if (type === 'success') { statusDiv.style.background = '#d4edda'; statusDiv.style.color = '#155724'; statusDiv.style.border = '1px solid #c3e6cb'; setTimeout(() => statusDiv.style.display = 'none', 5000); } else if (type === 'processing') { statusDiv.style.background = '#fff3cd'; statusDiv.style.color = '#856404'; statusDiv.style.border = '1px solid #ffeaa7'; } else { statusDiv.style.background = '#f8d7da'; statusDiv.style.color = '#721c24'; statusDiv.style.border = '1px solid #f5c6cb'; } } } function detecterVille() { const path = window.location.pathname; const pathParts = path.split('/').filter(part => part !== ''); diagnostic(`URL actuelle: ${window.location.href}`); diagnostic(`Parties du chemin: ${JSON.stringify(pathParts)}`); let ville = null; // Structure provenceweb (/e/département/ville/carte.htm) if (pathParts.length >= 3 && (pathParts[0] === 'e' || pathParts[0] === 'f')) { const dernierePart = pathParts[pathParts.length - 1]; if (dernierePart === 'carte.htm' || dernierePart.includes('carte')) { ville = pathParts[pathParts.length - 2]; diagnostic(`Ville trouvée via structure provenceweb: ${ville}`); } else { ville = dernierePart; diagnostic(`Ville trouvée via dernière partie: ${ville}`); } } // Départements if (!ville) { const departements = ['vaucluse', 'var', 'bouches', 'haute-provence', 'alpes-maritimes', 'drome', 'hautes-alpes', 'alpmarit']; for (let i = 0; i < pathParts.length; i++) { if (departements.includes(pathParts[i]) && pathParts[i + 1]) { let candidat = pathParts[i + 1]; if (candidat === 'carte.htm' || candidat.includes('carte')) { if (pathParts[i + 2]) { candidat = pathParts[i + 2]; } } ville = candidat; diagnostic(`Ville trouvée via département ${pathParts[i]}: ${ville}`); break; } } } // H1 if (!ville) { const h1 = document.querySelector('h1'); if (h1) { const match = h1.textContent.match(/carte\s+d?['']?([^-\|]+)/i); if (match) { ville = match[1].trim(); diagnostic(`Ville trouvée via H1: ${ville}`); } } } // Nettoyer if (ville) { ville = ville.replace(/\.(htm|html|php)$/i, ''); ville = ville.replace(/[^a-zA-Z\-\s]/g, '').trim(); ville = ville.charAt(0).toUpperCase() + ville.slice(1).toLowerCase(); diagnostic(`Ville finale: ${ville}`); } else { ville = 'Ville'; diagnostic(`Ville par défaut: ${ville}`); } return ville; } function testerExistenceImage(url) { return new Promise((resolve) => { const img = new Image(); img.onload = () => { diagnostic(`✅ Image trouvée: ${url}`); resolve(true); }; img.onerror = () => { diagnostic(`❌ Image non trouvée: ${url}`); resolve(false); }; img.src = url; }); } async function genererPDF(ville) { // Vérifier que jsPDF est disponible const { jsPDF } = window.jspdf || window; if (!jsPDF) { diagnostic(`❌ jsPDF non disponible`); afficherStatut(t.error, 'error'); restaurerBouton(); return; } diagnostic(`🔧 jsPDF disponible, génération pour: ${ville}`); // Tester les images const nomVille = ville.toLowerCase().replace(/[^a-z0-9]/g, '-'); const cheminsPossibles = [ `/84/cartes/${nomVille}-carte.jpg`, `/84/cartes/${nomVille}.jpg`, `/cartes/${nomVille}-carte.jpg`, `/cartes/${nomVille}.jpg` ]; diagnostic(`Chemins testés: ${JSON.stringify(cheminsPossibles)}`); let imageUrl = null; for (const chemin of cheminsPossibles) { const existe = await testerExistenceImage(chemin); if (existe) { imageUrl = chemin; break; } } if (imageUrl) { genererPDFAvecImage(imageUrl, ville, jsPDF); } else { genererPDFSansImage(ville, jsPDF); } } function genererPDFAvecImage(imageUrl, ville, jsPDF) { const img = new Image(); img.crossOrigin = 'anonymous'; img.onload = function() { try { const pdf = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' }); const pageWidth = 297; const pageHeight = 210; const margin = 15; // Titre pdf.setFontSize(16); pdf.setFont(undefined, 'bold'); const titre = `${lang === 'fr' ? 'Carte de' : 'Map of'} ${ville}`; const titreWidth = pdf.getTextWidth(titre); pdf.text(titre, (pageWidth - titreWidth) / 2, margin + 10); // Image const maxWidth = pageWidth - (margin * 2); const maxHeight = pageHeight - 80; let imgWidth, imgHeight; const imgRatio = img.width / img.height; if (maxWidth / maxHeight > imgRatio) { imgHeight = maxHeight; imgWidth = imgHeight * imgRatio; } else { imgWidth = maxWidth; imgHeight = imgWidth / imgRatio; } const x = (pageWidth - imgWidth) / 2; const y = margin + 20; pdf.addImage(img, 'JPEG', x, y, imgWidth, imgHeight); // Liens let yLien = y + imgHeight + 15; const espacement = 12; // Nom complet depuis H1 let nomCompletVille = ville; const h1 = document.querySelector('h1'); if (h1) { const texteH1 = h1.textContent.trim(); const match = texteH1.match(/carte\s+d?['']?([^-\|]+)/i); if (match) { nomCompletVille = match[1].trim(); } } // URLs - Construire l'URL de la page ville (correction doublon) const urlActuelle = window.location.href; const urlVille = urlActuelle.replace('/carte.htm', `/${ville.toLowerCase()}.htm`); const nomVilleBooking = nomCompletVille.toLowerCase() .replace(/[àáâãäå]/g, 'a') .replace(/[èéêë]/g, 'e') .replace(/[ìíîï]/g, 'i') .replace(/[òóôõö]/g, 'o') .replace(/[ùúûü]/g, 'u') .replace(/[ç]/g, 'c') .replace(/[^a-z0-9]/g, '-') .replace(/-+/g, '-') .replace(/^-|-$/g, ''); const urlBooking = `https://booking.com/city/fr/${nomVilleBooking}.fr.html?aid=321452`; pdf.setFontSize(10); pdf.setTextColor(0, 0, 255); pdf.setFont(undefined, 'underline'); // Liens sans emojis, juste du texte souligné const texteCarte = lang === 'fr' ? 'Pour zoomer et voir tous les détails, allez sur notre carte interactive' : 'To zoom and see all details, go to our interactive map'; pdf.textWithLink(texteCarte, margin, yLien, { url: window.location.href }); yLien += espacement; const texteHotel = lang === 'fr' ? 'Trouver un hôtel' : 'Find a hotel'; pdf.textWithLink(texteHotel, margin, yLien, { url: urlBooking }); yLien += espacement; const texteVille = lang === 'fr' ? 'Visiter le village' : 'Visit the village'; pdf.textWithLink(texteVille, margin, yLien, { url: urlVille }); // Footer supprimé // Télécharger const nomFichier = `${t.filename}${ville.toLowerCase().replace(/[^a-z0-9]/g, '-')}.pdf`; pdf.save(nomFichier); diagnostic(`✅ PDF généré: ${nomFichier}`); afficherStatut(t.success, 'success'); } catch (error) { diagnostic(`❌ Erreur: ${error.message}`); afficherStatut(t.error, 'error'); } finally { restaurerBouton(); } }; img.onerror = function() { diagnostic(`❌ Erreur image: ${imageUrl}`); genererPDFSansImage(ville, jsPDF); }; img.src = imageUrl; } function genererPDFSansImage(ville, jsPDF) { try { const pdf = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' }); const pageWidth = 297; const pageHeight = 210; const margin = 15; // Titre pdf.setFontSize(16); pdf.setFont(undefined, 'bold'); const titre = `${lang === 'fr' ? 'Guide de' : 'Guide of'} ${ville}`; const titreWidth = pdf.getTextWidth(titre); pdf.text(titre, (pageWidth - titreWidth) / 2, margin + 10); // Zone stylisée const carteWidth = pageWidth - margin * 2; const carteHeight = pageHeight - margin * 2 - 50; pdf.setFillColor(240, 250, 240); pdf.rect(margin, margin + 25, carteWidth, carteHeight, 'F'); pdf.setDrawColor(76, 175, 80); pdf.setLineWidth(1); pdf.rect(margin, margin + 25, carteWidth, carteHeight); // Message central pdf.setFontSize(18); pdf.setTextColor(76, 175, 80); pdf.setFont(undefined, 'bold'); const messageWidth = pdf.getTextWidth(ville); pdf.text(ville, (pageWidth - messageWidth) / 2, pageHeight / 2 - 15); // Instructions pdf.setFontSize(12); pdf.setTextColor(0, 0, 0); pdf.setFont(undefined, 'normal'); const instructions = lang === 'fr' ? 'Pour accéder aux services complets :' : 'To access complete services:'; const instructionsWidth = pdf.getTextWidth(instructions); pdf.text(instructions, (pageWidth - instructionsWidth) / 2, pageHeight / 2); // Liens let nomCompletVille = ville; const h1 = document.querySelector('h1'); if (h1) { const texteH1 = h1.textContent.trim(); const match = texteH1.match(/carte\s+d?['']?([^-\|]+)/i); if (match) { nomCompletVille = match[1].trim(); } } const urlVille = window.location.href.replace('/carte.htm', `/${ville.toLowerCase()}.htm`); const nomVilleBooking = nomCompletVille.toLowerCase() .replace(/[àáâãäå]/g, 'a') .replace(/[èéêë]/g, 'e') .replace(/[ìíîï]/g, 'i') .replace(/[òóôõö]/g, 'o') .replace(/[ùúûü]/g, 'u') .replace(/[ç]/g, 'c') .replace(/[^a-z0-9]/g, '-') .replace(/-+/g, '-') .replace(/^-|-$/g, ''); const urlBooking = `https://booking.com/city/fr/${nomVilleBooking}.fr.html?aid=321452`; let yLiens = pageHeight / 2 + 20; pdf.setFontSize(10); pdf.setTextColor(0, 0, 255); pdf.setFont(undefined, 'underline'); const texteCarte = lang === 'fr' ? 'Carte interactive avec zoom et détails' : 'Interactive map with zoom and details'; const carteWidthText = pdf.getTextWidth(texteCarte); pdf.textWithLink(texteCarte, (pageWidth - carteWidthText) / 2, yLiens, { url: window.location.href }); yLiens += 12; const texteHotel = lang === 'fr' ? 'Trouver un hôtel' : 'Find a hotel'; const hotelWidth = pdf.getTextWidth(texteHotel); pdf.textWithLink(texteHotel, (pageWidth - hotelWidth) / 2, yLiens, { url: urlBooking }); yLiens += 12; const texteVille = lang === 'fr' ? 'Visiter le village' : 'Visit the village'; const villeWidth = pdf.getTextWidth(texteVille); pdf.textWithLink(texteVille, (pageWidth - villeWidth) / 2, yLiens, { url: urlVille }); // Footer supprimé // Télécharger const nomFichier = `${t.filename}${ville.toLowerCase().replace(/[^a-z0-9]/g, '-')}.pdf`; pdf.save(nomFichier); diagnostic(`✅ PDF sans image généré: ${nomFichier}`); afficherStatut(t.success, 'success'); } catch (error) { diagnostic(`❌ Erreur PDF sans image: ${error.message}`); afficherStatut(t.error, 'error'); } finally { restaurerBouton(); } } function restaurerBouton() { const btn = document.getElementById('pdfDownloadBtn'); const btnText = document.getElementById('btnText'); if (btn && btnText) { btn.disabled = false; btn.style.background = 'linear-gradient(45deg, #4CAF50, #45a049)'; btnText.textContent = t.btnText; } } // Démarrer le processus const btn = document.getElementById('pdfDownloadBtn'); const btnText = document.getElementById('btnText'); const ville = detecterVille(); if (btn && btnText) { btn.disabled = true; btn.style.background = '#ccc'; btnText.textContent = t.processing; afficherStatut(t.processing, 'processing'); } diagnostic(`🚀 Début génération PDF pour: ${ville}`); // Exécuter la génération genererPDF(ville); } // Initialiser le texte du bouton au chargement document.addEventListener('DOMContentLoaded', function() { const lang = window.location.pathname.includes('/f/') ? 'fr' : 'en'; const btnText = lang === 'fr' ? 'Télécharger la carte en PDF' : 'Download map as PDF'; const btnTextElement = document.getElementById('btnText'); if (btnTextElement) { btnTextElement.textContent = btnText; } }); // Fonction globale accessible window.afficherStatut = function(message, type) { const statusDiv = document.getElementById('pdfStatus'); if (statusDiv) { statusDiv.textContent = message; statusDiv.style.display = 'block'; if (type === 'success') { statusDiv.style.background = '#d4edda'; statusDiv.style.color = '#155724'; statusDiv.style.border = '1px solid #c3e6cb'; setTimeout(() => statusDiv.style.display = 'none', 5000); } else if (type === 'processing') { statusDiv.style.background = '#fff3cd'; statusDiv.style.color = '#856404'; statusDiv.style.border = '1px solid #ffeaa7'; } else { statusDiv.style.background = '#f8d7da'; statusDiv.style.color = '#721c24'; statusDiv.style.border = '1px solid #f5c6cb'; } } }; </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6508526058471856" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6508526058471856" data-ad-slot="1179584912"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

Villes et Villages voisins

Cornillon Confoux (6 km), Miramas (6 km), Lançon de Provence (12 km) et Istres (12 km).