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 :)
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.
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
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 ?
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
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 ??
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, 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
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 ?
Pour le forEach il faut voir la version d'IE que tu veux supporter et surement rajouter un polyfill pour créer cette méthode. Normalement pas de problème pour lier à un select par contre faudra mettre un peu de code pour trouver le "selectedIndex" à appliquer au select
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.
Sinon, si ce n'est pas alt, tu as le clic molette qui te permet de "multiplier" ton curseur et du coup d'avoir ta saisi faites sur plusieurs ligne Sur Vscode c'est comme ça par exemple =)
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 !
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à...
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
Bonjour merci beaucoup pour ce cour, j'ai réussi d'appliquer ce cour sur la carte svg du département du france, sauf j'ai une question comment faire pour afficher des donnes dans cette carte j'ai essayer utiliser value dans path lais ca marche pas et merci beaucoup
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 =>
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; }
Très intéressant, je croyais que jamais j arriverais à faire cette carte interactive mais grade à tes explications j y suis presque.
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 :)
Merci mille fois pour ce tuto !! 😇
Toujour le top GrafikArt merci
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.
Merci pour ta gentillesse
Merci super tuto ! C'est vraiment impressionnant la vitesse et la façon dont tu codes avec les raccourcis claviers etc^^
C'est vraiment top et bien expliquer.. merci beaucoup tu es le meilleur
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
Merci beaucoup mon frere..tu viens de me sauver la vie avec ce tuto..;-)
Ce tuto est top !!! Merci beaucoup
clair ... parfait pour mon usage...merci
Je connaissais même pas la fonction debugger pour mettre un point d'arrêt, c'est cool! Merci :)
Juste excellent ! Un grand merci !
vraiment super un grand merci a vous pour tous ces efforts
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 ?
Tu m'as sauvé je t'aime
Спасибо! Отличный урок, красивый язык!
Wow magnifique
Exactement ce qu'il me fallait !
awsoooooome tutorial, thx man ;)
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
Bonjour, comment faites vous pour sélectionner ou écrire sur plusieurs lignes simultanément.
Merci.
pour écrire sur plusieurs lignes , il fait crtl + alt + flèche du bas/haut et ça multiplie son curseur vers le haut ou le bas
merci tu me fais gagner tellement de temps !!@@moondurf1700
Mercie beaucoup!! muy bien explicado :) Muchas gracias
Merci !
I JUST FCKINNNN LOVE UUUUU U ARE MY HERO
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 ??
Comment on peut mettre une fenêtre pop-up sur chaque path ?
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 ?
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 ?
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
intéressant, est ce je pourrais customiser la carte en ajoutant mes icones dans chaque région, définir les zoom.
Oui mais du coup il faut écrire pas mal de code pour rajouter les fonctions :)
Le code est présent sur la page du tutoriel www.grafikart.fr/tutoriels/javascript/carte-interactive-791 mais est réservé aux membre premiums.
C'est un peu (beaucoup) abusé quand même. Un tuto en libre accès c'est fait pour bosser un minimum tu crois pas Fac Faq ?
Super ! J'allais justement comment à me renseigner sur la question :D
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 ?
Pour le forEach il faut voir la version d'IE que tu veux supporter et surement rajouter un polyfill pour créer cette méthode. Normalement pas de problème pour lier à un select par contre faudra mettre un peu de code pour trouver le "selectedIndex" à appliquer au select
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
Quel est ton plugin intellij pour faire du web comme tu veux ? créer les div rapidement, modifier tous les li d'une liste, ...
Aucun plugin
C’est des contrôles claviers juste ? Parce que mon IntelliJ il fait pas ça moi :(
Oui c'est juste des racourcis, mais vu que j'en ai modifié pas mal je ne peux pas vraiment te dire les racourcis originaux :(
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.
Les sources sont disponibles sur la page du tutoriel (en lien dans la description)
pas possible le faire en no code ?
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
Cela dépend de ton éditeur, en général c'est en maintenant alt.
Sinon, si ce n'est pas alt, tu as le clic molette qui te permet de "multiplier" ton curseur et du coup d'avoir ta saisi faites sur plusieurs ligne
Sur Vscode c'est comme ça par exemple =)
pardon ?? c'est quoi ton logiciel il est vachement pratique ! 😍
Très bien. Y a t-il quelque chose de particulier à faire pour que cela fonctionne sous Safari ?
caniuse.com/#feat=svg
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 !
je sais pas si c'est trop tard mais si tu n'as pas débuggé, as-tu bien cette ligne :
if (NodeList.prototype.forEach === undefined) {
c'est bon je l'avais débuggé, merci quand même :)
pour moi, le 'salut' ne sort jamais :( help please
pour moi, le 'salut' ne sort jamais :( help please
@@AA-gi7nc as tu pu debuger? merci
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
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à...
j'ai crois que fill ; stroke ne sont pas rconnus dans mon css
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
de meme ... un peu bloquer , j'ai tester sur tout les navigateurs mais rien ne change
Thank you man! Really appreciate your impact but please can u do english subs as well? TY
Vous utilisez quoi comme IDE ? et merci.
Intellij IDEA
Gracias.
bin gracis isl jrey !! xSS
Je m'abonne :)))))
Voila le svg ;D
Héhé, oui c'est plus moderne et plus simple ^^
what it s the name of the program ? Photoshop?
Affinity Designer
Bonjour merci beaucoup pour ce cour, j'ai réussi d'appliquer ce cour sur la carte svg du département du france, sauf j'ai une question comment faire pour afficher des donnes dans cette carte j'ai essayer utiliser value dans path lais ca marche pas et merci beaucoup
bon tuto
comment la lier a une base de donné
tu utilise bing ???!
Dommage ont peu pas faire pour la réunion x') faut faire le svg avec les découpages.
T oui ...
@@brandondalleau9704 j'ai trouvé si tu veux
Salut tu fais comment pour tout séléctionner et écrire directemment A B C D E ... ? merci
C'est Intellij Idea, et je pense qu'il utilise soit Alt soit Ctrl.
Antoine j'ai aussi IJ mais je n'y arrive pas
T'as essayé Alt + sélectionner ?
ah oui cest bon merci ma caille
alt + schift + fleche ou selection à la souris
Bonjour boss
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 =>
Il faut que tu utilise une extension VSCODE qui s'appelle Emit il me semble
tuto génial mes trop rapide pour un débutant :(
wwooowwww
afff precisava de ajuda e nao entendo frances urgggggggg
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;
}
C'est vraiment top et bien expliquer.. merci beaucoup tu es le meilleur