ExpoActes : Fonctions pour afficher une carte OpenStreetMap

Quelques fonctions qui facilitent la programmation pour afficher une carte OSM

fichier osm_util.php
<?php

/*

  Fonctions pour  OSM
  
*/  


/* Initialisation du Javascript

    parametres 
    latitude du centre
    longitude du centre
    la valeur du zoom initial

*/

function OSM_init_carte($lat,$lon,$geo_zoom) {

     // charge les js et css leaflet 
    echo '<link rel="stylesheet" href="/leaflet/leaflet.css" />';
    echo '<link rel="stylesheet" href="/leaflet/leaflet.fullscreen.css" />';
    echo '<script src="/leaflet/leaflet.js" ></script>';
    echo '<script src="/leaflet/Leaflet.fullscreen.min.js"></script>';


    // generation de la carte OSM
    echo '<script type="text/javascript">';
    echo '  var lat = '.$lat.';';
    echo '  var lon = '.$lon.';';
    echo '  var macarte = null;';
    // cree la carte 
    echo '  function initMap() {';
    echo '          var iconBase = "/actes/img/pin_eye.png";';
    echo "          macarte = L.map('map').setView([lat, lon], ".$geo_zoom.");";
    echo '          L.tileLayer("https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png", {';
    echo '                  attribution: \'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>\',';
    echo '                  minZoom: 1,';
    echo '                  maxZoom: 20';
    echo '          }).addTo(macarte);';
    // le marker de base
    echo '          var myIcon = L.icon({';
    echo '                  iconUrl: iconBase ,';
    echo '                  iconSize: [21, 34],';
    echo '                  iconAnchor: [0, 0],';
    echo '                  popupAnchor: [0, 0],';
    echo '          });';
  

}  

  
// pour le passage en plein écran
function OSM_plein_ecran(){
    echo '          macarte.addControl(new L.Control.Fullscreen({';
    echo '               title: {';
    echo "             'false': 'Passer en plein écran',";
    echo "             'true': 'Sortir du plein écran'";
    echo '                      }';
    echo '                  }));';
    echo '  }';

}

// on charge la carte
function OSM_charge_carte(){
    echo 'window.onload = function(){';
    echo '          initMap(); ';
    echo '};';
    echo '</script>';
}  


//--- affiche la Carte
// parametre la hauteur de la carte en pixels  
function OSM_affiche_carte($height){
    echo '<div id="map"></div>';
    echo '<style type="text/css">';
    echo '  #map{ ';
    echo '          height:'.$height.'px;';
    echo '  }';
    echo '</style>';

}


// message d'attente
/* parametres

    $actif      1   affiche le message
                0   supprime le message

    $msg        message a afficher
*/

function OSM_attente($actif,$msg=""){
    if ($actif) {
       echo "<div id='message' style='display:none;text-align: center;'>".$msg."</div>";
       echo "<script>";
       echo "document.getElementById('message').style.display = 'block';";
       echo "</script>";
       ob_flush();
       flush();
       ob_flush();
       flush(); 

   }else{
       // supprime msg d'attente 
        echo "<script>";
        echo "document.getElementById('message').style.display = 'none';";
        echo "</script>"; 
   } 

}  


function OSM_centre_carte($BdD) {
     // recuperation du centre de la carte
     $sqlgoc="select valeur from act_params where param='GEO_CENTRE_CARTE'";
     $resgoc=mysqli_query($BdD,$sqlgoc);
     $rowgoc=mysqli_fetch_array($resgoc);
     $georeq = "select LON,LAT from act_geoloc where COMMUNE = '".$rowgoc['valeur']."' and STATUT in ('A','M')";
     $resgeo =  mysqli_query($BdD,$georeq);
     if ($geo = mysqli_fetch_array($resgeo)){
        $lat=$geo['LAT'];
        $lon=$geo['LON'];
     }else{
        $lat=0;
        $lon=0;
     }
     $coord=array($lat,$lon);
     return $coord;
}
  
  
function OSM_zoom_initial($BdD){
      // recup du zoom initial
    $sqlzi="select valeur from act_params where param='GEO_ZOOM_INITIAL' ";
    $reszi=mysqli_query($BdD,$sqlzi);
    $rowzi=mysqli_fetch_array($reszi);
    return $rowzi['valeur'];
}    
  
  



?>

Squelette d’une page affichant une carte OSM

<?php

//  les inclusions necessaire
require('.....');
require("osm_util.php");

Recupération des parametres _GET ou _POST

Ouverture de la base de données -> pointeur $BdD

Titre de la Page

// recuperation du centre de la carte
$coord=OSM_centre_carte($BdD);

// affichage message d'attente
OSM_attente(1,"Génération de la carte en cours. Patientez...");

// init de la carte
OSM_init_carte($coord[0],$coord[1],OSM_zoom_initial($BdD));

!! Attention ne plus rien afficher a l'ecran a partir d'ici sinon plantage du javascript

recherche dans ExpoACtes des données a afficher
on met dans la variable $texte_html les données a afficher dans le marqueur.
$rowgeo est une array résultat d'une requete sur la table act_geoloc

// affiche le marker de la commune avec ces infos
             echo 'var marker = L.marker(['.$rowgeo['LAT'].','.$rowgeo['LON'].'],{ icon: myIcon }).addTo(macarte).bindPopup("'.$texte_html.'");';

OSM_plein_ecran();
OSM_charge_carte();
OSM_attente(0);
OSM_affiche_carte(800);

Fermeture Base de données

?>