OpenStreetMap

OpenStreetMap

 

 

 

 

 

 

 

Choquet Nicolas

10/03/2018

 


 

Sommaire

 

Introduction

Historique

Qu’est ce que c’est ?

l’API ‘OpenLayout’

TP

Webographie

Rendu Final

 


 

Introduction

 

Initié en juillet 2004 par Steve Coast à l’université de Londres, OpenStreetMap ( OSM ) est un projet open source qui à pour but de constituer une base de donnée géographique du monde en utilisant un système GPS ainsi que d’autres données libres.

OpenStreetMap à dépassé le million de contributeurs début 2013.


 

Historique

 

Le projet OSM à été présenté pour la première fois en 2009 par son créateur, Steve Coast lors de la conférence ‘’Euro Foo Camp”.

Le premier prototype du projet est une cartographie tracée à partir d’une trace GPS collecté à partir d’un trajet en vélo.

En août 2006, une fondation à but non lucrative au nom du projet est créé pour le soutenir. Ses objectifs principaux sont de gérer l’infrastructure matérielle nécessaire à OpenStreetMap et la protection juridique du projet.

 


 

 

Qu’est ce que c’est ?

 

C’est une carte du monde sous forme de layouts, c’est à dire des morceaux de carte assemblés entre eux pour reconstruire une carte complète.

De la même manière que plusieurs distributeurs de carte ( comme google maps ).

C’est pourquoi une API javascript nommée ‘OpenLayout’ a été développée, permettant d’exploiter les layouts du projet OpenStreetMap mais aussi ceux des autres distributeurs de carte ce qui simplifie le changement de distributeur pour un développeur web.

 


 

 

L’API ‘OpenLayout’

 

L’API JavaScript ‘OpenLayout’ a été conçu pour simplifier la création de cartes Javascript.

elle possède une syntaxe assez simple qui permet de changer de distributeur de carte comme par exemple passer de Google Maps à OpenStreetMap ou inverser sans changer quoi que ce soit au design.

 


 

TP

 

Je vais vous faire une petite démo de l’utilisation de OpenStreetMap avec OpenLayers.

Pour encore plus simplifier l’utilisation de l’API je vais créer une classe JavaScript.

 

Prérequis

 

  • JQuery
  • Google Geocoding API
  • API de géolocalisation du navigateur
  • EcmaScript 6

Partie 1: Création de l'arborescence

 

  • projet
    •  css
      •  styles.css
    • images
      • openstreetmap-logo.png
    • js
      • classes
        • OpenStreetMap.js
        • Utils.js
      • scripts.js
    • index.html

 

Partie 2: index.html

 

<!DOCTYPE HTML>

<html>

<head>

   <meta charset="utf-8" />

   <title>Demo de OpenStreetMap avec OpenLayers</title>

   <link rel="stylesheet"

         type="text/css"

         href="css/styles.css" />

   <script src="https://code.jquery.com/jquery-3.3.1.js"

           integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="

           crossorigin="anonymous"></script>

   <script type="application/javascript"

           src="http://www.openlayers.org/api/OpenLayers.js"></script>

   <script type="application/javascript"

           src="js/classes/Utils.js"></script>

   <script type="application/javascript"

           src="js/classes/OpenStreetMap.js"></script>

   <script type="application/javascript"

           src="js/scripts.js"></script>

</head>

<body>
<!-- conteneur de la map -->
   <div class="map"

        id="map"></div>

</body>

</html>

 

Partie 3: Utils.js

 

// Création d’une classe d’outils avec des méthodes statiques.


"use strict";

// utilisation des variables superglobales et de EcmaScript6

class Utils {

// création d’une classe JavaScript

   constructor() {}

// constructeur vide

   static sleep(ms) {

// méthode statique asynchrone

       return new Promise(resolve => setTimeout(resolve, ms));

   }

}

 

Partie 3: OpenStreetMap.js

 

"use strict";

class OpenStreetMap {

