[Résolu] Problèmes dans une carte Leaflet par Exonir

Bonjour,

Dans le cadre de mes études, j'ai choisi un cours optionnel de programmation. Nous devons réaliser un site web qui contient une carte Leaflet. J'ai choisi de faire un site qui recense un "TOP 20" des plus belles cathédrales de France. Pour cela, j'ai fait une base de données en GeoJSON (c'est dans la consigne du devoir que de choisir GeoJSON) qui rassemble les informations nécessaires. Elle ne contient pas d'erreurs de syntaxe il me semble.

J'aimerais que la carte fasse apparaitre 20 marqueurs avec une fenêtre pop up lorsque l'on clique sur l'un d'eux. Dans la fenêtre il y aurait le nom de la cathédrale, des informations (date de construction...), son adresse et une petite photo.

Mon problème est que je n'arrive pas à faire apparaitre ces marqueurs avec pop up. En plus, mon professeur nous laisse un peu à l'abandon ce semestre, il ne nous a pas aidé à comprendre le fonctionnement de GeoJSON... donc j'y vais à tâtons mais là je ne vois pas comment faire...

<!DOCTYPE html>

<html lang="fr">

  <head>
    <meta charset="utf-8" />
    <title>France Tourisme</title>
    <link rel="stylesheet" href="styles.css"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  </head>

  <body>

    <!-- En-tête de la page -->
    <header>

    <p id="logoCentre">
      <a href="index.html" id="flipLogo">
        <img id="logo" src="images/logo1.png" alt="Logo Rennes Tourisme"/>
      </a>
    </p>

    </header>

    <!-- Barre de navigation -->
    <nav>

      <ul id="menuTop">

        <li>
          <a href="index.html">Accueil</a>
        </li>

        <li class="bold">
          <div id="show">Découvrir la France</div>
        </li>

        <li>
          <a href="actualites.html">Actualités</a>
        </li>

        <li>
          <a href="contact.html">Nous contacter</a>
        </li>

      </ul>

      <div id="menuDeroulant">
        <p><a href="#">Nature</a></p>
        <p><a href="#">Gastronomie</a></p>
        <p><a href="#">Culture et patrimoine</a></p>
      </div>

    </nav>

    <!-- Zone actualités -->
    <aside>



    </aside>

    <!-- Page d'accueil -->
    <main>

      <h1>Culture et patrimoine</h1>
      <h2>TOP 20 des plus belles cathédrales françaises</h2>
      <p>Cette carte interactive vous présente les différentes cathédrales présentes en France et que nous jugeons dignes d'un intêret particulier. En effet, ces 20 cathédrales que nous avons sélectionnées sont époustouflantes visuellement.</br>
      </br>Vous les retrouvrez sur la carte ci-dessous, indiquées par des marqueurs. Cliquez sur un marqueur pour en savoir plus sur l'édifice et obtenir son adresse précise.</p>

      <div id="map"></div>

    </main>

    <!-- Pied-de-page -->
    <footer>

      <p>Suivez-nous</p>
      <div id="footerMedia">
      <div class="flipMedia"><a href="https://www.facebook.com"><img src="images/facebook.svg" /></a></div>
      <div class="flipMedia"><a href="https://twitter.com"><img src="images/twitter.svg" /></a></div>
      <div class="flipMedia"><a href="https://www.instagram.com"><img src="images/instagram.svg" /></a></div>
      <div class="flipMedia"><a href="https://www.youtube.com"><img src="images/youtube.svg" /></a></div>
      </div>

      <p>
      © France Tourisme 2021 -
      <a href="mentions_legales.html">CGU et mentions légales</a>
      -
      <a href="politique_confidentialite.html">Politique de confidentialité</a>
      </p>

    </footer>

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
		<script src="http://code.jquery.com/jquery.min.js"></script>
		<script src="script.js"></script>

  </body>

</html>

var map = L.map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data &copy OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.setView([46.91687130973672, 2.122744675365804], 6);
map.addLayer(osm);

// GEOJSON

