[Résolu] Map box - probleme de chargement des tuiles/ fonds de carte

Bonjour,

Je suis en train de remplacer une carte g map par map box sur ce site http://www.lapasserelle-massage.fr/pages/contact.php ( Bouton "nous situer" ) Et j'ai un problème de chargement des fonds de carte ! Je ne sais pas trop quoi faire, quelqu'un a t il une idée ?

Mon .js :

function loadMap() {
if(document.getElementById('Gmap')){
   
L.mapbox.map('Gmap', 'silencesim.ghhp80b9', {
    zoomControl: false
})
    .setView([43.53322, 5.44691], 125);
   
}
}

function showMap(){
    
    $("#mapI").show(0);
    $("#mapIS").show(0);
    $("#Gmap").css("position","absolute").css("marginLeft","00px").css("left","15px").css("marginTop","0px").css("width","510px");
      loadMap();
}

function hideMap(){

    $("#mapI").hide(0);
    $("#mapIS").hide(0);
    $("#Gmap").css("position","absolute").css("left","-15000px");
}

Merci

Bonjour.

En fait, il semble qu'il s'agit du même problème qu'avec Google Map. Tu ne peux pas initialiser une carte si ton conteneur est en display:none.

Donc je vois deux solutions : initialiser ta map une fois que ton conteneur est bien visible (une fois ou à chaque que tu fais apparaitre la map) ou alors (petite astuce qui fonctionnait avec GMap) tu utilises visibility:hidden à la place de ton display:none.

Salut,

visibility:hidden ne semble pas fonctionner. Sinon dans l'aide Mapbox il propose d'utiliser la fonction map.invalidateSize() https://www.mapbox.com/help/#why-map-cropped-hidden-shown
mais je ne vois pas comment l'utiliser.
Et pour ta solution ça reste un peu flou pour moi, peux tu approfondir ?

merci
Modifié par silence (17 Dec 2013 - 19:26)

Effectivement il faudrait tester leur fonction, je vois un truc du style avec ton code :

var map = null;

function loadMap() {
  if(document.getElementById('Gmap')){
   
    map = L.mapbox.map('Gmap', 'silencesim.ghhp80b9', { zoomControl: false }).setView([43.53322, 5.44691], 125);
   
  }
}

function showMap(){
    
  $("#mapI").show(0);
  $("#mapIS").show(0);

  $("#Gmap").css({"position":"absolute", "marginLeft":"0px", "left":"15px", "marginTop":"0px", "width":"510px"});
  if (!map) {
    loadMap();
    map.invalidateSize()
  }
}

function hideMap(){
  $("#mapI").hide(0);
  $("#mapIS").hide(0);
  $("#Gmap").css({"position":"absolute", "left":"-15000px"});
}

J'espère ne pas avoir fait d'erreur.

Pour ma solution, on verra si celle-là ne fonctionne pas.
Modifié par SolidSnake (17 Dec 2013 - 22:06)

Hello Solidsnake,

J'ai testé ta solution, malheureusement le résultat reste le même...

Salut.

Perso, je viens de tester sur fiddle et ça à l'air de fonctionner -> LIEN

Je me rends compte d'ailleurs que le map.invalidateSize() ne sert pas à grand chose dans mon exemple, mais il est peut-être quand même préférable de le laisser.

J'ai aussi remarqué que tu as mis un zoom de 125, ça ne doit pas dépasser les 19 ou 20.

Enfin voilà, je te conseillerais de simplifier au maximum ton code. Tu pourras sûrement ajouter après des animations sur ta lightBox...

NB : en tout cas, je ne connaissais pas MapBox, ça a l'air sympa, le code doit être légèrement plus simple que GoogleMap.
Modifié par SolidSnake (18 Dec 2013 - 11:48)

Avec le Fiddle c'est super pour comprendre ! Merci
Maintenant ça marche !