Usage of openStreetMap js library

static/js/index.js

@@ -5,6 +5,13 @@ var maxNumCoord = 100;
 var max_img_rotation = 10;
 var rotation_time = 1000*10; //10s
 
+var mymap = L.map('feedDivMap1').setView([51.505, -0.09], 13);;
+var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
+var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 17, attribution: osmAttrib}).addTo(mymap);
+
+var coord_to_change = 0;
+var coord_array = [];
 var img_to_change = 0;
 var img_array = [];
 var first_map = true;
@@ -146,7 +153,6 @@ var optionsPieChart = {
 
 function ping() {
     pnts = mapObj.latLngToPoint(map_lat, map_lon);
-    console.log(pnts);
     if (pnts != false) { //sometimes latLngToPoint return false
         $("#feedDiv2").append(
                 $('<div class="marker_animation"></div>')
@@ -161,19 +167,16 @@ function ping() {
 
 var map_lat, map_lon;
 function rotate_map() {
-    var to_switch = img_array[img_to_change];
+    var to_switch = coord_array[coord_to_change];
-    var pic = to_switch[0];
+    var coord = to_switch[0];
-    var txt = to_switch[1];
-    var coord = to_switch[2];
     map_lat = coord.lat;
     map_lon = coord.lon;
-    console.log(to_switch);
+    var marker = to_switch[1];
+    var headerTxt = to_switch[2];
+    mymap.setView([coord.lat, coord.lon], 17);
 
-    $("#img1").fadeOut(400, function(){ $(this).attr('src', pic); }).fadeIn(400);
+    $("#textMap1").fadeOut(400, function(){ $(this).text(headerTxt); }).fadeIn(400);
-    $("#textMap1").fadeOut(400, function(){ $(this).text(txt); }).fadeIn(400);
+    coord_to_change = coord_to_change == coord_array.length-1 ? 0 : coord_to_change+1;
-    img_to_change = img_to_change == img_array.length-1 ? 0 : img_to_change+1;
-    console.log(img_array);
-    console.log(img_to_change);
 
     setTimeout(function(){ rotate_map(); }, rotation_time);
 }
@@ -207,10 +210,12 @@ $(document).ready(function () {
         popupCoord(json.coord);
         var img2 = linkForDefaultMap.replace(/\/[^\/]+$/, "/"+json.path);
         
-        if (img_array.len >= max_img_rotation) {
+        if (coord_array.len >= max_img_rotation) {
-            img_array.slice(1)
+            coord_array[0][1].remove() // remove marker
+            coord_array.slice(1)
         }
-        img_array.push([img2, json.path, json.coord]);
+        var marker = L.marker([json.coord.lat, json.coord.lon]).addTo(mymap);
+        coord_array.push([json.coord, marker, ""+json.coord.lat+", "+json.coord.lon]);
 
         if (first_map) { // remove no_map pic
             rotate_map();

templates/index.html

@@ -15,7 +15,12 @@
     <!-- Custom CSS -->
     <link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
     <!-- Custom Fonts -->
-    <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
+        integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+        crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
+        integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+        crossorigin=""></script>
 
 </head>
 
@@ -78,12 +83,11 @@ small {
                             <!--<div id="panelbody" class="panel-body" style="height: 37vh; width:100%;">
                                 <div id="feedDiv1A" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div>
                                 <div id="feedDiv1B" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div>-->
-                            <div  id="textMap1" class="panel-heading"> No map
+                            <div  id="textMap1" class="panel-heading bg-info"> No map
                                 <i class="fa fa-bar-chart-o fa-fw"></i> 
                             </div>
-                            <div id="panelbody" class="panel-body" style="height: 100%; padding: 5px">
+                            <div id="panelbody" class="panel-body" style="height: 93%; padding: 5px">
-                                <div id="feedDivMap1" style="width:100%; height: 100%">
+                                <div id="feedDivMap1" style="width:100%; height: 100%;">
-                                    <img id="img1" src="{{ url_for('static', filename='maps/default.png') }}" class="center" style="max-height: 93%;">
                                 </div>
                             </div>
                             <!-- /.panel-body -->
@@ -185,7 +189,7 @@ small {
     <script src="{{ url_for('static', filename='js/index.js') }}"></script>
 
 
-
+    <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery-jvectormap-2.0.3.css') }}" type="text/css" media="screen"/>
     <script src="{{ url_for('static', filename='js/jquery-jvectormap-2.0.3.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/jquery-jvectormap-world-mill.js') }}"></script>