$.ajax({
	dataType: "JSON",
	url: "convertcsv.geojson",
	success: traitement
});

function traitement(texte_recu) {
		var cathedralesFrance = texte_recu["features"];
		console.log(cathedralesFrance);

		for(var i=0; i<cathedralesFrance.length; i++){
		//Marqueurs
		var monument = cathedralesFrance[i]; // permet d'afficher les oeuvres les unes à la suite autres
		var coord = monument["fields"]["coordinates"];
		var nom = monument["fields"]["nom_cathedrale"];
		var information = monument["fields"]["informations"];
		var adress = monument["fields"]["adresse"];
		var marker = L.marker(coord);
		marker.bindPopup("<p>Nom : "+nom+"</p><p>Informations : "+information+"</p><p>Adresse : "+adress+"</p>");
		marker.addTo(map);
}}

$(function(){

// LOGO FLIP

  function animLogo(){

    $(this).find("img").css('transform', 'rotateY(180deg)');
    $(this).find("img").css('transition','transform 1s');
  }

  $('#flipLogo').on("mouseenter", animLogo);

  function annuleAnimLogo(){
    $(this).find("img").css({'transform':'rotateY(0deg)','transition':'transform 1s'});
  }

  $('#flipLogo').on("mouseleave", annuleAnimLogo);

// MENU DEROULANT

  function afficherMenuDeroulant(){
    $('#menuDeroulant').css('display' , 'block');
  }

  $('#show').on('mouseenter', afficherMenuDeroulant);


  function masquerMenuDeroulant(){
    $('#menuDeroulant').css('display' , 'none');
  }

  $('#menuDeroulant').on('mouseleave', masquerMenuDeroulant);

// FOOTER ANIMATION LOGO Medias

function animLogo(){

  $(this).find("img").css('transform', 'rotateY(180deg)');
  $(this).find("img").css('transition','transform 1s');
}

$('.flipMedia').on("mouseenter", animLogo);

function annuleAnimLogo(){
  $(this).find("img").css({'transform':'rotateY(0deg)','transition':'transform 1s'});
}

$('.flipMedia').on("mouseleave", annuleAnimLogo);

});

Voici mon code. Quand je fais "inspecter l'élément" sur Firefox, voilà ce qui apparait :

Pour l'erreur qui concerne les liens source, je ne comprends pas... parce que dans un exercice j'ai mis exactement les mêmes et il me semble que ca marche comme il faut.

Voici ma base de données en GeoJSON (je pense que sans elle c'est compliqué pour vous de m'aider)

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [48.447803973865895, 1.4878084540367054]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame de Chartres",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"16 Cloître Notre Dame, 28000 Chartres, France",

"url_photo":"images/chartres.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [48.8529371, 2.3500501]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame de Paris",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"6 Parvis Notre-Dame - Pl. Jean-Paul II, 75004 Paris, France",

"url_photo":"images/paris.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [49.25356135229453, 4.033952959663383]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame de Reims",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"Place du Cardinal Luçon, 51100 Reims, France",

"url_photo":"images/reims.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [49.89457750112409, 2.3020837002082972]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame d'Amiens",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"30 Place Notre Dame, 80000 Amiens, France, France",

"url_photo":"images/amiens.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [48.58182116293754, 7.750928076196306]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame de Strasbourg",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"Place de la Cathédrale, 67000 Strasbourg, France, France",

"url_photo":"images/strasbourg.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [49.440384789638564, 1.0944749356513794]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame de Rouen",

"informations":"XIIe siècle, style dominant : gothique",

"adresse":"Place de la Cathédrale, 76000 Rouen, France",

"url_photo":"images/rouen.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [49.56396477291691, 3.6245441949676493]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame de Laon",

"informations":"XIIe siècle, style dominant : gothique",

"adresse":"Rue du Cloître, 02000 Laon, France",

"url_photo":"images/laon.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [45.04558391299015, 3.8847018121642884]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame du Puy-en-Velay",

"informations":"IXe siècle, style dominant : roman",