   constructor(id_div, id_map, search=true, zoomButton=true) {

       this.id_div = id_div;

       this.id_map = id_map;

       this.search = search;

       this.zoomButton = zoomButton;



       this.api_url = 'https://maps.googleapis.com/maps/api/geocode/json';

       this.api_key = 'AIzaSyCffLpA2EovV_ablsIlYEGUM7z0UkSg_uA';

 
// propriétés publiques  ( le mot clé private n’existe pas ) de la classe OpenStreetMap

   }

   init() {

// méthode d’initialisation de la map qui va créer l’environnement pour que la map puisse fonctionner ainsi que le cadre de recherche dans la div de référence.

// c’est aussi cette méthode qui vas créer la div de chargement.

       let string = '';

       string +=

               '<div id="search">\n' +

               ' <input type="text" id="address" placeholder="Votre adresse" />\n' +

               ' <input type="button" id="send" value="Ok" />\n' +

               ' <div id="results"></div>\n' +

               '</div>\n';

       $('#' + this.id_div).html(

           string +

           '<div class="generated_map" id="' + this.id_map + '">\n' +

           ' <div id="osm_loading">\n' +

           ' <img src="images/openstreetmap-logo.png" alt="openstreetmap loading" id="loading_logo" />\n' +

           ' <br />\n' +

           ' <span class="loading_libelle"> Loading ... </span>\n' +

           ' </div>\n' +

           '</div>');

   }

   reset() {

       $('#' + this.id_map).html('');

   }


