Issue 5

Code is now fully functional with leaflet.
Only missing element is the specialized marker that has to be created.
Adds missiing images for leaflet

Current map displayed is from mapbox, and can be updated to anything else (OSM, Google Maps, . . .).

TODO : Customize marker

ShowMeYourBigSatellite.sublime-workspace

@@ -3,6 +3,10 @@
 	{
 		"selected_items":
 		[
+			[
+				"center",
+				"centerStart"
+			],
 			[
 				"m",
 				"mainCoord"
@@ -532,6 +536,9 @@
 	},
 	"file_history":
 	[
+		"/home/jll/Documents/01_perso/14_ShowMeYourBigSatellite/.git/COMMIT_EDITMSG",
+		"/home/jll/Documents/01_perso/14_ShowMeYourBigSatellite/main.py",
+		"/home/jll/Documents/01_perso/14_ShowMeYourBigSatellite/.gitignore",
 		"/home/jll/dev/source/main/spacemetric/keystoneapi/build.xml",
 		"/home/jll/dev/source/main/spacemetric/build.xml",
 		"/home/jll/dev/source/main/products/keystone/build.xml",
@@ -656,10 +663,7 @@
 		"/home/jll/dev/source_git/main_zwolle/csd/db/build.properties",
 		"/opt/spacemetric/keystone/config/keystone.postgres",
 		"/home/jll/Desktop/WEB-INF/web.xml",
-		"/home/jll/Documents/01_perso/19_jenkinsArduinoNotification/arduino/blink/Blink/Blink.ino",
+		"/home/jll/Documents/01_perso/19_jenkinsArduinoNotification/arduino/blink/Blink/Blink.ino"
-		"/home/jll/Documents/01_perso/18_blog/assets/fonts/icomoon.eot",
-		"/home/jll/Documents/01_perso/18_blog/assets/css/main.min.css",
-		"/home/jll/Documents/01_perso/18_blog/_posts/2012-08-31-ivolution-development-status-35.markdown"
 	],
 	"find":
 	{
@@ -873,7 +877,7 @@
 		"cols":
 		[
 			0.0,
-			0.578905221254,
+			0.469688049537,
 			1.0
 		],
 		"rows":

static/js/mapsFun.js

@@ -2,31 +2,36 @@ var map;
 var satMarker;
 var myLatLng;
 
-function initializeGoogle() {
+function initializeMap() {
 
-    var centerStart = new google.maps.LatLng(60, 16);
+    var centerStart = new L.latLng(60, 16);
 
     var mapOptions = {
         zoom: 6,
-        center: centerStart,
+        center: centerStart
-        mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
-    }
 
-    map = new google.maps.Map(document.getElementById('map-canvas'),  mapOptions);
+    map = new L.map('map',  mapOptions);
+
+    // adds an OpenStreetMap tile layer
+    var tileLayer = L.tileLayer('http://{s}.tiles.mapbox.com/v3/jlengrand.j49bad4d/{z}/{x}/{y}.png');
+
+    map.addLayer(tileLayer);
 
     var image = 'images/satellite_64.png';
-    satMarker = new google.maps.Marker({
+    satMarker = new L.Marker(centerStart);
-        position: centerStart,
+    satMarker.addTo(map);
-        map: map,
+    //TODO: Custom marker
-        icon: image
+
-    });
+
 };
 
 // Gets the latest satellite position from the server
 function getPosition(){
         $.getJSON("http://localhost:5000/get_coordinates",function(result){
-        var pos = new google.maps.LatLng(result.latitude, result.longitude);
+        var pos = new L.latLng(result.latitude, result.longitude);
-        satMarker.setPosition(pos);
+        satMarker.setLatLng(pos);
+        //FIXME: change
     });
 }
 
@@ -40,7 +45,7 @@ function loopPosition(intervalSec){
 // Load the application once the DOM is ready, using `jQuery.ready`:
 $(function(){
     // Inits the map and the marker
-    initializeGoogle();
+    initializeMap();
 
     //Starts looping over the positions
     loopPosition(1);

static/simplemap.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <style>
-      html, body, #map-canvas {
+      html, body, #map {
         margin: 0;
         padding: 0;
         height: 100%;