D3JS - Carte interactive
Comment créer une carte à partir de données géographiques et ajouter un tooltip interactif
d3js7.x
Sources :
Cette carte a été optimisé pour l'usage qui en est fait dans ce tutoriel, merci de consulter le tutoriel Map - Optimisation pour plus d'information.
Cette carte représente les départements français. Elle est construite à partir d'un fichier geoJSON. Ce fichier, en plus de contenir les polygones de chaque département, fournit également le nom du département ainsi que sa région que nous utilisons pour présenter un tooltip.
Nous commençons par définir les dimensions de notre SVG.
const width = 550, height = 550;Ensuite, nous créons un objet path pour manipuler nos données geoJSON.
const path = d3.geoPath();La partie la plus délicate de ce tutoriel, la définition de la projection utilisée. Ici, nous choisissons une projection assez habituelle pour la cartographie (une liste des projections est disponible sur le site de D3JS). Nous centrons cette projection sur la France (latitude & longitude) et l'agrandissons pour finalement la centrer.
const projection = d3.geoConicConformal()
.center([2.454071, 46.279229])
.scale(2600)
.translate([width / 2, height / 2]);
La projection est ensuite assignée au path, le SVG est ajouté sur le DOM avec les dimensions pré-définies (l'id ne sert que pour le CSS) et un groupe
est ajouté au SVG pour contenir tous les path. Attention, votre DOM doit déjà posséder un DIV dont l'ID est map, le code
d3.select('#map') permet de récupérer ce DIV.
path.projection(projection);
const svg = d3.select('#map').append("svg")
.attr("id", "svg")
.attr("width", width)
.attr("height", height);
const deps = svg.append("g");Le code suivant (et il n'y en a pas d'autres pour afficher la carte) charge le fichier geoJSON et pour chaque entrée de ce fichier ajoute un noeud path associé à un CSS particulier. Il est finalement rattaché au path que nous avions précédement déclaré.
d3.json('/tutorials/d3js/map-firststep/departments.json').then(function(geojson) {
deps.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr("d", path);
});Le code qui précède permet d'afficher la carte sans avoir rien à écrire de plus. Le plus incroyable est que nous n'avons même pas eu à nous occuper des données geoJSON, auncune manipulation n'a été nécessaire. C'est l'intérêt d'utiliser un format qui est naturellement reconnu par D3JS. Le fichier utilisé peut-être récupéré via firebug dans l'onglet réseau ou directement sur ce lien : departments.json.
Vous êtes nombreux à rencontrer des difficultés pour charger votre fichier JSON suivant votre contexte. Dans l'exemple au-dessus nous utilisons un serveur HTTP.
Il peut s'agit d'un serveur Apache, WAMP, uWAMP, EasyPHP ou tout autre serveur. Pour indiquer le bon chemin il faut tenir compte du chemin relatif de votre fichier.
Par exemple notre site est situé dans un dossier www/DataVis3. Le chemin que nous précisons à la fonction d3.json correspond au chemin
à partir de ce dossier : d3js/map-firststep/departments.json.
Si cela ne fonctionne pas pensez à regarder dans la console les erreurs (c'est à cela que sert la ligne 2). Vous devriez avoir une première erreur 404 :
Mais également une seconde erreur plus explicite cette fois :
Le chemin mentionné dans le champ responseURL n'est pas le bon, il manque le dossier d3js avant map-firststep.
Aujourd'hui il n'est plus possible de charger directement votre fichier JSON sans passer par un serveur web, c'est l'erreur que rencontre glopez3326 avec la
mention CORS Request. C'est pour des raisons de sécurité, le navigateur vous protège des scripts qui voudraient lire sur votre disque dur. Si vous
ne voulez pas utiliser de serveur web il faut copier le contenu du fichier geoJSON et le coller directement dans une variable javascript, voir le code source de
cet exemple.
L'exemple de cette page possède un tooltip que nous allons maintenant étudier. Commençons par ajouter un DIV à notre DOM qui contiendra ce tooltip.
let div = d3.select("body").append("div")
.attr("class", "map-tooltip")
.style("opacity", 0);Ensuite, nous reprenons la méthode qui parse le fichier geoJSON pour ajouter le comportement du tooltip.
d3.json('/tutorials/d3js/map-firststep/departments.json').then(function(geojson) {
deps.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr('class', 'department')
.attr("d", path)
.on("mouseover", function(event, d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html("Département : " + d.properties.NOM_DEPT + "<br/>"
+ "Région : " + d.properties.NOM_REGION)
.style("left", (event.pageX + 30) + "px")
.style("top", (event.pageY - 30) + "px")
})
.on("mouseout", function(event, d) {
div.style("opacity", 0);
div.html("")
.style("left", "-500px")
.style("top", "-500px");
});
});
Ce code ajoute simplement les méthodes mouseover et mouseout. Ces deux méthodes s'appliquent sur chaque path
que contient le SVG.
Le mouseover déclenche une transition sur 200ms visant à faire apparaître le rectangle décrivant
le département puis définit le contenu html de ce rectangle (éditez le fichier geoJSON pour voir les champs qui sont
accessible). Ce rectangle est légèrement décalé pour ne pas gêner la souris.
Le mouseout fait disparaitre ce rectangle. Il est également vidé de son contenu et déplacé en dehors de la zone visible afin de ne pas gêner la sélection
d'un autre département (car même avec une opacité à 0 il reste au dessus des départements).
Le CSS utilisé pour le tooltip est un peu travaillé pour convenir à la situation.
.map-tooltip {
position: absolute;
text-align: center;
z-index: 1000;
color: black;
width: 275px;
height: 37px;
padding: 2px;
font: 12px sans-serif;
background: grey;
border: 0px;
border-radius: 8px;
pointer-events: none;
}Suite à la remarque d'une internaute, nous rajoutons un lien vers le github suivant : https://github.com/gregoiredavid/france-geojson. Il permet de récupérer au format geoJSON les communes, départements et régions au niveau de la France entière ainsi que les communes et départements spécifiques à chaque région ou département.
VOUS POURRIEZ AIMER
COMMENTAIRES
PlG_BENIS
Bonjour, pourriez-vous me dire quelles parties de ce code sont responsables de couleur des départements (je voudrais les rendre gris) ainsi que de zoom - je voudrais zoomer 2 fois plus?
Merci
ericfrigot
Bonjour,
Pour zoomer il suffit de modifier la valeur de scale sur la projection :
const projection = d3.geoConicConformal().center([2.454071, 46.279229])
.scale(2600) // Ici vous pouvez donc mettre 5200 pour zoomer deux fois plus
.translate([width / 2, height / 2]);
Pour la couleur il y a deux façon de faire, la première directement dans le code :
d3.json('d3js/map-firststep/departments.json').then(function(geojson) {deps.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "red"); // On remplit le fond des départements en rouge
});
Soit via CSS si on associe une classe aux path :
d3.json('d3js/map-firststep/departments.json').then(function(geojson) {deps.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr('class', 'department') // la classe CSS est nommée ici
.attr("d", path);
});
On ajoute le css suivant et on retrouve la couleur de fond :
.department {fill : red;
}
Eric
Thibaud
Bonjour,
bravo et merci pour ce script qui fonctionne parfaitement avec Firefox et Chrome.
Par contre avec IE Edge (par exemple), nous avons bien une erreur :
SCRIPT5009: « fetch » est indéfiniFichier : d3.v5.min.js, ligne : 2, colonne : 217521
Je précise que je teste directement sur ce site, bien sûr !
Pour ce que j'en ai vu sur le web, cela marchait en "v3"...
ericfrigot
Bonjour,
Merci pour votre commentaire ! Effectivement c'est un élément important il y a rupture de compatibilité entre la v3 et la v5 sur ce point. Pour que cela fonctionne par défaut il ne faut pas utiliser Internet Explorer et il faut une version assez récente de Chrome et Firefox, Edge lui ne supporte pas complètement l'API fetch (https://developer.mozilla.o... ). Pour que cela fonctionne dans ces cas là il faut ajouter ce JS (https://github.com/github/f... ).
Thibaud
Mouais, un peu lourdingue du coup... :-(
elmanodan
Bonjour,
Super tuto de base. Merci. J'ai reproduit le code, et ajouté la bibliothèque d3-fetch. Malgré cela avec IE11 j'ai l'erreur fetch est indéfini.
Avez-vous rencontrer ce pb ?
D'avance, merci de votre aide.
PS : la carte s'affiche bien sous Firefox.
ericfrigot
Bonjour,
Du coup j'imagine que vous n'importez pas d3.v5.min.js directement parce que sinon d3-fetch est déjà inclu. Par ailleurs je n'ai pas de soucis sous IE. Etes-vous sûr d'avoir correctement importer le JS de d3-fetch ? Pouvez-vous le consulter dans la console de Chrome ou d'IE. Le fait que ça ne fonctionne pas que sous IE reste assez étrange.
Chris
Bonjour ! Merci pour ce tuto, très intéressant.
Heureusement que vous avez coller le fichier geoJSON dans la variable JavaScript ^^
Une ou deux remarques : les régions ont changé. "Champagne-Ardenne" etc, c'est plus à jour. Mais c'est pas bien grave.
De même, vous avez mis des "é" à "Région" et "Département". Mon navigateur buggait là dessus.
Surtout : J'ai une boite grisée qui apparait dès que je ne survole plus, avec ma souris, un département. C'est dû à quoi ?
[EDIT] La boite grisée est dû à :
div.html("")
.style("left", "0px")
.style("top", "0px");
Dans mouseout. En enlevant, on cette partie, plus de boite grise. Voilà.
[/EDIT]
Merci, encore, je continue la lecture de vos tutos.
ericfrigot
Merci pour ce retour, très intéressant.
J'ai corrigé le code du mouseout avec une autre solution.
Je ne comprend pas trop votre problème avec les accents, est-ce lié à l'encodage ?
Sinon, je suis preneur de toutes vos remarques, j'essaie de maintenir à jour tous mes tutoriaux et j'apprécie de pouvoir corriger leur moindre défaut.
Bonne journée, Eric
glopez3326
Bonjour Eric, et à tous, bien entendu :)
Avant tout, merci pour tes superbes tutos.
J'espère que tu parcoures toujours les différentes questions liés ces derniers, parce que j'ai un problème assez désespérant, ma page reste blanche.
Je te link mon code : https://pastebin.com/1qTRzzSh
Donc, pour info, ma page page html est visiblement bien codée puisque le "SVG" ainsi que le "g" apparaissent bien dans la liste des éléments dans l'inspecteur du navigateur.
A première vue "d3.json" ne voit pas de "geojson". Puisque comme tu peux le voir sur mon code, j'ai placé des "console.log", histoire de suivre le script. J'ai bien le "Avant Json", le "Apres Json", mais pas le "Dans la boucle..." Et je n'arrive absolument pas à comprendre pourquoi.
Pour info, encore, j'ai testé le "d3.json" en le modifiant de deux façons différentes.
1. En pointant directement sur le fichier : "d3.json("departments.json", function(req, geojson){". Le résultat e été le même, page blanche sans erreurs
2. En faisant comme JC, c'est à dire en créant une variable appelée "departmentsJson" et en faisant appel à "d3.json" de cette façon "d3.json(departmentsJson2, function(req, geojson){". Mais là, en plus, j'ai les erreurs suivantes :
d3.min.js:2 GET http://localhost/d3/carte%20interactive/[object%20Object] 404 (Not Found) .....................................................................d3.min.js:2
t.json @ d3.min.js:2
(anonymous) @ main.js:25
Uncaught (in promise) Error: 404 Not Found ................................................................................................................................................d3.min.js:2
at De (d3.min.js:2)
De @ d3.min.js:2
Promise.then (async)
t.json @ d3.min.js:2
(anonymous) @ main.js:25
Alors que ma variable "departmentsJson" est correcte puisque si je la console.log, elle m'indique bien : "{bbox: Array(4), type: "FeatureCollection", features: Array(96)}"
Voila, j'espère avoir été clair dans mes explication. :)
En tout cas, merci d'avance.
Jo
Petit PS, il y a une chose que je ne comprends pas dans le code de JC, le fait qu'il reprenne la variable d'entrée du "d3.json" au lieu d'utiliser la variable "geojson"
d3.json(depsGjson, function(req, geojson) {
deps.selectAll("path")
.data(depsGjson.features)
...
Bon ben voila, j'en rajoute encore après avoir signé.. :) :) :)
ericfrigot
Pour ton code source, j'ai l'impression que tu utilises un serveur HTTP sur ta machine. Tu dois faire comme moi et indiquer un chemin relatif par rapport à la racine de ton application, surement "carte%20interactive/departments.json". Il faut peut-être ajouter "d3/" devant mais je ne suis pas sûr. Dans l'idéal n'utilises pas d'espace dans tes dossiers pour une application web préfères un tiret par exemple, ça évite d'utiliser un %20.
ericfrigot
Bonjour, je suis toujours là :)
Tu as presque la solution il me semble. Si ta variable departmentsJson contient déjà ton JSON, tu n'as plus besoin de la fonction d3.json (qui pour rappel charge ton fichier JSON dans la variable geojson). Tu dois juste faire :
deps.selectAll("path")
.data(departmentsJson.features)
.enter()
.append("path")
.attr("d", path);
Et c'est tout, je regarde plus en détails ce soir ou demain matin ton code source. Eric
glopez3326
Bonsoir Eric,
Bon.. J'avais répondu, mais visiblement, il y a eu un bug.. :)
Donc, je vais essayer de reprendre ce que je disais.
Alors, avant tout, merci pour ta réponse ultra rapide :)
Donc, déjà, que tu saches que ta solution de me faire utliser la variable directement dans l'ajout des "path" fonctionne parfaitement bien. La carte s'affiche très bien, et du coup, j'ai même terminé la suite du tuto avec l'affichage des data des départements.
Mais il n'en reste pas moins que la construction de la variable json est quand même assez lourde, il est bien plus logique de pouvoir lire ces satanés fichier ".json", non Tu ne penses pas ?
Donc, j'ai suivi ton conseil, j'ai viré l'espace dans mon chemin d'accès au fichier, mais cela n'a strictement rien changé.
Alors, pour info, pourquoi, je me sers d'un web server, tout simplement parce que lorsque j'utilise une lecture directe du fichier avec le code suivant :
"d3.json('departments.json', function(req, geojson){"
j'obtiens les deux messages d'erreur suivants :
"Fetch API cannot load file:///C:/Users/Solo/Dropbox/_Files/www/d3/carte-interactive/departments.json. URL scheme must be "http" or "https" for CORS request."
et
"Uncaught (in promise) TypeError: Failed to fetch
at Object.t.json (d3.min.js:2)
at main.js:47"
Du coups, le premier message m'a laissé pensé qu'en utilisant un web server cela pourrait contribuer à un meilleurs fonctionnement. :) D'où mon code :
"d3.json("http://localhost/d3/carte-interactive/departments.json", function(req, geojson){"
Mais qui, donc, lui, ne donne qu'un page blanche, sans aucune erreur dans la console. Je peux juste constater que les "path" ne s'ajoutent pas :
<div id="map">
<svg id="svg" width="550" height="550">
<g></g>
</svg>
</div>
Voila, voila, en tout merci, encore une fois pour tes réponses.
Et merci d'avance, si tu me trouves mon problème. :)
Jo
ericfrigot
J'ai mis à jour le tutoriel pour ajouter des précisions en cas de problème avec le chargement du JSON. Par ailleurs j'ai renommé correctement le premier paramètre de la fonction qui contient une erreur en cas de soucis de chargement. Peux-tu me dire si cela t'aide à résoudre tes problèmes ? Pour rappel tu doit charger ton fichier comme ça : d3.json('carte-interactive/departments.json' ...
glopez3326
Bonsoir Eric..
Sourire... Du coup, j'ai provoqué un gros changement sur le tuto. :) :) :)
Mais part contre, à part le fait de me rassurer à propos de l'utilisation d'un serveur web, mon problème reste inchangé.
Toujours une page blanche sans aucune erreur sur la console.
Mais, en fait, mon code ne rentre même pas dans la fonction liée au "d3.json".
Pour tester, j'ai volontairement changer le une lettre sur le nom de mon fichier, et l'erreur 404 s'est bien produite, donc, la lecture du "d3.json" s'effectue bien. Mais quand je mets le bon fichier avec le bon chemin, etc... Rien... Page blanche...
J'avoue que je désespère un peu.
Ah oui, deux petites choses, histoire d'enlever des éventualités potentielles...
1 . j'ai testé mon fichier json sur le site : https://jsonlint.com qui valide bien la cohérence de mon fichier
2 . je travaille en général sur le navigateur Opéra, du coups, j'ai testé, également sur Firefox et sur Chrome. Le résultat est le même.
Voila, voila...
Jo
EDIT
===
Eric..... J'AI TROUVE !!!! *sourire*
Enfin, j'ai trouvé, cela ne résout pas le problème final, il faudra que tu remettes "encore" ton tuto à jour. *sourire* Je suis, décidémment infernal, non ? Et j'en suis désolé, vraiment.
En fait, le problème vient du fait que comme je viens de visualiser ton tuto, seulement, depuis quelques jours, "D3" à évoluer et est passer à la version 5. Du coup, la fonction "d3.json" en V5 ne réagit pas du tout de la même façon qu'en V4.
Il m'a suffit de changer ma ligne d'include pour basculer en V4 pour que mon script fonctionne.
Moralité, il va falloir aller gratter dans les évolutions de la V5. Je vais peut-être m'y pencher et te tenir au courant, éventuellement.
En tout cas, encore une fois, un ENORME MERCI à toi pour ton soutien, et ton envie d'aider les gens.
Jo
ericfrigot
Merci à toi, je note que je vais devoir mettre à jour mes tutoriels ou préciser la version.
jc
Bonjour,
Merci pour ce tuto, je suis débutant en js et d3js, j'essaye de suivre vos tutos et suis confronté à certains problèmes.
Pour le tuto Map, je ne m'en sort pas avec le tooltip. J'ai réussi à afficher la carte, en utilisant une varable pour le fichier geojson, que j'ai appelée depsGjson, si j'ai bien compris, cette méthode évite d'utiliser un serveur (domaine que je ne connais pas encore!).Je ne suis pas sûr de mon code, notamment avec le code : d3.json(depsGjson, function(req, geojson) , je ne vois pas à quoi correspondent les 2 paramètres req et geojson.
Voici mon code : https://pastebin.com/Zh6n6nwz (j'espère que ça fonctionne).
Merci d'avance
jeanchristophe
ericfrigot
En fait ça a été plus rapide que prévu. L'erreur est toute simple, à la ligne 48 vous avez laissé la méthode permettant d'afficher la carte sans le tooltip. A la ligne 62 vous refaites la même chose en ajoutant le tooltip. Pour que votre code marche il suffit de supprimer le code de la ligne 48 à 54. Votre mécompréhension vient peut-être de la façon dont j'aborde les choses, j'ai commencé par montrer la fonction permettant d'afficher la carte pour ensuite enrichir cette fonction et ajouter un tooltip.
jc
Bonjour Eric,
J'ai corrigé mon erreur et ça fonctionne merci.
Merci pour les infos concernant les paramètres. Les fonctions anonymes sont assez déstabilisantes !
Je teste le tuto sur les cartes choroplèthes, je suis de nouveau confronté au fait que je n'utilise pas de serveur. Pouvez vous m'indiquer s'il est possible de faire comme pour le json en créant une variable de "type" csv. J'ai fait qlq recherches, sans résultat. Peut être faut il que je créer une variable au format tel qu'il est après parsing du csv. Je continue mes recherches, mais peut être avez vous une solution ?
jeanChristophe
jc
Bonjour Éric, merci pour vos réponses, je vais regarder ça au plus vite. Bon weekend
ericfrigot
Bonjour Jean-Christophe, j'ai largement tardé à vous répondre mais je vous prépare un retour pour ce week-end. En attendant je peux vous donner quelques conseils. Vous devriez placer votre variable depsGjson dans un autre fichier JS et importer celui-ci dans votre page html principale, ça vous évitera d'avoir à charger à chaque fois un fichier un peu lourd lors de l'édition. Effectivement en faisant ainsi vous évitez d'avoir besoin d'un serveur. Concernant le code que vous mentionnez, d3.json va télécharger sur le serveur depsGjson ou pour votre cas le charger depuis le disque et quand il a fini il va appeler la fonction définit ensuite, celle-ci à deux paramètres : req (qui est vide) et geojson qui contient votre JSON chargé et que vous pouvez donc utiliser à l'intérieur de cette fonction. Cette manière permet de garantir que tout le JSON sera chargé quand vous exécuterez le code (avec un réseau lent ou un gros fichier ça peut prendre plusieurs secondes, c'est ce qu'on appelle la synchronisation). Je reviens vers vous très vite. Eric
Goulven
Bonjour,
Tout d'abord merci pour ce tuto !
J'arrive à afficher la carte simple avec le nom des départements etc.. Mais quand j'essaye de créer la carte choroplèthe, j'ai l’erreur suivante :
"NS_ERROR_UNKNOWN_PROTOCOL: d3.v3.min.js:1"
Si quelqu"un a une idée je suis preneur.
Merci d'avance,
ericfrigot
Bonjour,
Pas évident pour moi de vous aider avec ces éléments. D'ou viennent les données que vous voulez représenter sur la carte choroplèthe ? Est-ce que vous auriez un lien vers votre code me permettant de l'analyser ? Votre erreur ressemble à un problème de chargement de données. Eric
Romain
Bonjour, merci pour tout les tutos, mais j'ai un souci avec l'affichage de la map, j'ai copié votre votre code, créée la balise <div id="map"></div>,
mais j'ai l'erreur suivante qui s'affiche dans la console javascript:
"Uncaught TypeError: Cannot read property 'path' of undefined" en relation avec la ligne "var path = d3.geo.path()".
Si vous savez d'ou vient cette erreur ce serai top. Merci
ericfrigot
Bonjour, pas évident de vous aider avec si peu d'éléments. Auriez-vous la possibilité de partager le code complet de votre page HTML sur un site comme pastebin ou autre ? Eric
Greg Hor
Bonjour. Un grand merci pour ce tutoriel.
J ai copié votre code mais je ne parviens pas à afficher la carte.
Le fichier html affiche une page blanche (code https://github.com/greghor/... ). Cependant aucune erreur n est détectée par la console javascript. Pouvez vous m aider à trouver ce qui pose problème svp? Désolé si ma question est très naive mais je suis vraiment débutant.
ericfrigot
Bonjour. J'ai rajouté un petit morceau de texte au tutoriel concernant votre problème. En fait je n'avais pas mentionné que le BODY de votre page doit posséder un DIV dont l'id est map. La commande d3.select('#map') permet de récupérer ce DIV et c'est sur celui-ci que l'on ajoute le SVG. A l'inverse pour le tooltip, c'est directement D3JS qui ajoute un DIV au BODY. J'espère que vous pourrez ainsi compléter votre code. Eric
Greg Hor
Bonjour et merci pour votre réponse.
J ai d abord vérifié que mon commande contenait la commande d3.select('#map'),
J ai ensuite essayé d'inclure une balise DIV tel que <div id="map"> <\div> à différents endroits du code html.
Le problème persiste. Est-ce que ces balises sont nécessaires? y a t-il qqch qui m échappe ? Cordialement, Grégoire
ericfrigot
Votre problème est intéressant. Quel navigateur utilisez-vous ? J'ai modifié votre fichier index.html de la façon suivante :
<body>
<div id="map"></div>
</body>
Tout le reste est identique. SI je vous demande pour le navigateur c'est que cela fonctionne très bien sous Firefox mais pas sous Chrome ni sous Internet Explorer. Chrome nous donne une piste : cannot load file:///F:/UwAmp/www/TT/dep.json. Cross origin requests are only supported for...
En fait vous ne pouvez pas exécuter votre code en double-cliquant sur le fichier index.html, ça ne marche que sous Firefox car vous chargez une ressource et pour cela vous devez installer un petit server web comme Apache, WAMP ou UwAmp. Si vous voulez que cela fonctionne sans avoir besoin de serveur il faut inclure les données du fichier geoJSON dans votre fichier index.html comme ici http://www.datavis.fr/d3js/... (regardez le code source avec votre navigateur, j'ai copié le contenu du fichier geoJSON et créé une variable geojson.
Greg Hor
En suivant votre conseil et en utilisant double-clique - Firefox, j arrive à afficher la carte.
Il reste cependant quelques points que je ne comprends pas très bien.
Tout d abord la place des balises <div id="map"></div> et <body> </body> semblent jouer un rôle important.
Si je les places avant <script></script> la carte s affiche sans problème. Par contre,
si l ordre des balises est
<body>
<script>
le code
</script>
<div id="map"></div>
</body>
la carte ne s affiche pas. Pouvez vous brièvement m expliquer pourquoi?
J ai également essayé d utiliser l outil http-server pour lancer la page html via le terminal.
Le comportement est bizarre. Il n actualise la page lorsque je modifie index.html et relance.
Il semble rester "bloqué" sur les anciennes versions de index.html.
Avez vous déjà rencontré ce type de problème?
En tout cas vraiment merci pour votre aide, elle m est très utile! Grégoire
ericfrigot
Bonjour Greg,
Pour votre première question, c'est assez simple à expliquer. Lorsque le navigateur charge votre fichier index.html, il va ajouter dans la page les balises au fur et à mesure qu'il les lit. Si votre script est avant la balise map, c'est comme si elle n'existait pas. C'est pour cette raison quand dans tous les tutoriaux de ce site, la partie javascript est située en tout dernier.
Pour votre seconde question, c'est probablement à cause du cache qui est configuré par défaut sur votre http-server. Si vous videz le cache de votre navigateur, la page devrait s'afficher dans sa dernière version. Pour que cela soit automatique il faudrait désactiver le cache au niveau de votre serveur.
Greg Hor
Bonjour Eric, merci pour ces explications qui m ont bien éclairées!
Geo-x
Merci beaucoup pour cet exemple très parlant et très rare ! En effet, difficile de trouver un tuto expliquant comment récupérer les informations d'un GeoJson.