   position_for_address(address) {

// méthode pour récupérer les coordonnées de l’adresse recherchée avec l’API google maps geocoding. Si l’adresse recherchée renvoie plusieurs résultats, les résultats renvoyés seront listés dans le cadre de recherche, si non une carte est crée avec les coordonnées GPS renvoyées par l’API.

       let api_url = this.api_url;

       let api_key = this.api_key;



       address = address.replace(/ /, '%20').replace(/'/, '%27');

       let url = api_url + '?address=' + address + 'A&key=' + api_key;

      

$.ajax({

           url: url,

           method: 'GET'

       }).done(function (data) {

           if (data.status === 'OK') {

               if(data.results.length > 1) {

                   this.print_chooses(data.results);

               }

               else {

                   let lat = data.results[0].geometry.location.lat;

                   let lng = data.results[0].geometry.location.lng;

                   create_map(lat, lng);

               }

           }

           else {

               if(data.results.length === 0) {

                   let string = '<ul class="addresses">';

                   string += '<li>Aucune place n\'à été trouvée</li>';

                   string += '</ul>';

                   $('#search #results').html(string).addClass('visible');

               }

               else {

                   console.error('La requête à échouée : ' + data.error_message);

               }

           }

       })

   }

   print_chooses(chooses) {

// méthode pour afficher les résultats renvoyés par l’API de google lorsqu’il y en a plusieurs.

       let string = '<ul class="addresses">';

       chooses.forEach(function (choose, key) {

           string += '<li class="place" id="' + choose.place_id + '">' + choose.formatted_address + '</li>';

       });

       string += '</ul>';

       $('#search #results').html(string).addClass('visible');


       $('.place').each(function () {

           $('#' + $(this).attr('id')).click(function () {

               $('#search #address').val( $(this).html() );

               $('#search #send').click();

               $('#search #results').html('')

                   .removeClass('visible');

           });

       })

   }


   async get_gps_position() {

// récupère les coordonnées GPS actuelles pour initialiser la première map.

       let id_map = '#' + this.id_map;

       if (!$(id_map).attr('coords')) {

           if (navigator.geolocation) {

               let myPosition = {};

               navigator.geolocation.getCurrentPosition(function (position) {

                   myPosition = {

                       Lat: position.coords.latitude,

                       Lng: position.coords.longitude

                   };

                   $(id_map).attr('coords', JSON.stringify(myPosition));

               });

               await Utils.sleep(6000);

               return JSON.parse($(id_map).attr('coords'));

           } else {

               console.error('l\'API Géolocalisation n\'est pas disponible dans votre navigateur !');

               return {

                   Lat: null,

                   Lng: null

               };

           }

       }

       else {

           return JSON.parse($(id_map).attr('coords'));

       }

   }

    async create(lat = null, lng = null) {

// crée une map. les coordonnées GPS sont facultatifs. Si ils ne sont pas renseignés, ils sont récupérés par la méthode get_gps_position().

       if($('#’ + this.id_map + ‘ #osm_loading').length === 0) {

           $('#’ + this.id_map).html('');

       }

       if (lat === null && lng === null) {

           let GPS = await this.get_gps_position();


           lat = GPS.Lat;

           lng = GPS.Lng;

       }

       let zoom = 15;


       let fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984

       let toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

       let position = new OpenLayers.LonLat(lng, lat)

           .transform(fromProjection, toProjection);

       let map = new OpenLayers.Map(this.id_map);

       let mapnik = new OpenLayers.Layer.OSM();

       map.addLayer(mapnik);


       let markers = new OpenLayers.Layer.Markers("Markers");

       map.addLayer(markers);

       markers.addMarker(new OpenLayers.Marker(position));


       map.setCenter(position, zoom);

   }



   async up() {

// génère la div de chargement, la rend visible, récupère les coordonnées GPS de l’utilisateur, vide la div de la map puis crée une map avec un marqueur pour localiser l’utilisateur. Si la propriété ‘search’ est à true, le cadre de recherche sera affiché si non, il sera caché. Si la propriété ‘zoomButton’ est à true, les boutons ‘+’ et ‘-’ seront affichés, si non, ils seront cachés.

       $('#’ + this.id_map).html(

           '<div id="osm_loading">' +

           '<img src="images/openstreetmap-logo.png" alt="openstreetmap loading" id="loading_logo" />' +

           '<br />' +

           '<span class="loading_libelle"> Loading ... </span>' +

           '</div>'

       ).css('overflow', 'visible');

       await this.get_gps_position();

       this.reset(this.id_map);

       await this.create();

       if(this.search) {

           $('#search').css('display', 'block');

       }

       if(!this.zoomButton) {

           $('.olButton').css('display', 'none');

       }

       $('#search #send').click(function () {

           this.position_for_address($('#address').val());

       });

   }

}

 

Partie 4: scripts.js

 

$(document).ready(function () {

les 3 lignes de code qui initialisent et génère la carte

   let map = new OpenStreetMap('map', 'basicMap', true, true);

   map.init();

   map.up();

});

 

Partie 5: styles.css

 

/* mise en page de la carte et son environnement */

html, body, .map, .map .generated_map {

   width: 100%;

   height: 100%;

   margin: 0;

   overflow: hidden;

}

.map #search {

   display: none;

   position: fixed;

   top: 10px;

   left: 40px;

   background: rgba(0, 0, 0, 0.5);

   z-index: 1000;

   min-height: 50px;

   padding: 10px;

   -webkit-border-radius: 15px;

   -moz-border-radius: 15px;

   border-radius: 15px;

}

.map #search #results {

   display: none;

}

.map #search #results .place {

   list-style: none;

   cursor: pointer;

}

.map #search #results.visible {

   display: block;

   margin-top: 35px;

   color: white;

}

.olControlAttribution.olControlNoSelect {

   display: none;

}

.olButton {

   position: fixed;

   top: 45px;

   -webkit-border-radius: 15px;

   -moz-border-radius: 15px;

   border-radius: 15px;

}

.olControlZoomIn {

   left: 75px;

}

.olControlZoomOut {

   left: 45px;

}

#osm_loading {

   margin-top: 50px;

   text-align: center;

}

#osm_loading #loading_logo {

   width: 500px;

}

#osm_loading .loading_libelle {

   font-family: "Lato", sans-serif;

   font-size: 20px;

}



Rendu Final

 


 

Webographie

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *