Exemple Carte - Firefox OS

Créer un dossier carte qui contiendra tout les scripts de votre application.

Fichier index.html :

<!doctype html>

<html>
  <head>
    <title>Carte MDL</title>
    <link rel="stylesheet" href="hello.css"/>
  </head>

  <body>
    <h1>Bonjour tout le monde</h1>
    <div id="map" style="width: 320px; height: 480px; text-indent: 0px; border-radius: 10px 10px 10px 10px;
    overflow: hidden; box-shadow: 0px 0px 5px gray; text-align: center;">
    </div>

    <p>
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" defer="defer">
var map;
function init_map(){
  /* map obj */
  map = new OpenLayers.Map('map');
  /* Adding OSM layer */ 
  map.addLayer( new OpenLayers.Layer.OSM() );
  /* Centering map */
  var localLocation = new OpenLayers.LonLat(-4.467257,48.406274).transform(new OpenLayers.Projection("EPSG:4326"),
									   new OpenLayers.Projection("EPSG:900913"));
    map.setCenter(localLocation);
    map.zoomTo(17);
    /* Marker */
    var markers = new OpenLayers.Layer.Markers("MDL29"); 
    var size = new OpenLayers.Size(65,50);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var logoIcon = new OpenLayers.Icon('http://mdl29.net/wp-content/themes/mdl29/images/map/mdl29_icon.png',size,offset);
    var iconSize = new OpenLayers.Size(32,37);
    var iconOffset = new OpenLayers.Pixel(-(iconSize.w/2), -iconSize.h);
   
    markers.addMarker(new OpenLayers.Marker(localLocation,logoIcon.clone()));
    map.addLayer(markers);
}
init_map();

</script>

    </p>
  </body>
</html>

Fichier de l'icone:

Création d'un fichier manifest.webapp :

{
	"name": "Carte MDL",
	"description": "Carte MDL",
	"launch_path": "/index.html",
	"icons": {
		"128": "/icon.png"
	},
	"developer": {
		"name":"Maison du Libre",
		"url": "http://mdl29.net"
	},
	"default_locale": "en"
}

Exemple Carte - Firefox OS

Création de l'application