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
This commit is contained in:
Julien Lengrand-Lambert
2014-08-01 19:44:39 +02:00
parent a234ee269f
commit 0b69944df7
9 changed files with 29 additions and 20 deletions

View File

@@ -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/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"
"/home/jll/Documents/01_perso/19_jenkinsArduinoNotification/arduino/blink/Blink/Blink.ino"
],
"find":
{
@@ -873,7 +877,7 @@
"cols":
[
0.0,
0.578905221254,
0.469688049537,
1.0
],
"rows":

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 797 B

View File

@@ -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,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
center: centerStart
};
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({
position: centerStart,
map: map,
icon: image
});
satMarker = new L.Marker(centerStart);
satMarker.addTo(map);
//TODO: Custom marker
};
// 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);
satMarker.setPosition(pos);
var pos = new L.latLng(result.latitude, result.longitude);
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);

View File

@@ -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%;