Untitled

<!DOCTYPE html>
<html >
<head>
    <title>essai</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="js_css/leaflet.css"  />
         <style>
html, body, #map {
font-family:tahoma;
font-size:13px;
          height:100%;
          width:100%;
          padding:0px;
          margin:0px;
       }
 </style>
</head>
<script src="js_css/leaflet.js"> </script>
<script src="js_css/jquery.js"> </script>
 <script src="js_css/LeafletToWKT.js"> </script>
<body >
    <div id="map" style="width: 100%; height: 100%"></div>
    <script>


        var map = L.map('map').setView([44, 5.9], 13);
        mtb = L.tileLayer('http://tile.mtbmap.cz/mtbmap_tiles/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> &amp; USGS',
        continuousWorld: true
});
        mtb.addTo(map);


    <?php
    $username = "nom_utilisateur";
    $password = "mdp";
    $host = "localhost";
    $database="nom_base";

    $server = mysql_connect($host, $username, $password);
    $connection = mysql_select_db($database, $server);

  $requete = mysql_query("SELECT distance,d_plus,d_moins, AsText(geom) as wkt FROM gpx where nom= 'pyramide cassini' " );

if($requete)
{
  $res=mysql_fetch_assoc($requete);
  $distance= $res['distance'];
  $d_plus= $res['d_plus'];
  $d_moins=$res['d_moins'];
  $wkt=$res['wkt'];

  echo 'omnivore.wkt.parse('.$wkt.').addTo(map);';

}
?>

    </script>
    <div style="position:absolute;top:70px;left:10px; background:#000;color:#fff;border-radius:8px;opacity:0.8; padding:10px;"><?php
     echo '<p>Distance: '.$distance.' kms</p>';
     echo '<p>D+: '.$d_plus.' m</p>';
     echo '<p>D-: '.$d_moins.' m</p>';
      ?> </div>
</body>
</html>