Migrate Google Maps to OpenStreetMap

src/js/tabs/map.js

@@ -1,76 +1,86 @@
-window.addEventListener('message', function (e) {
-  var mainWindow = e.source;
-  var result = '';
-  try {
-    switch(e.data.action){
-       case 'zoom_in':
-         var zoom = map.getZoom();
-         zoom++;
-         map.setZoom(zoom);
-         break;
-       case 'zoom_out':
-         var zoom = map.getZoom();
-         zoom--;
-         map.setZoom(zoom);
-         break;
-       case 'center':
-         map.setCenter(new google.maps.LatLng(e.data.lat, e.data.lon));
-         marker.setPosition( new google.maps.LatLng( e.data.lat, e.data.lon ) );
-         map.panTo( new google.maps.LatLng( e.data.lat, e.data.lon ) );
-    }
+const DEFAULT_ZOOM = 16,
+      DEFAULT_LON = 0,
+      DEFAULT_LAT = 0,
+      ICON_IMAGE = '/images/icons/cf_icon_position.png';
+
+var iconGeometry,
+    map,
+    mapView,
+    marker;
+
+window.onload = initializeMap;
+
+function initializeMap() {
+
+    var lonLat = ol.proj.fromLonLat([DEFAULT_LON, DEFAULT_LAT]);
+
+    mapView = new ol.View({
+                        center: lonLat,
+                        zoom: DEFAULT_ZOOM
+                      });
+
+    map = new ol.Map({
+        target: 'map-canvas',
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.OSM()
+          })
+        ],
+        view: mapView,
+        controls: []
+      });
+
+    var iconStyle = new ol.style.Style({
+        image: new ol.style.Icon(({
+            anchor: [0.5, 1],
+            opacity: 1,
+            scale: 0.5,
+            src: ICON_IMAGE
+        }))
+    });
+
+    iconGeometry = new ol.geom.Point(lonLat);
+    var iconFeature = new ol.Feature({
+        geometry: iconGeometry
+    });
+
+    iconFeature.setStyle(iconStyle);
+
+    var vectorSource = new ol.source.Vector({
+        features: [iconFeature]
+    });
+
+    var currentPositionLayer = new ol.layer.Vector({
+        source: vectorSource
+    });
+
+    map.addLayer(currentPositionLayer);
+
+    window.addEventListener('message', processMapEvents); 
+}
+
+function processMapEvents(e) {
+
+    try {
+        switch(e.data.action) {
+
+        case 'zoom_in':            
+            mapView.setZoom(mapView.getZoom() + 1);
+            break;
+
+        case 'zoom_out':
+            mapView.setZoom(mapView.getZoom() - 1);
+            break;
+
+        case 'center':
+            var center = ol.proj.fromLonLat([e.data.lon, e.data.lat]);
+            mapView.setCenter(center);
+            iconGeometry.setCoordinates(center);
+            break;
+
+        }
+
   } catch (e) {
-    console.log('message error');
+      console.log('Map error ' + e);
   }
-});
-
-function loadMapScript() {
-  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 map;
-var marker;
-
-function zoom_in(){
-  var zoom = map.getZoom();
-  zoom++;
-  map.setZoom(zoom);
-}
-
-function initialize() {
-
-  var mapOptions = {
-    zoom: 17,
-    zoomControl: false,
-    streetViewControl: false,
-    center: {lat: 53.570645, lng: 10.001362}
-  };
-  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
-
-  var image = {
-    url: '/images/icons/cf_icon_position.png',
-    scaledSize: new google.maps.Size(70, 70)
-  };
-
-  marker = new google.maps.Marker({
-    icon : image,
-    position: new google.maps.LatLng(53.570645, 10.001362),
-    map:map
-  });
-
-  var infowindow = new google.maps.InfoWindow();
-
-  google.maps.event.addListener(marker, 'click', function() {
-     infowindow.setContent('<p>Your Location: ' + map.getCenter() + '</p>');
-     infowindow.open(map, marker);
-  });
-
-  window.addEventListener('message', function(e) {
-    var data = e.data;
-    var origin = e.origin;
-  });
 }