Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Suite à un problème technique intervenu entre le 22 et le 23 mars, nous avons du procéder dans la soirée du 25 mars, à la restauration de la base de données du 24 mars (matinée).

En clair, nous avons perdu vos contributions et inscriptions du dimanche 24 et du lundi 25 mars.
Nous vous prions de nous excuser.

#1 Thu 26 October 2017 13:28

kristen
Juste Inscrit !
Date d'inscription: 26 Oct 2017
Messages: 2

affichage décalé et coupé sous leaflet

Bonjour,

Nouvel utilisateur de leaflet j'ai fait un bout de programme qui :
1 - cherche la latitude et la longitude d'une ville dans une base données
2 - affiche un bout de carte centré sur cette ville (OSM en breton).

Résultat conforme aux souhaits.

Tout content je passe à l'intégration dans un programme plus important où l'ID créé par leaflet s'insère dans un autre ID.
Et là patatras, la carte une partie de la carte seulement s'affiche, le reste est blanc et en plus c'est décalé légèrement décale à l'est et non plus centré sur la ville.

Pourtant j'ai le même code tout simple :

Code:

var mylat = 47.216667;
var mylong = -1.55;
var carte = L.map('macarte').setView([mylat, mylong], 12);
L.tileLayer('http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png',
{maxZoom: 19}).addTo(carte);

Si quelqu'un a une piste, merci d'avance !

Hors ligne

 

#2 Thu 26 October 2017 22:59

FlorianD
Membre
Date d'inscription: 22 Dec 2016
Messages: 90
Site web

Re: affichage décalé et coupé sous leaflet

Bonjour Kristen,

Sans les codes fonctionnels puis non fonctionnels, c'est difficile de se plonger dans ta description. Je ne comprends pas ce que signifie l'ID puis l'intégration dans l'ID? Peux-tu détailler les différences d'un script à l'autre stp si cela ne met pas à mal ton projet bien entendu.

FD

Hors ligne

 

#3 Fri 27 October 2017 21:54

kristen
Juste Inscrit !
Date d'inscription: 26 Oct 2017
Messages: 2

Re: affichage décalé et coupé sous leaflet

Salut Florian et merci

Plus de précisions : je travaille sur un dico français-breton et je souhaite, lorsqu'il s'agit du nom d'une commune, permettre au visiteur de visualiser d'un simple clic une petite carte centrée sur cette commune. Novice total en la matière, j'ai écrit ce bout de code, qui fonctionne (PHP7)

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>kartennoù</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script>
    function _toggle() {
       var zzz= document.getElementById("macarte")
       var yyy=document.getElementById("kart")
       if(zzz.style.height == "0px"){
        zzz.style.height = "300px";
        yyy.style.color="red";
        yyy.innerHTML="kartenn OSM ▲";
        } else {
        yyy.style.color="green";
        zzz.style.height="0px";
        yyy.innerHTML="kartenn OSM ▼";
        }
       }       
    </script>
</head>

<body>
<?php 
$data='0k';
if ($data != '0')
{
if ($data=="1" || $data=="1k")
{echo 'skeudenn[où]';}
if ($data=="0k" || $data=="1k")
{
include ('connect.inc.php');
$sql="SELECT latitude AS lat, longitude AS longi
FROM commune
WHERE commune.nom_commune = 'Nantes'";
if($result = mysqli_query($link, $sql)){
    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_array($result)){ 
         $zelat= $row ['lat'];$zelong= $row['longi'];             
        }         
    } else{echo "No records matching your query were found.";}
} else{echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);}

?>
<p id="kart" onClick="_toggle()";>kartenn OSM ▼</p>
     <div id="macarte" style="width:545px; height:300px;"></div>
     <script type="text/javascript">
        var mylat = <?php echo $zelat; ?>;
        var mylong = <?php echo $zelong; ?>;
        var carte = L.map('macarte').setView([mylat, mylong], 12);
        L.tileLayer('http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png',
        {maxZoom: 19}).addTo(carte);
        macarte.style.height="0px";        
     </script>
<?PHP
mysqli_free_result($result);// Free result set
mysqli_close($link); // Close connection
}
}
else
{echo 'skeudenn ebet';}
?> 
</body>
</html>

Je suis donc passé à l'étape suivante, l'intégration dans mon programme pour le dico (PHP + MySQL). Voici l'extrait concerné (PHP5) :

Code:

if ($trad[skeud]=='0k' || $trad[skeud]=='1k')
{
$sql=mysql_query("SELECT latitude AS lat, longitude AS longi
FROM kumun
WHERE kumun.nom_commune = 'Nantes'");
while($row = mysql_fetch_array($sql))
 {$zelat= $row ['lat'];$zelong= $row['longi'];} 
?>
<p id="kart" onClick="_toggle()";>kartenn OSM </p>
<div id="macarte" style="width:545px; height:300px;"></div>
<script type="text/javascript">
var mylat = <?php echo $zelat; ?>;
var mylong = <?php echo $zelong; ?>;
var carte = L.map('macarte').setView([mylat, mylong], 12);
L.tileLayer('http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png',
{maxZoom: 19}).addTo(carte);
macarte.style.height="0px";        
</script>

(Pour l'instant 'Nantes"' est noté en dur pour la phase d'essai, mais ensuite ça marchera avec n'importe quelle commune.)

On peut tester à cette adresse  http://geriaoueg.free.fr :
1 - taper "naoned" dans le formulaire en haut à gauche (sans les guillemets)
2 - cliquer sur kartenn en bas de la page

L'affichage est désastreux (désolé, je n'ai pas réussi à mettre des images dans mon post)...

Quand je parlais maladroitement de "ID dans l'ID", je voulais simplement dire que ce code s'intégre désormais dans un programmes comprenant déjà des colonnes, des CSS associés, etc..  Peut-être y-a-t-il un conflit de ce côté-là ???

Hors ligne

 

Pied de page des forums

Powered by FluxBB