HTML5 - GoogleMap - Layer OpenStreetMap

OpenStreetMap avec Google Map

Dans cet article, je vais vous montrer comment afficher un layer OpenSteetMap grâce à l'API Google Map en javascript.Tout cela est bien évidement utilisable en HTML5 pour réaliser une WebApp.

Pour rappel, l'intégration de l'API Google Map en javascript est requise.Pour cela, copier la balise ci-dessous :

1. < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=yourKey&sensor=false" >< /script>
   

Ensuite, il est nécessaire d'ajouter une balise div permettant d'afficher la Map. Comme ceci :

1. < div id="map" /> < /div>

Maintenant, il faut créer la Map via l'API Google Map. Mais cette fois, on ne va pas mettre un map type Google Map comme par exemple celui des routes : google.maps.MapTypeId.ROADMAP

Mais cette  fois, c'est un type particulier : "OSM", de plus il faut le coupler avec un paramètre supplémentaire : mapTypeControlOptions

1. map = new google.maps.Map(element, {
2.    center: new google.maps.LatLng(me.latitude, me.longitude),
3.    zoom: 15,
4.    mapTypeId: "OSM",
5. mapTypeControlOptions: {
6.   mapTypeIds: ["OSM"]
7. }
8. });

Par rapport à un layer Google Map, il est nécessaire d'obtenir l'image OpenStreetMap. Voici le code javascript nécessaire pour afficher le visuel OpenStreetMap.

1. map.mapTypes.set("OSM", new google.maps.ImageMapType({
2.             getTileUrl: function(coord, zoom) {
3.                      return "http://tile.openstreetmap.org/" + zoom + "/"
4.                          + coord.x + "/" + coord.y + ".png";
5.                     },
6.                 tileSize: new google.maps.Size(256, 256),
7.                 name: "OpenStreetMap",
8.                 maxZoom: 18
9.        }));

C'est assez fun et puis c'est un avant goût de la prochaine cartographie d'IOS6. Apple a décidé d'abandonner Google Map au profit d'Open Street Map pour la prochaine mouture d'IOS.

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.

Fusion Tables & Google Map FusionTablesLayer

Présentation Fusion Tables

Je viens de découvrir une fonctionnalité de Google bien sympa c'est : Fusion Table. On peut le voir comme un type particulier de document dans Google Drive.

Dans ce document, on peut ajouter de l'information comme dans une table. On y retrouve les types Geometry et Location. On peut donc y stocker de l'information géographique. Comme des coordonnées géographiques ou encore du KML.

Il est aussi possible de géocoder une colonne contenant des adresses(numéro, rue code postal ville). Le géocodage va permettre de retrouver les coordonnées géographiques en fonction de l'adresse.

NB : Pour pouvoir accéder à une map via l'API Google Map, ne pas oublier de régler les accès en partageant le document.

Affichage sur Google Map : FusionTablesLayer

Maintenant avec l'API Google Map, on peut requêter cette table pour en afficher les éléments sur une carte. Le langage pour sélectionner les informations est le SQL.

1.       var layer = new google.maps.FusionTablesLayer({
2.              query: {
3.                       select: 'Adresse',
4.                       from: '1_8f7R92thvehMtNzFxtiWhz1JtFqZwJsaJ2yMVw',                                                                    where: "Arrondissement = '75013'"
5.                         },
                styles: [{
6.                  markerOptions: {
7.                          iconName: "small_green"
8.                 }
9.            }]
10.           });
11.           layer.setMap(map);

Il est aussi possible d'insérer, d'updater des données dans une table via l'API Fusion Tables. Mais cette partie sera développer dans un futur article sur cette API.

On peut rendre l'affichage différent en fonction d'une valeur avec le mot clé where :

1.      styles: [{
2.           where : "Arrondissement in ('75013', '75014')",
3.           markerOptions: {
4.           iconName: "small_yellow"
5.           }
6.      }]

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.

HTML5 - Cartographie sur mobile - Partie 1

WebApp Html5 Localisation & Google Map

Dans cette article, je vais vous présenter quelques fonctionnalités de l'API Google Map que je trouve intéressante pour la mobilité. Aujourd'hui la mobilité a amené de nouveaux usages, comme par exemple trouver une information en fonction de sa position.(le boulanger le plus prés de moi). Mais on peux imaginer à une multitude d'autres utilisations...

API Geoloalisation

   Dans un premiers temps, il faut vérifier si le navigateur gère bien l'API.

1. if (navigator.geolocation){
2. }

    L'API de géolocalisation est disponible sur :

• Safari Mobile (depuis iOS 3.0)
• Android (depuis la verison 1.6)

De plus tous les grands navigateurs de bureau gère églament l'API :

• (Firefox (>= 3.5)
• Safari (>= 5.0)
• Google Chrome
• Opera(>= 10.60)
• Internet Explorer (>= IE 9))

Pour obtenir la position géographique :

1. navigator.geolocation.getCurrentPosition(function(position){
2.   var latitude = position.coords.latitude;
3.   var longitude = position.coords.longitude;
4.         alert('Latitude :' + latitude + ' Longitude : ' + longitude);
5.    },function(error){
6.            alert(error.Message);
7.    });

Le prototype de la méthode getCurrentPosition() est le suivant :

1. void getCurrentPosition(PositionCallback successCallback,
2.            optional PositionErrorCallback errorCallback,
3.            optional PositionOptions options);

API Google Map

Maintenant que l'on a obtenu notre localisation en coordonnée géographique, il peut être intéressant de l'afficher sur une map. Pour cela nous allons utiliser l'API Google Map.

Tout d'abord il faut intégrer l'API Google Map à la page.

1. < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=yourKey&sensor=false" >< /script>

Ensuite dans votre code HTML placez la balise suivante :

1. < div id="map" />

Cette section va permettre l'affiche de Map. Maintenant en javascript, nous allons instancier un élément google.maps.Map(mapDiv:Node, opts?:MapOptions) qui sera intégré à la balise div.

1. var element = document.getElementById("map");
2. map = new google.maps.Map(element, {
3.   center: new google.maps.LatLng(latitude, longitude),
4.   zoom:  15,
5.   mapTypeId: google.maps.MapTypeId.ROADMAP
6. });

L'option mapTypeId permet d'afficher les différents layers Google Map, comme satellite, plan

• HYBRID
• ROADMAP
• SATELLITE
• TERRAIN

Il est possible de passer d'autres paramètres comme un style,la possibilité ou non de zoomer...

Afficher une position

Pour afficher notre position, on utilise l'objet Marker(opts?:MarkerOptions). On lui affecte alors la position en type LatLng(latitude, longitude). Et on affecte notre map à la propriété du même nom.

1. var latlng = new google.maps.LatLng(latitude, longitude);
2. var marker = new google.maps.Marker({
3.                 position: latlng,
4.                 map: map
5.            });

Maintenant on va afficher une petite fenêtre dans laquelle on peut ajouter du code html.

1. var infowindow = new google.maps.InfoWindow();
2. infowindow.setContent('
3.           +latitude +','+longitude
4.           +'); 
5. infowindow.open(map, marker);

Conclusion

Nous avons pu voir dans cette article, qu'il n'est pas très difficile de mettre en place un système de géolocalisation sur son site web. Et en plus, cette fonctionnalité est cross-plateforme (iphone, ipad, android).

Dans la prochaine partie de cette article, on rentrera un peu plus en détail sur les différentes possibilités pour dessiner et afficher de l'information sur une map.

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.