Partage

Soucis avec une map en JS

18 décembre 2017 à 18:00:00

Salut à vous, j'ai un soucis et j'espère que vous allez pouvoir m'aider. Pour un site, je veux utiliser une carte intéractive de l'argentine. J'ai donc trouvé une map JS que j'ai intégré à ma page. Sauf que là j'ai un soucis.

J'ai donc crée un bock en display flex, et en space-around pour "aérer". Donc ça donne ceci, ce qui est ce que je souhaite : http://nsa39.casimages.com/img/2017/12/18/17121805534042904.png Je précise qu'avant j'avais une image en guise de carte qui était bien positionner comme je le souhaitais. J'intègre donc ma carte en JS que j'ai trouvé sur un site spécialisé, et quand je la met sur la page voilà ce que ça me donne : http://nsa39.casimages.com/img/2017/12/18/17121805445271969.png Comme vous voyez tout se colle, ce qui est normal à cause du texte à droite qui était fournie avec la carte. Je précise que cette carte doit automatiquement correspondre à mon block. D'ailleurs vous voyez qu'elle est automatiquement à la bonne taille, et que le seul soucis c'est le texte.

Quand j'efface ce texte, tout bug et là carte ne s'affiche plus : http://nsa39.casimages.com/img/2017/12/18/17121805534042904.png J'ai bien la petite bulle qui dit que la carte charge mais elle n'arrive jamais. Dans le code, il y a aussi une zone qui décrit la largeur maximum du texte. Je l'efface donc et voici ce que ça donne : http://nsa39.casimages.com/img/2017/12/18/171218055339957154.png Subitement la map devient petite et impossible de la faire plus grande. En fait, dès que je touche au texte tout se met à mal fonctionner, j'ai aucune idée du pourquoi.

	"config": {
		"mapWidth": 339.200,
		"mapHeight": 700.400,
		'textAreaWidth': 600,
		"displayAbbreviations": false,
		"defaultText": "<h1>Argentina</h1><br /><p>Argentina is a massive South American nation with terrain encompassing Andes mountains, glacial lakes and Pampas grassland, the traditional grazing ground of its famed beef cattle. The country is famous for tango dance and music. Its big, cosmopolitan capital, Buenos Aires, is centered on the Plaza de Mayo, lined with stately 19th-century buildings including Casa Rosada, the iconic, balconied presidential palace.</p>"
		

Vous voyez le fameux texte par défaut que je veux enlever. Dès que je le touche, tout part en c****. Une idée du pourquoi et surtout quoi faire ? :/ Merci à tous ceux qui s"intéresseront au problème :)

18 décembre 2017 à 20:35:25

On peut avoir le lien de l'API utilisé ? et de ton code complet si possible ?
19 décembre 2017 à 10:54:09

Salut, merci de ton aide.

Voici l'API que j'ai utilisé : https://jsmaps.io/america/javascript-map-argentina/

Mon code HTML :

<! doctype html>

<html>

    <head>
    
        <link rel="stylesheet" href="style.css">
        
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
        <link href="jsmaps/jsmaps.css" rel="stylesheet" type="text/css" />
        <script src="jsmaps/jsmaps-libs.js" type="text/javascript"></script>
        <script src="jsmaps/jsmaps.min.js" type="text/javascript"></script>
        <script src="maps/argentina.js" type="text/javascript"></script>

    </head>
    
    <body>
    
        <div id="carte_accueil">
        
            <div class="carte_regions">
                
                <img src="titre_province.png">
                
                <br /><br />
            
                <img src="./provinces/buenos_aires.png">&nbsp;<img src="./provinces/cordoba.png">&nbsp;<img src="./provinces/santa_fe.png">&nbsp;<img src="./provinces/formosa.png">&nbsp;<img src="./provinces/chaco.png">&nbsp;<img src="./provinces/entre_rios.png">

                <br />

                <img src="./provinces/jujuy.png">&nbsp;<img src="./provinces/tierra_del_fuego.png">&nbsp;<img src="./provinces/mendoza.png">&nbsp;<img src="./provinces/tucuman.png">&nbsp;<img src="./provinces/misiones.png">&nbsp;<img src="./provinces/cordoba.png">  

                <br />

                <img src="./provinces/santiago_del_estero.png">&nbsp;<img src="./provinces/santa_cruz.png">&nbsp;<img src="./provinces/san_luis.png">&nbsp;<img src="./provinces/san_juan.png">&nbsp;<img src="./provinces/salta.png">&nbsp;<img src="./provinces/rio_negro.png">

                <br />

                <img src="./provinces/neuquen.png">&nbsp;<img src="./provinces/la_rioja.png">&nbsp;<img src="./provinces/la_pampa.png">&nbsp;<img src="./provinces/corrientes.png">&nbsp;<img src="./provinces/chubut.png">&nbsp;<img src="./provinces/soleil.png"> 


            </div>
            
            <div class="carte_argentine">
                
                <img src="titre_carte.png">
                
                <br /><br />
                
                <div class="jsmaps-wrapper" id="argentina-map"></div>

            </div>
            
        </div>
    
        
          <script type="text/javascript">

    $(function() {
      
      $('#argentina-map').JSMaps({
        map: 'argentina'
      });

    });
    
  </script>
        
    
    </body>

</html>

#carte_accueil {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 596px;
}

SUr le code HTML, conformément au fichier d’installation j'ai rajouté les lignes de code nécessaires au fonctionnement. Puis en bas la ligne de code pour afficher la carte et dessous le script. Pour le CSS, j'ai juste défini la taille du conteneur, avec dedans deux élèments. Le pire c'est que ce doit être un tout petit truc qui casse le tout. Mais regarde, dès que je touche le texte, hop, tout part en vrille. Je comprends pas, en tout cas, merci à toi de m'aider :)



