Tutoriel JavaScript : Carte interactive en SVG 

J'ai un petit problème avec le "var paths = map.querySelectorAll('.map__image a');" qui ne fonctionne pas, il me dit qu'il n'y a que des valeurs null, une solution svp ?

Bonjour, comment faites vous pour sélectionner ou écrire sur plusieurs lignes simultanément. Merci.

I JUST FCKINNNN LOVE UUUUU U ARE MY HERO

Comment on peut mettre une fenêtre pop-up sur chaque path ?

Спасибо! Отличный урок, красивый язык!

tuto génial mes trop rapide pour un débutant :(

j'ai crois que fill ; stroke ne sont pas rconnus dans mon css

pas possible le faire en no code ?

Thank you man! Really appreciate your impact but please can u do english subs as well? TY

Super tuto ! ça fonctionne niquel ! par contre, est-ce qu'il est possible de faire comme pour les liens hypertexts c'est-à-dire que la zone cliquée change de couleur et reste telle quelle pour indiquer qu'on a déjà cliqué sur cette zone. J'ai réussi pour la map_list mais pas pour la map_image

Trés intéressant. on voit bien la puissance du SVG. Ce tutorial est au top. Tes explications sont trés clair. Grand Merci pour cette chaine. je vais voir de ce fait tes autres videos :)

comment la lier a une base de donné

il manque la suite ! super interressant MAIS APRES, QUOI ? il faut bien cliquer dessus pour que ca ouvre la region avec les details des villes, clickable également? dommage sinon super, mais dommage de s'arreter là...

Merci pour cet excellent tuto. Deux petites remarques : - Un petit rappel de la façon de faire la sélection verticale et les remplacements verticaux aurait été sympa - Pourquoi utiliser un foreach non standard et son polyfill alors qu'une boucle "for of" est aussi compacte et vite écrite ?

Salut, Belle vidéos Jonathan; est-ce que ça serait possible d'afficher les nom des régions et/ou une information venant d'un source externe telleques le nombres de la population; directement sur la carte ??

pardon ?? c'est quoi ton logiciel il est vachement pratique ! 😍

Bonjour, merci pour votre vidéo! je souhaite développer ce meme type de projet mais avec des itinéraires clickables qui donnent des infos sur chaqu'un de ces itinéraires, pouvez-vous me conseiller svp? je suis un peu débutant, merci

clair ... parfait pour mon usage...merci

Est ce qu'il est possible de rajouter des points avec le nom des villes lorsque l'on passe sa souris sur une région ?

Merci mille fois pour ce tuto !! 😇

Super, exactement ce qu'il me faut. J'aurais quand même bien voulu qu'au survol d'une région, une infobulle apparaît avec le nom de la région à l'intérieur et non pas sur la liste comme vous l'avez fait dans un tuto semblable à celui-ci. Super tuto comme d'habitude, Merci

Bonjour boss

afff precisava de ajuda e nao entendo frances urgggggggg

awsoooooome tutorial, thx man ;)

Toujour le top GrafikArt merci

bonjour, si seulement je veux faire un path finder avec des indoor map SVG, tu me conseille d'utiliser qu'elle solution? merci :) good job

Très intéressant, je croyais que jamais j arriverais à faire cette carte interactive mais grade à tes explications j y suis presque.

intéressant, est ce je pourrais customiser la carte en ajoutant mes icones dans chaque région, définir les zoom.

C'est vraiment top et bien expliquer.. merci beaucoup tu es le meilleur

Bonjour, tous fonctionne chez moi et sa bloque au niveau du test : le commentaire 'salut' ne ressort pas. sa m’empêche d'avancer. (j'ai du commencer le java gràce à vous, j'ai téléchargé les mêmes outils que sur le tuto ) :( voilà mon code : var map = document.querySelector('#map') var paths = map.querySelectorAll('.map__image a') var links = map.querySelectorAll('.map__list a') paths.forEach(function (path) { path.addEventListener('mouseenter',function(e) { console.log('salut') } ) } ) je serais reconnaissant, merci

Merci pour ta gentillesse

Salut, j'en profite pour te dire merci pour tous tes tutos que tu fais, ils sont super clairs et en plus très utiles. Je vais essayer de faire celui-ci avec un système de carte mondiale, qui lorsque tu passes ta souris sur un pays, affiche une infobulle.

