Aller au contenu

14. Se promener place du Capitole#

📆 Date de publication initiale : 17 novembre 2008

Introduction#

logo Google

Il est possible grâce à l'API Google Maps de naviguer virtuellement dans les rues, nous verrons ici comment implanter cette fonctionnalité.

Créer un panorama#

Construire un panorama en lui indiquant son emplacement : 

var myPano = new GStreetviewPanorama(document.getElementById("pano"));

Définir une destination : 

var capitole = new GLatLng(43.60436298129637, 1.442950341024869);

Définir les attributs de la caméra - yaw pour la direction en degré de l'angle de vue et pitch l'inclinaison de la caméra : 

var myPOV = {yaw:370.64659986187695,pitch:0};

Initialiser le panorama sur la destination et avec les paramètres de caméra : 

myPano.setLocationAndPOV(capitole, myPOV);

Ajouter un événement (une alerte simple) si le navigateur ne supporte pas le Flash. : 

GEvent.addListener(myPano, "error", handleNoFlash);

Définir l'événement : 

function handleNoFlash(errorCode) {
  if (errorCode == 603) {
    alert("Flash n'est pas supporté par votre navigateur !");
    return;
  }
}

Définir l'emplacement de la carte : 

<div name="pano" id="pano"></div>

Code complet#

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
     [Google Maps] 14. Se promener place du Capitole
   </title>
   <style type="text/css">
     html { overflow:hidden; height:100%; }
     body { height:100%; margin:0; }
     #pano { width:100%; height:100%; }
   </style>
   <link rel="icon" type="image/png" href="./favicon.png"/>
   <script src="http://maps.google.com/maps?file=api&v=2&key=votre_clé_ici" type="text/javascript"></script>
   <script type="text/javascript">

     function initialize() {
       if (GBrowserIsCompatible()) {
         var myPano = new GStreetviewPanorama(document.getElementById("pano"));
         var capitole = new GLatLng(43.60436298129637, 1.442950341024869);
         var myPOV = {yaw:370.64659986187695,pitch:0};
         myPano.setLocationAndPOV(capitole, myPOV);
         GEvent.addListener(myPano, "error", handleNoFlash);
    }
    else{
      alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
    }
  }

  function handleNoFlash(errorCode) {
       if (errorCode == 603) {
      alert("Error: Flash doesn't appear to be supported by your browser");
      return;
       }
     }
  </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div name="pano" id="pano"></div>
   </body>
</html>

Démonstration#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://88.191.39.115/fabien/geotribu/%5bgeotribu%5d_Google-Maps_tuto14.html" height="350px" width="100%"></iframe>

Résultat pleine page

Remarques#

Un panorama StreetView est une image cliquable, 'zoomable' et avec lequel on peut se diriger vers les images mitoyennes. L'application est en Flash, ce qui permet la navigation 'demi-sphérique' dans la photographie.

Conclusion#

Les panoramas de StreetView sont facilement exploitables grâce à l'API. Il faut maintenant coupler la couche des photos sur la carte - http://geotribu.net/node/65 - et les photographies.

Auteur·ice#

Fabien Goblet#

portrait Fabien Goblet

Informaticien et géographe de formation, je suis j'étais indépendant en base de données, webmapping, j'aide à la modélisation et à la définition du besoin client, je développe j'encadre le développement des interfaces d'administration et des carto-web, je conçois des api géographiques pour les administrations, les ONG, les labos de recherche. Je suis maintenant responsable de l'innovation chez Sogefi. Toujours des cartes et des données qui ont besoin de communiquer. Nous avons une spécialité dans les données foncières et de leur représentation à destination des administrations.

J'aime comprendre les données et en faire quelquechose ; du coup je fais pas mal de veille techno sur tout ce qui touche aux technologies web de dataviz - carto ou non.

J'ai une préférence pour les technologies libres. Tout ce qui touche aux interactions hommes-machines avec des technos comme Kinect, Arduino, Raspberry, les imprimantes 3d ou les machines de découpe laser, les caméras 360° me passionne. Et j'essaie de les utiliser dans le cadre du travail.

Commentaires

Afin de favoriser les échanges constructifs, merci de préférer le pseudonymat à l'anonymat. Pour rappel, l'adresse mail n'est pas exposée publiquement et sert principalement aux notifications de réponse. Les commentaires sont automatiquement republiés sur nos réseaux sociaux pour favoriser la discussion. Consulter la page sur la confidentialité et les données personnelles.
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA