Untitled

<!DOCTYPE html>
<html >
<head>
    <title>essai</title>
    <meta charset="utf-8" />
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

    <style>
html, body, #map {
font-family:tahoma;
font-size:13px;
          height:100%;
          width:100%;
          padding:0px;
          margin:0px;
       }
 </style>
</head>

 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<body >
    <div id="map" style="width: 100%; height: 100%"></div>
    <script>


        var map = L.map('map').setView([44, 5.9], 13);

    var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',maxZoom: 18});
    osm.addTo(map);


<?php
    $username = "root";
    $password = "mdp";
    $host = "localhost";
    $database="demo";

    $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 id= 1 " );

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

  echo 'var la_trace = omnivore.wkt.parse("'.$wkt.'");';
  echo 'la_trace.addTo(map);';

  //echo 'map.fitBounds(FGtrace.getBounds());';

}
?>

    </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>