"adresse":"2 Rue de la Manecanterie, 43000 Le Puy-en-Velay, France",

"url_photo":"images/puy_en_velay.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [45.77871112850207, 3.085743490213022]

"properties": {

"nom_cathedrale":"Cathédrale Notre-Dame-de-l’Assomption de Clermont-Ferrand",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"Place de la Victoire, 63000 Clermont-Ferrand, France",

"url_photo":"images/clermont_ferrand.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [43.928471026734236, 2.142496968786607]

"properties": {

"nom_cathedrale":"Cathédrale Sainte-Cécile d'Albi",

"informations":"XIIIe siècle, style dominant : gothique méridional",

"adresse":"5 Boulevard Général Sibille, 81000 Albi, France",

"url_photo":"images/albi.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [49.432612025119354, 2.0813757685394485]

"properties": {

"nom_cathedrale":"Cathédrale Saint-Pierre de Beauvais",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"Rue Saint-Pierre, 60000 Beauvais, France",

"url_photo":"images/beauvais.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [47.08216491755584, 2.3993580259338287]

"properties": {

"nom_cathedrale":"Cathédrale Saint-Etienne de Bourges",

"informations":"XIIe siècle, style dominant : gothique",

"adresse":"Place Etienne Dolet, 18000 Bourges, France",

"url_photo":"images/beauvais.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [43.2998790551171, 5.364916317721549]

"properties": {

"nom_cathedrale":"Cathédrale Sainte-Marie-Majeure de Marseille",

"informations":"XIXe siècle, style dominant : néobyzantin",

"adresse":"Place de la Major, 13002 Marseille, France",

"url_photo":"images/marseille.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [49.1201523288517, 6.175728138623042]

"properties": {

"nom_cathedrale":"Cathédrale Saint-Etienne de Metz",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"Place d'Armes, 57000 Metz, France",

"url_photo":"images/metz.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [45.64895399978024, 0.15168539154051253]

"properties": {

"nom_cathedrale":"Cathédrale Saint-Pierre d’Angoulême",

"informations":"XIIe siècle, style dominant : roman",

"adresse":"1 Place Saint-Pierre, 16000 Angoulême, France",

"url_photo":"images/angouleme.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [48.198006173874916, 3.284042315621938]

"properties": {

"nom_cathedrale":"Cathédrale Saint-Étienne de Sens",

"informations":"XIIe siècle, style dominant : gothique",

"adresse":"Place de la République, 89100 Sens, France",

"url_photo":"images/sens.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [47.99558677090804, -4.102250722753913]

"properties": {

"nom_cathedrale":"Cathédrale Saint-Corentin de Quimper",

"informations":"XIIIe siècle, style dominant : gothique",

"adresse":"Place Saint-Corentin, 29000 Quimper, France",

"url_photo":"images/quimper.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [48.111562138002206, -1.6836490912628133]

"properties": {

"nom_cathedrale":"Cathédrale Saint-Pierre de Rennes",

"informations":"XVIe siècle, style dominant : classique",

"adresse":"Rue de la Monnaie, 35000 Rennes, France",

"url_photo":"images/rennes.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [47.901864211731215, 1.9102795449829246]

"properties": {

"nom_cathedrale":"Cathédrale Sainte-Croix d'Orléans",

"informations":"XVIIe siècle, style dominant : gothique",

"adresse":"Place Sainte-Croix, 45000 Orléans, France",

"url_photo":"images/orleans.jpg"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [49.14656953740543, 0.22683253149110794]

"properties": {

"nom_cathedrale":"Cathédrale Saint-Pierre de Lisieux",

"informations":"XIIe siècle, style dominant : gothique",

"adresse":"9 Place François Mitterrand, 14100 Lisieux, France",

"url_photo":"images/lisieux.jpg"

}

]

}

</script>

Merci beaucoup pour votre aide, vous allez me sauver...

-
Edité par Exonir 2 avril 2021 à 20:35:23

Problèmes dans une carte Leaflet

Problèmes dans une carte Leaflet

Supprimer

Modérer

Signaler le message aux modérateurs