Friday, July 13, 2012

HTML5 - Jeu Mobile en Open Source

Pocket Island

La société Wooga, studio de développement de jeu, a récemment voulu créer un jeu mobile complet avec les technologies Web normées(html5 notamment).
Afin de faire un retour sur expérience, Wooga a publié le code source du jeu sur GitHub sous licence Open Source.
 Code source de Pocket Island

Wooga a également publié un article sur son blog, afin de décrire les leçons que les développeurs ont retirées à travers cette expérience.

L'article est disponible ici : http://www.wooga.com/2012/06/woogas-html5-adventure

Et enfin pour tester le jeu c'est par ici : Tester le jeu!

Monday, July 2, 2012

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.

Sunday, July 1, 2012

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.