Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
#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
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