19 décembre 2017 à 13:09:42

d'après analyse il faut que tu aies ca, obligatoirement dans ton css

  
    .container {
      width: 960px;
      margin:20px auto;
    }

    @media only screen and (min-width: 768px) and (max-width: 1000px) {
      .container {
        width: 768px;
      }
    }
    @media only screen and (max-width: 767px) {
      .container {
        width: 420px;
      }
    }
    @media only screen and (max-width: 480px) {
      .container {
        width: 300px;
      }
    }

Ca en html

  <div class="container">
    <div class="jsmaps-wrapper" id="argentina-map"></div>
  </div>
C''est ce que j'ai remarqué sur la demo
donc si tu veux changer la class de container tu peux mais tu laisses la map seul dans le container
si tu veux mettre ton image, crée un nouveau container dans le quel il y a celui de la map + celui de l'image
essaie et dis moi
19 décembre 2017 à 15:13:27

Salut, donc voici où j'en suis : http://nsa39.casimages.com/img/2017/12/19/171219030059340886.png

Comme tu le vois, la carte se positionne bien. Je peux enlever le texte, seulement si je le fais je peux encore scroller sur la droite, à cause du " 'textAreaWidth': 600, " présent sur le code de la map. Sauf que si je l'enlève, subitement la carte devient énorme : http://nsa39.casimages.com/img/2017/12/19/17121903040070980.png

J'ai l'impression que dès qu'on règle un soucis, trois apparaissent. J'ai essayé de changer le style du container, en changeant la le width mais à la moindre modification la carte disparait. Par contre pour que le résultat soit comme sur mon 1er screen, à savoir bien positioner j'ai rajouté ce code :

.carte_argentine {
    width: 343px;
    height: 496px;
}

Par contre le height n'a aucun impact sur la hauteur de la carte, contrairement au width.

            <div class="carte_argentine">
                
                <img src="titre_carte.png">
                
                <br /><br />
                
                <div class="container">
                <div class="jsmaps-wrapper" id="argentina-map"></div>
                </div>

            </div>
            
        </div>

J'ai comme tu m'as dit, à savoir que le div de la carte est dans un autre div que j'ai déjà crée. Div qui a comme propriété le code plus haut. Tu as une idée du soucis ? J'ai l'impression que le texte est très ennuyant, mais comme sur mon 2éme screen, si je le vire alors la carte devient très grosse et casse complétement les propriétés du DIV.

Donc voilà, en gros les soucis : le texte, que si on modifie ou qu'on enlève alors la carte devient anormalement grosse. Mais du coup il suffirait de la redimensionner pour qu'elle rentre bien, sauf que si je modifie les propriétés de "container" la carte devient toute petite. L'autre soucis c'est que rien ne semble influer sur le height ... :/

A mon sens, le mieux c'est qu'une fois le textearea etc enlevé, la carte est juste très grosse. Si on arrivait à la redimmensioner, à lui faire respecter les propri de mon div carte_argentine alors ça irait. Mais j'ai beau avoir essayé pas mal de façon avant d'écrire la réponse, rien n'y fait.

-
Edité par Ewi-Kun 19 décembre 2017 à 15:15:31

19 décembre 2017 à 15:57:34

J'ai mis le textAreaWidth à 0

avec ce style: 

    .container {
      width: 260px;
      margin:20px auto;
    }


et y a aucun soucis de marge, c'est surement les @media qui font bugger selon le navigateur

Essaie d'appliquer les modifs et de vider ton cache de navigateur (ou si tu es sur firefox il me semble que si la console d'édition est ouverte ca le fait tout seul)

si tu bloques, au pire fait une archive et envoie la moi

-
Edité par Gh0stFive 19 décembre 2017 à 15:58:10

19 décembre 2017 à 17:09:13

Ça fonctionne très bien ! Finalement où était le soucis ? Par contre je viens de voir que pour des raisons que j'ignore, normalement en cliquant sur une région on devrait tomber sur un lien. Sauf que ça ne marche pas. Pourtant dans le code de la map l'URL de chaque région est précisé, et sa devrait marcher sauf que non. Une idée ? Je t'embête encore un peu ^^

Merci encore à toi pour ton aide rapide ;)

-
Edité par Ewi-Kun 19 décembre 2017 à 17:14:05

20 décembre 2017 à 19:44:55

oui effectivement les url ne marche pas, je sais pas pourquoi, après c'est peu être juste la pour mettre en avant le site de l'API

Si tu veux un lien, tu peux ca:

	    function Start() {
		   var OldHtml = window.jQuery.fn.html;
		   window.jQuery.fn.html = function () {
			 var EnhancedHtml = OldHtml.apply(this, arguments);
			 if (arguments.length && EnhancedHtml.find('.MyClass').length) {
				 var TheElementAdded = EnhancedHtml.find('.MyClass');
// ton evenement
			 }
			 return EnhancedHtml;
		   }
		}
		$(Start);

et dans le champs "text" tu mets un <div class="MyClass"></div> (tu renommes la class comme tu veux)

si tu veux rediriger vers la meme page tu mets le lien direct dans le code, sinon tu rajoutes un data-url="monurl" dans la div et en jQuery:

tu fais: window.location = TheElementAdded.attr('data-url')

PS: désolé pour la réponse tardive 

26 décembre 2017 à 0:07:49

Salut, désolé du gros retard de ma réponse. Mais j'ai pas comprit où je devais mettre ce code ... En fait, quand on clique sur une région, sa ouvre le texte qui apparait sur le côté. Ce serait pas plus simple de trouver cette commande et d'en gros au lieu de lui dire d'ouvrir le texte, d'ouvrir l'URL ?

Soucis avec une map en JS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown