OpenLayers and OpenStreetMap instead of Google Maps

build/map.css

@@ -0,0 +1 @@
+.ol-control,.ol-scale-line{position:absolute;padding:2px}.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-viewport .ol-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-control{background-color:rgba(255,255,255,.4);border-radius:4px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}

build/script.js

@@ -16371,18 +16371,6 @@ TABS.gps.initialize = function (callback) {
 
     load_html();
 
-    function set_online(){
-        $('#connect').hide();
-        $('#waiting').show();
-        $('#loadmap').hide();
-    }
-    
-    function set_offline(){
-        $('#connect').show();
-        $('#waiting').hide();
-        $('#loadmap').hide();
-    }
-    
     function process_html() {
         localize();
 
@@ -16399,9 +16387,17 @@ TABS.gps.initialize = function (callback) {
         }
 
         function update_ui() {
+
+            if (GPS_DATA.fix > 0) {
+                $('#loadmap').show();
+                $('#waiting').hide();
+            } else {
+                $('#loadmap').hide();
+                $('#waiting').show();
+            }
+
             var lat = GPS_DATA.lat / 10000000;
             var lon = GPS_DATA.lon / 10000000;
-            var url = 'https://maps.google.com/?q=' + lat + ',' + lon;
 
             var gpsFixType = chrome.i18n.getMessage('gpsFixNone');
             if (GPS_DATA.fix >= 2)
@@ -16411,8 +16407,8 @@ TABS.gps.initialize = function (callback) {
 
             $('.GPS_info td.fix').html(gpsFixType);
             $('.GPS_info td.alt').text(GPS_DATA.alt + ' m');
-            $('.GPS_info td.lat a').prop('href', url).text(lat.toFixed(4) + ' deg');
+            $('.GPS_info td.lat').text(lat.toFixed(4) + ' deg');
-            $('.GPS_info td.lon a').prop('href', url).text(lon.toFixed(4) + ' deg');
+            $('.GPS_info td.lon').text(lon.toFixed(4) + ' deg');
             $('.GPS_info td.speed').text(GPS_DATA.speed + ' cm/s');
             $('.GPS_info td.sats').text(GPS_DATA.numSat);
             $('.GPS_info td.distToHome').text(GPS_DATA.distanceToHome + ' m');
@@ -16431,29 +16427,14 @@ TABS.gps.initialize = function (callback) {
             $('.GPS_stat td.hdop').text((GPS_DATA.hdop / 100).toFixed(2));
 
             var message = {
-                action: 'center',
+                action: 'update',
                 lat: lat,
                 lon: lon
             };
 
             var frame = document.getElementById('map');
-            if (navigator.onLine) {
-                $('#connect').hide();
 
-                //if(lat != 0 && lon != 0){
+            frame.contentWindow.postMessage(message, '*');
-                if(GPS_DATA.fix){
-                   frame.contentWindow.postMessage(message, '*');
-                   $('#loadmap').show();
-                   $('#waiting').hide();
-                }else{
-                   $('#loadmap').hide();
-                   $('#waiting').show();
-                }
-            }else{
-                $('#connect').show();
-                $('#waiting').hide(); 
-                $('#loadmap').hide();
-            }
         }
 
         /*
@@ -16463,7 +16444,8 @@ TABS.gps.initialize = function (callback) {
         helper.mspBalancedInterval.add('gps_pull', 200, 3, function gps_update() {
             // avoid usage of the GPS commands until a GPS sensor is detected for targets that are compiled without GPS support.
             if (!have_sensor(CONFIG.activeSensors, 'gps')) {
-                //return;
+                update_ui();
+                return;
             }
 
             if (helper.mspQueue.shouldDrop()) {
@@ -16473,43 +16455,6 @@ TABS.gps.initialize = function (callback) {
             get_raw_gps_data();
         });
 
-        //check for internet connection on load
-        if (navigator.onLine) {
-            console.log('Online');
-            set_online();
-        } else {
-            console.log('Offline');
-            set_offline();
-        }
-
-        $("#check").on('click',function(){
-            if (navigator.onLine) {
-                console.log('Online');
-                set_online();
-            } else {
-                console.log('Offline');
-                set_offline();
-            }
-        });
-
-        var frame = document.getElementById('map');
-
-        $('#zoom_in').click(function() {
-            console.log('zoom in');
-            var message = {
-                action: 'zoom_in'
-            };
-            frame.contentWindow.postMessage(message, '*');
-        });
-        
-        $('#zoom_out').click(function() {
-            console.log('zoom out');
-            var message = {
-                action: 'zoom_out'
-            };
-            frame.contentWindow.postMessage(message, '*');
-        });
- 
         GUI.content_ready(callback);
     }
 
@@ -20882,9 +20827,9 @@ presets.presets = [
             presets.elementHelper("INAV_PID_CONFIG", "magHoldRateLimit", 30),
             presets.elementHelper("PID_ADVANCED", "axisAccelerationLimitRollPitch", 40),
             presets.elementHelper("PID_ADVANCED", "axisAccelerationLimitYaw", 18),
-            presets.elementHelper("PIDs", 0, [75, 30, 18]),  //ROLL PIDs
+            presets.elementHelper("PIDs", 0, [80, 30, 18]),  //ROLL PIDs
-            presets.elementHelper("PIDs", 1, [75, 30, 18]),  //PITCH PIDs
+            presets.elementHelper("PIDs", 1, [80, 30, 18]),  //PITCH PIDs
-            presets.elementHelper("PIDs", 2, [85, 45, 0])  //YAW PIDs
+            presets.elementHelper("PIDs", 2, [95, 45, 0])  //YAW PIDs
         ],
         type: 'multirotor'
     },
@@ -20918,13 +20863,13 @@ presets.presets = [
             presets.elementHelper("FILTER_CONFIG", "gyroNotchHz1", 144),
             presets.elementHelper("FILTER_CONFIG", "gyroNotchCutoff1", 90),
             presets.elementHelper("FILTER_CONFIG", "gyroNotchHz2", 72),
-            presets.elementHelper("FILTER_CONFIG", "gyroNotchCutoff2", 43),
+            presets.elementHelper("FILTER_CONFIG", "gyroNotchCutoff2", 50),
             presets.elementHelper("INAV_PID_CONFIG", "magHoldRateLimit", 30),
-            presets.elementHelper("PID_ADVANCED", "axisAccelerationLimitRollPitch", 18),
+            presets.elementHelper("PID_ADVANCED", "axisAccelerationLimitRollPitch", 36),
             presets.elementHelper("PID_ADVANCED", "axisAccelerationLimitYaw", 9),
-            presets.elementHelper("PIDs", 0, [80, 30, 18]),  //ROLL PIDs
+            presets.elementHelper("PIDs", 0, [100, 30, 25]),  //ROLL PIDs
-            presets.elementHelper("PIDs", 1, [80, 30, 18]),  //PITCH PIDs
+            presets.elementHelper("PIDs", 1, [100, 30, 25]),  //PITCH PIDs
-            presets.elementHelper("PIDs", 2, [85, 45, 0]),  //YAW PIDs
+            presets.elementHelper("PIDs", 2, [120, 45, 0]),  //YAW PIDs
             presets.elementHelper("PIDs", 7, [10, 7, 75])  //Level PIDs
         ],
         type: 'multirotor'

build/styles.css

@@ -3177,10 +3177,6 @@ hr {
     background-color: #ececec;
 }
 
-.tab-gps .gps_map {
-    height: 460px;
-}
-
 .tab-gps #connect {
     display: none;
     text-align: center;
@@ -3193,7 +3189,7 @@ hr {
     text-align: center;
     padding-top: 0;
     background-size: 15%;
-    height: 70%;
+    min-height: 400px;
     background: url(../images/loading-bars.svg) no-repeat center 40%;
     float: left;
     width: 100%;
@@ -3293,10 +3289,6 @@ progress[value]::-webkit-progress-value {
         float: left;
     }
 
-    .tab-gps .gps_map {
-        height: 403px;
-    }
-
 }
 
 .tab-help .twothird {

gulpfile.js

@@ -79,6 +79,14 @@ sources.js = [
     './tabs/advanced_tuning.js'
 ];
 
+sources.mapJs = [
+    './node_modules/openlayers/dist/ol.js'
+];
+
+sources.mapCss = [
+    './node_modules/openlayers/dist/ol.css'
+];
+
 gulp.task('build-css', function () {
 
     return gulp.src(sources.css)
@@ -93,6 +101,20 @@ gulp.task('build-js', function () {
         .pipe(gulp.dest('./build/'));
 });
 
+gulp.task('build-map-css', function () {
+
+    return gulp.src(sources.mapCss)
+        .pipe(concat('map.css'))
+        .pipe(gulp.dest('./build/'));
+});
+
+gulp.task('build-map-js', function () {
+
+    return gulp.src(sources.mapJs)
+        .pipe(concat('map.js'))
+        .pipe(gulp.dest('./build/'));
+});
+
 gulp.task('deploy-css', function () {
 
     return gulp.src(sources.css)
@@ -151,4 +173,4 @@ gulp.task('watch', function () {
     gulp.watch('eventPage.js', ['build-js']);
 });
 
-gulp.task('default', ['build-js', 'build-css', 'build-receiver-msp-js', 'build-receiver-css']);
+gulp.task('default', ['build-js', 'build-css', 'build-receiver-msp-js', 'build-receiver-css', 'build-map-js', 'build-map-css']);

tabs/gps.css

@@ -12,10 +12,6 @@
     background-color: #ececec;
 }
 
-.tab-gps .gps_map {
-    height: 460px;
-}
-
 .tab-gps #connect {
     display: none;
     text-align: center;
@@ -28,7 +24,7 @@
     text-align: center;
     padding-top: 0;
     background-size: 15%;
-    height: 70%;
+    min-height: 400px;
     background: url(../images/loading-bars.svg) no-repeat center 40%;
     float: left;
     width: 100%;
@@ -128,8 +124,4 @@ progress[value]::-webkit-progress-value {
         float: left;
     }
 
-    .tab-gps .gps_map {
-        height: 403px;
-    }
-
 }

tabs/gps.html

@@ -1,6 +1,6 @@
 <div class="tab-gps">
     <div class="content_wrapper">
-        <div class="tab_title" i18n="tabGPS">GPS</div>
+        <div class="tab_title" data-i18n="tabGPS">GPS</div>
         <div class="cf_doc_version_bt">
             <a id="button-documentation" href="https://github.com/iNavFlight/inav/releases" target="_blank"></a>
         </div>
@@ -10,36 +10,36 @@
             <div class="spacer_right">
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="gpsHead"></div>
+                        <div class="spacer_box_title" data-i18n="gpsHead"></div>
                     </div>
                     <div class="spacer_box GPS_info">
                         <table class="cf_table">
                             <tr>
-                                <td style="width: 85px" i18n="gpsFix"></td>
+                                <td style="width: 85px" data-i18n="gpsFix"></td>
-                                <td class="fix" i18n="gpsFixNone"></td>
+                                <td class="fix" data-i18n="gpsFixNone"></td>
                             </tr>
                             <tr>
-                                <td i18n="gpsAltitude"></td>
+                                <td data-i18n="gpsAltitude"></td>
                                 <td class="alt">0 m</td>
                             </tr>
                             <tr>
-                                <td i18n="gpsLat"></td>
+                                <td data-i18n="gpsLat"></td>
-                                <td class="lat"><a href="#" target="_blank">0.0000 deg</a></td>
+                                <td class="lat">0.0000 deg</td>
                             </tr>
                             <tr>
-                                <td i18n="gpsLon"></td>
+                                <td data-i18n="gpsLon"></td>
-                                <td class="lon"><a href="#" target="_blank">0.0000 deg</a></td>
+                                <td class="lon">0.0000 deg</td>
                             </tr>
                             <tr>
-                                <td i18n="gpsSpeed"></td>
+                                <td data-i18n="gpsSpeed"></td>
                                 <td class="speed">0 cm/s</td>
                             </tr>
                             <tr>
-                                <td i18n="gpsSats"></td>
+                                <td data-i18n="gpsSats"></td>
                                 <td class="sats">0</td>
                             </tr>
                             <tr class="noboarder">
-                                <td i18n="gpsDistToHome"></td>
+                                <td data-i18n="gpsDistToHome"></td>
                                 <td class="distToHome"></td>
                             </tr>
                         </table>
@@ -47,36 +47,36 @@
                 </div>
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
-                        <div class="spacer_box_title" i18n="gpsStatHead"></div>
+                        <div class="spacer_box_title" data-i18n="gpsStatHead"></div>
                     </div>
                     <div class="spacer_box GPS_stat">
                         <table class="cf_table">
                             <tr>
-                                <td i18n="gpsHDOP"></td>
+                                <td data-i18n="gpsHDOP"></td>
                                 <td class="hdop"></td>
                             </tr>
                             <tr>
-                                <td i18n="gpsEPH"></td>
+                                <td data-i18n="gpsEPH"></td>
                                 <td class="eph">0</td>
                             </tr>
                             <tr>
-                                <td i18n="gpsEPV"></td>
+                                <td data-i18n="gpsEPV"></td>
                                 <td class="epv">0</td>
                             </tr>
                             <tr>
-                                <td i18n="gpsMessageRate"></td>
+                                <td data-i18n="gpsMessageRate"></td>
                                 <td class="rate">0</td>
                             </tr>
                             <tr>
-                                <td style="width: 85px" i18n="gpsTotalMessages"></td>
+                                <td style="width: 85px" data-i18n="gpsTotalMessages"></td>
                                 <td class="messages">0</td>
                             </tr>
                             <tr>
-                                <td i18n="gpsErrors"></td>
+                                <td data-i18n="gpsErrors"></td>
                                 <td class="errors">0</td>
                             </tr>
                             <tr class="noboarder">
-                                <td i18n="gpsTimeouts"></td>
+                                <td data-i18n="gpsTimeouts"></td>
                                 <td class="timeouts">0</td>
                             </tr>
                         </table>
@@ -87,22 +87,15 @@
 
         <div class="cf_column threefourth_left">
             <div class="gui_box grey gps_map">
-                <div class="gui_box_titlebar" style="margin-bottom: 0px;">
+                <div class="gui_box_titlebar" style="margin-bottom: 0;">
-                        <div class="spacer_box_title" i18n="gpsMapHead"></div>
+                        <div class="spacer_box_title" data-i18n="gpsMapHead"></div>
-                </div>
-                <div id="connect" i18n="gpsMapMessage1">
-                    <div class="default_btn" style="width:50px; margin-left:auto; margin-right:auto; float:none;"><a id="check">retry</a></div>
                 </div>
                 <div id="waiting" >
-                    <div class="info" i18n="gpsMapMessage2"></span>
+                    <div class="info" data-i18n="gpsMapMessage2"></span>
                 </div>
             </div>
                 <div id="loadmap">
                     <iframe src="tabs/map.html" id="map"></iframe>
-                    <div class="controls">
-                          <a href="#" id="zoom_in">+</a>
-                          <a href="#" id="zoom_out">–</a>
-                    </div>
                 </div>
         </div>
 

tabs/gps.js

@@ -14,18 +14,6 @@ TABS.gps.initialize = function (callback) {
 
     load_html();
 
-    function set_online(){
-        $('#connect').hide();
-        $('#waiting').show();
-        $('#loadmap').hide();
-    }
-    
-    function set_offline(){
-        $('#connect').show();
-        $('#waiting').hide();
-        $('#loadmap').hide();
-    }
-    
     function process_html() {
         localize();
 
@@ -42,9 +30,17 @@ TABS.gps.initialize = function (callback) {
         }
 
         function update_ui() {
+
+            if (GPS_DATA.fix > 0) {
+                $('#loadmap').show();
+                $('#waiting').hide();
+            } else {
+                $('#loadmap').hide();
+                $('#waiting').show();
+            }
+
             var lat = GPS_DATA.lat / 10000000;
             var lon = GPS_DATA.lon / 10000000;
-            var url = 'https://maps.google.com/?q=' + lat + ',' + lon;
 
             var gpsFixType = chrome.i18n.getMessage('gpsFixNone');
             if (GPS_DATA.fix >= 2)
@@ -54,8 +50,8 @@ TABS.gps.initialize = function (callback) {
 
             $('.GPS_info td.fix').html(gpsFixType);
             $('.GPS_info td.alt').text(GPS_DATA.alt + ' m');
-            $('.GPS_info td.lat a').prop('href', url).text(lat.toFixed(4) + ' deg');
+            $('.GPS_info td.lat').text(lat.toFixed(4) + ' deg');
-            $('.GPS_info td.lon a').prop('href', url).text(lon.toFixed(4) + ' deg');
+            $('.GPS_info td.lon').text(lon.toFixed(4) + ' deg');
             $('.GPS_info td.speed').text(GPS_DATA.speed + ' cm/s');
             $('.GPS_info td.sats').text(GPS_DATA.numSat);
             $('.GPS_info td.distToHome').text(GPS_DATA.distanceToHome + ' m');
@@ -74,29 +70,14 @@ TABS.gps.initialize = function (callback) {
             $('.GPS_stat td.hdop').text((GPS_DATA.hdop / 100).toFixed(2));
 
             var message = {
-                action: 'center',
+                action: 'update',
                 lat: lat,
                 lon: lon
             };
 
             var frame = document.getElementById('map');
-            if (navigator.onLine) {
-                $('#connect').hide();
 
-                //if(lat != 0 && lon != 0){
+            frame.contentWindow.postMessage(message, '*');
-                if(GPS_DATA.fix){
-                   frame.contentWindow.postMessage(message, '*');
-                   $('#loadmap').show();
-                   $('#waiting').hide();
-                }else{
-                   $('#loadmap').hide();
-                   $('#waiting').show();
-                }
-            }else{
-                $('#connect').show();
-                $('#waiting').hide(); 
-                $('#loadmap').hide();
-            }
         }
 
         /*
@@ -106,7 +87,8 @@ TABS.gps.initialize = function (callback) {
         helper.mspBalancedInterval.add('gps_pull', 200, 3, function gps_update() {
             // avoid usage of the GPS commands until a GPS sensor is detected for targets that are compiled without GPS support.
             if (!have_sensor(CONFIG.activeSensors, 'gps')) {
-                //return;
+                update_ui();
+                return;
             }
 
             if (helper.mspQueue.shouldDrop()) {
@@ -116,43 +98,6 @@ TABS.gps.initialize = function (callback) {
             get_raw_gps_data();
         });
 
-        //check for internet connection on load
-        if (navigator.onLine) {
-            console.log('Online');
-            set_online();
-        } else {
-            console.log('Offline');
-            set_offline();
-        }
-
-        $("#check").on('click',function(){
-            if (navigator.onLine) {
-                console.log('Online');
-                set_online();
-            } else {
-                console.log('Offline');
-                set_offline();
-            }
-        });
-
-        var frame = document.getElementById('map');
-
-        $('#zoom_in').click(function() {
-            console.log('zoom in');
-            var message = {
-                action: 'zoom_in'
-            };
-            frame.contentWindow.postMessage(message, '*');
-        });
-        
-        $('#zoom_out').click(function() {
-            console.log('zoom out');
-            var message = {
-                action: 'zoom_out'
-            };
-            frame.contentWindow.postMessage(message, '*');
-        });
- 
         GUI.content_ready(callback);
     }
 

tabs/map.html

@@ -1,99 +1,84 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <title>Asynchronous Loading</title>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
+
+    <link type="text/css" rel="stylesheet" href="../build/map.css" media="all"/>
+    <script type="text/javascript" src="../build/map.js"></script>
+
     <style>
-     html, body, #map-canvas {
+        html, body, #map-canvas {
-        height: 100%;
+            height: 100%;
-        margin: 0px;
+            margin: 0;
-        padding: 0px;
+            padding: 0;
-      }
+        }
     </style>
     <script>
+        window.addEventListener('message', function (e) {
+            try {
+                switch (e.data.action) {
+                    case 'update':
+                        var center = ol.proj.fromLonLat([e.data.lat, e.data.lon]);
 
-     window.addEventListener('message', function (e) {
+                        mapView.setCenter(center);
-       var mainWindow = e.source;
+                        iconGeometry.setCoordinates(center);
-       var result = '';
+                        break;
-       try {
-         switch(e.data.action){
-            case 'zoom_in':
-              var zoom = map.getZoom();
-              zoom++;
-              map.setZoom(zoom);
-              break;
 
-            case 'zoom_out':
+                }
-              var zoom = map.getZoom();
+            } catch (e) {
-              zoom--;
+                console.log(e);
-              map.setZoom(zoom);
+            }
-              break;
+        });
-            case 'center':
+    </script>
-              map.setCenter(new google.maps.LatLng(e.data.lat, e.data.lon));
+</head>
-              marker.setPosition( new google.maps.LatLng( e.data.lat, e.data.lon ) );
+<body>
-              map.panTo( new google.maps.LatLng( e.data.lat, e.data.lon ) );
+    <div id="map-canvas"></div>
-         }
-       } catch (e) {
-         console.log('message error');
-       }
-     });
 
-     function loadMapScript() {
+    <script type="text/javascript">
-       var script = document.createElement('script');
-       script.type = 'text/javascript';
-       script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=initialize';
-       document.head.appendChild(script);
-     }
 
-     window.onload = loadMapScript;
+        var mapView = new ol.View({
+            center: ol.proj.fromLonLat([0, 0]),
+            zoom: 15
+        });
 
-     var map;
+        var mapHandler = new ol.Map({
-     var marker;
+            target: 'map-canvas',
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.OSM()
+                })
+            ],
+            view: mapView
+        });
 
-     function initialize() {
+        var iconStyle = new ol.style.Style({
+            image: new ol.style.Icon(({
+                anchor: [0.5, 1],
+                opacity: 1,
+                scale: 0.5,
+                src: '../images/icons/cf_icon_position.png'
+            }))
+        });
 
-       var mapOptions = {
+        var currentPositionLayer;
-         zoom: 17,
+        var iconGeometry = new ol.geom.Point(ol.proj.fromLonLat([0, 0]));
-         zoomControl: false,
+        var iconFeature = new ol.Feature({
-         streetViewControl: false,
+            geometry: iconGeometry
-         center: {lat: 53.570645, lng: 10.001362}
+        });
-       };
-       map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
 
-       var image = {
+        iconFeature.setStyle(iconStyle);
-         url: '../images/icons/cf_icon_position.png',
-         scaledSize: new google.maps.Size(70, 70)
-       };
 
-       marker = new google.maps.Marker({
+        var vectorSource = new ol.source.Vector({
-         icon : image,
+            features: [iconFeature]
-         position: new google.maps.LatLng(53.570645, 10.001362),
+        });
-         map:map
+        currentPositionLayer = new ol.layer.Vector({
-       });
+            source: vectorSource
+        });
 
-
+        mapHandler.addLayer(currentPositionLayer);
-  // You can use a LatLng literal in place of a google.maps.LatLng object when
-  // creating the Marker object. Once the Marker object is instantiated, its
-  // position will be available as a google.maps.LatLng object. In this case,
-  // we retrieve the marker's position using the
-  // google.maps.LatLng.getPosition() method.
-       var infowindow = new google.maps.InfoWindow({
-         content: '<p>Your Location: ' + marker.getPosition() + '</p>'
-       });
-
-       google.maps.event.addListener(marker, 'click', function() {
-         infowindow.open(map, marker);
-       });
-  
-       window.addEventListener('message', function(e) {
-         var data = e.data;
-         var origin = e.origin;
-       });
-}
 
     </script>
-  </head>
+
-  <body>
+</body>
-    <div id="map-canvas"></div>
-  </body>