Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision
Révision précédente
projet:2014:ffox:cartemdl [2016/08/05 21:13]
tristang créée
projet:2014:ffox:cartemdl [2018/05/22 18:01] (Version actuelle)
Ligne 1: Ligne 1:
-====== ​Hello World - Firefox OS ======+====== ​Exemple Carte - Firefox OS ======
  
-Source : http://​shafiul.github.io/​slides/​kickstart_fxos.html+===== Création de l'​application =====
  
-===== Installation du simulateur ===== +Créer un dossier //carte// qui contiendra tout les scripts de votre application.
-Ajouter l'​extension [[ https://​addons.mozilla.org/​fr/​firefox/​addon/​firefox-os-simulator/​ | Firefox OS simulator ]] +
- +
-===== Création d'une application ===== +
- +
-Créer un dossier //hello// qui contiendra tout les scripts de votre application.+
  
 Fichier index.html : Fichier index.html :
-<code>+<sxh html>
 <​!doctype html> <​!doctype html>
 +
 <​html>​ <​html>​
- <​head>​ +  ​<​head>​ 
- <​title>​My first APP</​title>​ +    <​title>​Carte MDL</​title>​ 
- </​head>​ +    <​link rel="​stylesheet"​ href="​hello.css"/>​ 
- <​body>​ +  ​</​head>​ 
- <h1>Hello, World!</​h1>​ + 
- </​body>​+  ​<​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>​ </​html>​
-</code>+</sxh>
  
 Fichier de l'​icone:​ Fichier de l'​icone:​
-{{:lespetitshackers:ffos:​icon.png?​200|}}+{{ :projet:2014:ffox:icon.png?nolink&200|}}
  
  
 Création d'un fichier manifest.webapp : Création d'un fichier manifest.webapp :
-<code>+<sxh js>
 { {
- "​name":​ "Hello World", + "​name":​ "Carte MDL", 
- "​description":​ "Yet another Hello, World app!",+ "​description":​ "Carte MDL",
  "​launch_path":​ "/​index.html",​  "​launch_path":​ "/​index.html",​
  "​icons":​ {  "​icons":​ {
Ligne 42: Ligne 74:
  "​default_locale":​ "​en"​  "​default_locale":​ "​en"​
 } }
-</code> +</sxh>
- +
- +
- +
-===== Ajout d'un style ===== +
- +
-Fichier index.html : +
-<​code>​ +
-<​!doctype html> +
-<​html>​ +
- <​head>​ +
- <​title>​My first APP</​title>​ +
-        <link rel="​stylesheet"​ href="​style.css">​ +
- </​head>​ +
- <​body>​ +
- <​h1>​Hello,​ World!</​h1>​ +
- </​body>​ +
-</​html>​ +
-</​code>​ +
- +
- +
-Fichier style.css:​ +
- +
-<​code>​ +
-h1 { +
- color:​green;​ +
- background:​red;​ +
-+
-</​code>​ +