navigation à la google map Fermé

Question

Bonjour,

Je suis actuellement en train de développer un script qui permet par glissé/déposé, de se déplacer sur une carte (une image). L'image étant unique et très grande, elle met par conséquent beaucoup de temps pour se charger complètement. (je place l'image en tant que background d'un div, et je me déplace dans le div, l'image suivant les coordonnées de déplacements...).

Le site de google map, que je pense tout le monde connait, utilise le même système. Or il n'y a pas que une image, mais une multitude ! Et celles-ci ne se charge uniquement lorsque l'on y accède par affichage. Il y a donc une économie des temps de chargement, car on ne charge que les images que l'on voient sur les milliers (millions ? ^^) que google présente. Bien entendu les images forment un ensemble (collées les unes aux autres, elles forment une "pseudo-unique image").

J'aimerais donc savoir comment faire pour pouvoir recréer le système de google map ?

Les idées qui me viennent à l'esprit:
-Utiliser un tableau dans mon div, et placer dans un chaque cellule un background correspondant à une portion de ma grande image source. Mais alors comment je pourrais déplacer mon tableau dans mon div ? (tableau = même taille que image source > div)
-Ensuite détecter les cellules du tableau affichées, et placer les background dans les cellules avec une partie en AJAX

Je ne sait pas si je part dans la bonne voie avec ce raisonnement...ou y a t'il plus simple pour réaliser se que je veux ?

merci d'avance.

Leto23

jona303 · Answer

Mhhh, joli défi,.. :)

comme ça je me dirais que je diviserais la partie visible en 4 div,.. topLeft,.. topRight ,....
avec autour de la "partie visible" des div de la même dimension que les div topLeft, topRight,..

quand on déplace, on déplace l'ensemble de ces div, et quand il ne reste plus de div d'un coté, c'est qu'il y en a de trop de l'autre coté,.. on le déplace la ou il n'y en a plus, et on adapte le background,...

Je sais pas si c'est clair, il est tard,.. mais ca me semble jouable.. :)

leto23 · Answer

Merci de ta réponse J'ai aussi pensé aussi a mettre des DIV, après avoir posté mon sujet ^^ Selon ta technique, il me faudrait 4 DIV "visibles", et 12 DIV cachés pour prendre en compte tout les déplacements possibles. Sa fait en tout 16 DIV...sa fait quand même beaucoup... Ne pourrais t'on pas faire le même principe mais avec seulement 9 DIV ? J'ai fait un exemple sur paint rapidement : http://cluster1.easy-hebergement.net/ En gros, il y a un DIV centrale et 8 DIV en périphérie, il suffit alors de regarder quel est le div central et de charger dans tous les autres, les backgrounds correspondants... Autre problème, j'ai mon "DIV conteneur" qui contient les autres "DIV image", sauf que si je fait un cliquer déplacer, alors la souris s'empare de l'image du "DIV ou des DIV image" qui se trouve dans le conteneur ! Les images étant déclarées en tant que background, il devrait être impossible pour la souris de s'en emparer...c'est tout de même bizarre, car une fois emparée, si je la place dans l'url de Firefox ou pour créer un nouvel onglet, il ne se passe rien...je ne comprend vraiment pas. Exemple:

jona303 · Answer

pour le nombre de div c'est un peu à toi de voir,..

Pour les clicks, ne fais pas ça dans le HTML,..
en jquery ça me parait tt à fait faisable (et le plugin UI pour jquery),...

genre tu donnes une classe commune a toutes tes miniDiv
et puis tu fais un truc du style

$('document').ready(function(){
    $('#container').click(function(){
        $('.miniDiv).startDrag();
    }).mouseUp(funciton(){
       $('.miniDiv).stopDrag();


});

});

leto23 · Answer

Quand tu parles des clicks, tu veux dire les onMouseDown, onMouseover,... ?
La j'arrive a me déplacer quand il n'y a que une seul et unique image, sans problème. Je n'ai jamais utilisé jquey (entendu parler seulement...) et je n'ai pas trouvé le plugin que tu cites...par contre il y a des plugin sur le drag and drop.

J'utiliserais jquery pour faire quoi ? (le système drag and drop simple ? le système de découpage de l'image dans le div ?...)

jona303 · Answer

jquery est un framework javascript..
En gros ca "simplifie"le js et c'est très puissant, pour l'utiliser, tu dois d'abord inclure le fichier jquery dans le html
https://jquery.com/
et pour le systeme dragAndDrop il faut un plugin jquery qui s'appelle UI
https://jqueryui.com/
et avec ces deux la tu devrais pouvoir faire ce que j'ai écrit,... m^mee si ça te parait compliqué,.. un fois que c'est assimillé,  tu fais ce que tu veux,.. donc voila bon courage, si t'as des questions n'hésite pas.. ;)

leto23 · Answer

J'ai réussit a recréer ma carte navigable avec jquery. Pour cela j'ai utilisé la méthode "draggable()" de jquery UI.
C'est effectivement plus simple à faire avec jquery quand on a comprit son fonctionnement ^^

Maintenant il va falloir que je découpe ma carte en partie...

Y aurais t'il avec jquery moyen de faire un zoom sur une image ? un slider qui ferais un zoom pourrais être pas mal ^^

jona303 · Answer

ici ;) 
http://www.mind-projects.it/jqzoom_v10

jona303 · Answer

mais en y réfléchissant 2 min,...
Je pense que la meilleure manière de fonctionner pour le "ZOOM" c'est de créer l'image en PHP,..
Comme ça avec peu d'image en haute qualité (la définition qui correspond au plus grand zoom acceptable), tu peux faire une image légère pour la navigation "dézoomée", et tout aussi légère pour la navigation zoomée.. sans pertes de qualité.

ici il ya un petit tuto,...
https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql/916429-creez-des-images-en-php
 et si tu veux j'ai déjà deux trois classes php que je peux te filer qui créent des images (->MP) 
voila bonne chance.. 

et bon courage, il reste un peu de taf.. :p

leto23 · Answer

Je verrais pour le zoom, une fois que j'aurais fini le découpage de l'image ^^

Pour voir se que j'ai déjà fait :
http://cluster1.easy-hebergement.net/

j'ai réduit la qualité de l'image au (presque) maximum pour qu'elle se charge le plus rapidement possible...elle fait 172 ko (au lieu de 5 Mo ^^)
On peut parcourir la carte en drag and drop, l'affichage reste limité à se qui est visible...(pas moyen de faire sortir la carte de la zone d'affichage par exemple). J'affiche en bas ("DIV1:") la position de l'origine de la carte, se qui me servira pour détecter les images à charger en ajax, mais sa sa reste à faire....

En tous cas merci jona303 pour ton aide !

Je connait déjà l'utilisation des images en php, et le tuto sur le site du zéro. J'ai chercher il y a pas longtemps sur comment faire un zoom...et apparemment, il n'existe aucune méthodes en css pour le faire...les deux seules solutions que je connaisse sont:
-faire des traitements sur l'image en PHP, mais sa doit demander pas mal de ressource...
-avoir déjà sur le serveur, les images en différentes tailles, sa implique de recharger à chaque fois, des images différentes juste pour afficher plus gros/moins gros...

Sur ces deux méthodes, je ne sait qu'elle est la plus rapide...et la plus efficace...

Sait tu quelle est la technique appliquée sur jqzoom, et si cela demande beaucoup de ressources ?

Navigation à la google map

9 réponses