C'est vraiment top et bien expliquer.. merci beaucoup tu es le meilleur

Je connaissais même pas la fonction debugger pour mettre un point d'arrêt, c'est cool! Merci :)

спасибо классный туториал =) но хотелось бы чтобы вы оставляли ссылки на ресурсы которые вы заходите и на конечный результат прошу прошения за перевод (Google) Merci tutoriel frais =) mais je voudrais vous laisser des liens vers des ressources auxquelles vous accédez et le résultat final Je suis désolé pour la traduction (Google)

Bonjour, super tuto. Effectivement beaucoup plus simple et responsive que la précédente map interactive que je m'étais aussi appliquée à réaliser avec ton tuto en 2014. Merci encore. Alors de mon côté, 2 petites choses : Sous IE la carte ne s'affiche carrément pas. Ce serait "app.js" qui génère une erreur à la ligne où on a : paths.forEach(function (path) { Et j'aimerais savoir s'il est possible de mettre la liste en menu déroulant car j'ai opté pour la carte des départements et ça nous fait quand même 95 . J'ai essayé mais je n'arrive pas à lier svg et options du menu déroulant de sorte qu'au passage de la souris le département se positionne en visu dans le menu et que le département soit en exergue. As-tu l'astuce ?

Tu m'as sauvé je t'aime

Merci beaucoup mon frere..tu viens de me sauver la vie avec ce tuto..;-)

Wow magnifique

Mercie beaucoup!! muy bien explicado :) Muchas gracias

Ce tuto est top !!! Merci beaucoup

super intéressant, est-ce possible de récupérer tes fichiers ? car j'aimerais faire une carte interactive aussi, mais pas avec la carte de France. Merci.

vraiment super un grand merci a vous pour tous ces efforts

Merci super tuto ! C'est vraiment impressionnant la vitesse et la façon dont tu codes avec les raccourcis claviers etc^^

Très bien. Y a t-il quelque chose de particulier à faire pour que cela fonctionne sous Safari ?

Ta vidéo est vraiment superbe mais comment fais-tu pour modifier toutes les lignes en même temps ? ça me ferais gagner beaucoup de temps ! merci à toi

Merci !

Juste excellent ! Un grand merci !

wwooowwww

Bonjour, j'ai bien suivit le tuto à la lettre, mais je ne comprend pas pourquoi une fois que ma souris est passé sur les régions, celle-ci reste grises. Vous dès le début, vous retiré la souris de la région et elle reprend sont état actuelle. Auriez vous une solution ? Mon CSS: .map{ overflow: hidden; } .map__image{ width: 50%; float: left; } .map__image path{ fill: #e5e3df; stroke: #FFF; stroke-width: 1px; transition: fill 0.3s; } .map__image .is-active path{ fill: #b8b7bb; } .map__list{ float: right; width : 50%; } .map__list a{ color: inherit; text-decoration: none; transition: color 0.3s; } .map__list a.is-active{ color: #b8b7bb; font-weight:bold; text-decoration: underline; }

Dommage ont peu pas faire pour la réunion x') faut faire le svg avec les découpages.

Quel est ton plugin intellij pour faire du web comme tu veux ? créer les div rapidement, modifier tous les li d'une liste, ...

what it s the name of the program ? Photoshop?

Je m'abonne :)))))

Exactement ce qu'il me fallait !

tu utilise bing ???!

Salut tu fais comment pour tout séléctionner et écrire directemment A B C D E ... ? merci

bon tuto

Vous utilisez quoi comme IDE ? et merci.

bonjour, très bonne vidéo mais j'ai un petit problème dans le JS ! j'ai suivi à la lettre ce que tu as fait mais le navigateur chrome me signale :"Uncaught TypeError: Cannot read property 'forEach' of undefined at carte.js:6" Je re-regarde avec attention la vidéo, je filtre à la virgule mon html et css, mais je ne trouve aucune erreur apparente comparé à ton code. help !

Voila le svg ;D

Tes skills sont top! Merci, j suis sur explorer et ça marche parfaitement, bizzarement mon svg ne s'affiche ni sur chrome ni sur firefox

Super ! J'allais justement comment à me renseigner sur la question :D

Superbe tutoriel, ça va beaucoup m´aider. Sinon je voudrais savoir quel est le nom de l´outil qui permet dans cette vidéo décrire le html plus rapidement ? eg. div.ma-classe#element =>