Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problèmes dans une carte Leaflet

Sujet résolu
Exonir
2 avril 2021 à 20:28:12

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)

<script>{"type":"FeatureCollection","features":[

  {

    "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

  • Partager sur Facebook
  • Partager sur Twitter

Enjoy !

Exonir
4 avril 2021 à 18:30:23

Petit up, encore merci à ceux qui m'aideront... je n'ai pas trouver comment résoudre mon problème.
  • Partager sur Facebook
  • Partager sur Twitter

Enjoy !

Exonir
5 avril 2021 à 22:08:52

Petit up :)
  • Partager sur Facebook
  • Partager sur Twitter

Enjoy !

Exonir
6 avril 2021 à 23:15:16

UP :)

-
Edité par Exonir 7 avril 2021 à 21:26:55

  • Partager sur Facebook
  • Partager sur Twitter

Enjoy !

Exonir
8 avril 2021 à 11:36:55

Dernier petit up, je ne trouve vraiment pas comment faire...
  • Partager sur Facebook
  • Partager sur Twitter

Enjoy !

killianGuénon
7 avril 2022 à 16:41:30

déjà pour validé ton json ou géoJson tu peut utiliser https://jsonlint.com/ ou encore https://geojson.io/ pour vérifier et modifier avec un résultat concret par ailleurs tu as les coordonnées inversé ce qui risque de te joué un sale tour

-
Edité par killianGuénon 7 avril 2022 à 16:46:44

  • Partager sur Facebook
  • Partager sur Twitter
Benzouye
  • Javascript
8 avril 2022 à 22:30:32

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter
Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL