CruisersWiki:Ol3chartlet.js

From CruisersWiki

/*

  ol3Chartlet.js

  Copyright (c) 2016 Vadim Shlyakhov
  Licensed MIT

• /

addOnloadHook(function() {

   var $chartlets = $('.ol3-chartlet');
   if ($chartlets.length === 0) {
       return;
   }

   var standalone_div = $('#ol3-chartlet-standalone')[0];
   var standalone = !! standalone_div;

   var nx = {
       navKey: 'Navionics_webapi_00572',
       domain: 'www.cruiserswiki.org',
       navToken: null,
       BASE_TILE_SERVER: '//backend.navionics.io',
       TILE_SUFFIX: '/tile/{z}/{x}/{y}',
       KEY_REQ_SUFFIX: '/tile/get_key',
       MAX_RESOLUTION: 20480,
       MIN_RESOLUTION: 0.625,
       disclaimer_msg: '© Navionics <a href="http://www.navionics.com/en/acknowledgements" target="_new" class="navionics-acknowledgements">Acknowledgements</a> | Not to be used for navigation',
   };

   nx.init = function(callback) {
       // set location for Navionics images
       $('body').attr('data-root', 'http://webapiv2.navionics.com/dist/webapi/images');

       // requestNavToken
       var targetUrl = nx.BASE_TILE_SERVER + nx.KEY_REQ_SUFFIX;
       $.ajax({
           url: targetUrl + '/' + nx.navKey + '/' + nx.domain,
           async: !!callback,
           crossDomain: true,
           dataType: 'text',
           cache: false,
           error: function() {
             return console.log(arguments);
           },
           success: function(data, textStatus, jqXHR) {
               nx.navToken = data;
               callback();
           }
       });
   };

   nx.formatTileUrl = function (options) { // sonar, overlay, depthUnit, safeDepth, showUGC
       options = options || {};
       sType = options.sonar ? 1 : 0;
       sAlpha = options.overlay ? 'TRUE' : 'FALSE';
       sUgc = options.showUGC ? 'TRUE' : 'FALSE';
       sDepthUnit = {
           'm': 1, 'metre': 1, 'meter': 1,
           'ft': 2, 'feet': 2,
           'fathom': 3,
       } [options.depthUnit] || 1;
       // sDepthLevel = (options.safeDepth || 10).toFixed(2);
       sDepthLevel = (options.safeDepth || 20).toFixed(0);
       params = $.param({
           LAYERS: 'config_' + sDepthUnit + '_' + sDepthLevel + '_' + sType,
           TRANSPARENT: sAlpha,
           UGC: sUgc,
           navtoken: nx.navToken
       });
       return  //nx.BASE_TILE_SERVER + nx.TILE_SUFFIX + '?' + params;
   };

   nx.new_source = function (options) {
       return new ol.source.XYZ({
           crossOrigin: 'anonymous',
           attributions: [
               new ol.Attribution({
                   html: nx.disclaimer_msg
               })
           ],
           url: nx.formatTileUrl(options),
           maxResolution: nx.MAX_RESOLUTION,
           minResolution: nx.MIN_RESOLUTION
       });
   };

   var esri = {};
   esri.uris = {
       'satellite': "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
       'topo': "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
       'light-gray': "http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer",
       'dark-gray': "http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer",
       'streets': "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
       'hybrid': "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer",
       'oceans': "http://server.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer",
       'national-geographic': "http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer",
   };

   function ol3Chartlet() {
       console.log('ol3Chartlet');
       var $chartlet = $(this);
       var params = parseParams(standalone && location.hash ? location.hash.slice(1) : $chartlet.text());

       var iconFeature = new ol.Feature({
           geometry: new ol.geom.Point(ol.proj.transform([params.lon, params.lat], 'EPSG:4326', 'EPSG:3857')),
           name: 'Test marker',
       });

       iconFeature.setStyle(
           new ol.style.Style({
               image: new ol.style.Icon({
                   anchor: [0, 1],
                   anchorXUnits: 'fraction',
                   anchorYUnits: 'fraction',
                   // anchorYUnits: 'pixels',
                   opacity: 1,
                   src: '/images/e/e7/Flag_icon.png'
               })
           })
       );

       // var vectorLayer = new ol.layer.Vector({
       //     title: 'POI',
       //     source: new ol.source.Vector({
       //         features: [iconFeature]
       //     })
       // });

       var openseamap = new ol.layer.Tile({
           title: 'OpenSeaMap',
           visible: false,
           source: new ol.source.XYZ({
               url: 'http://t1.openseamap.org/seamark/{z}/{x}/{y}.png',
               crossOrigin: null,
               attributions: [
                   new ol.Attribution({
                       html: 'Tiles by <a href="http://www.openseamap.org">OpenSeaMap</a>'
                   })
               ],
           })
       });

       var nx_layer = new ol.layer.Tile({
           title: 'Navionics',
           type: 'base',
           source: nx.new_source()
       });

       var nx_layer_ovl = new ol.layer.Tile({
           title: 'Navionics',
           // type: 'base',
           // visible: false,
           source: nx.new_source({overlay:true})
       });

       var esri_layer = new ol.layer.Tile({
           title: 'ESRI World Imagery',
           type: 'base',
           source: new ol.source.TileArcGISRest({
               url: esri.uris.satellite,
               params: {
                   FORMAT: 'JPG',
                   TRANSPARENT: false,
               },
               attributions: [
                   new ol.Attribution({
                       html: 'Powered by ESRI <a href="' + esri.uris.satellite + '">Acknowledgements</a>'
                   })
               ]
           }),
       });

       var view = new ol.View({
               center: ol.proj.transform([params.lon, params.lat], 'EPSG:4326', 'EPSG:3857'),
               zoom: params.zoom
           });

       var map = new ol.Map({
           target: this,
           layers: [
               new ol.layer.Group({
                   'title': 'Base',
                   layers: [
                       new ol.layer.Tile({
                           title: 'OSM',
                           type: 'base',
                           source: new ol.source.OSM()
                       }),
                       // new ol.layer.Tile({
                       //     title: 'MapQuest Satellite',
                       //     type: 'base',
                       //     source: new ol.source.MapQuest({layer: 'sat'})
                       // }),
                       esri_layer,
                       new ol.layer.Vector({
                           title: 'Yellow background',
                           type: 'base',
                           source: new ol.source.Vector({
                           })
                       }),
                       new ol.layer.Tile({
                           title: 'Water color',
                           type: 'base',
                           source: new ol.source.Stamen({
                               layer: 'watercolor'
                           })
                       }),
                       // nx_layer
                   ]
               }),
               new ol.layer.Group({
                   title: 'Layers',
                   layers: [
                       openseamap,
                       nx_layer_ovl,
                   ]
               })
           ],
           view: view,
           controls: ol.control.defaults({
               attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                   collapsible: false
               })
           })
       });

       map.addControl(new ol.control.ScaleLine({
           units: 'nautical'
       }));

       loadWikiCss('MediaWiki:Ol3-layerswitcher.css');
       loadWikiScript("MediaWiki:Ol3-layerswitcher.js", function () {
           var layerSwitcher = new ol.control.LayerSwitcher({
               // tipLabel: 'Légende' // Optional label for button
           });
           map.addControl(layerSwitcher);
       });

       if (standalone) {
           initStandalone (map, params);
       }
   };

   function initStandalone (map, params) {

       var doNotTrackHash = false;
       var setHashTimeoutID = null;

       var view = map.getView();

       var onChangeCenterZoom = function () {
           var setHashDelay = 1000;

           var setHash = function () {
               var centre = view.getCenter();
               var lonlat = ol.proj.transform(centre, view.getProjection(), 'EPSG:4326')

               params.lon = lonlat[0];
               params.lat = lonlat[1];
               params.zoom = view.getZoom();
               //console.log(center, zoom);
               var layer_parm = params.layer ? '|layer=' + params.layer : ;
               var page_parm = params.page ? '|page=' + params.page : ;

               doNotTrackHash = true;

               location.hash= 'lat=' + round(params.lat) + '|lon=' + round(params.lon) + '|zoom=' + params.zoom;
                   + layer_parm + page_parm;

               setHashTimeoutID = null;
           };

           if (setHashTimeoutID) {
               window.clearTimeout(setHashTimeoutID);
           }
           setHashTimeoutID = window.setTimeout(setHash, setHashDelay);
       };

       view.on('change:center', onChangeCenterZoom);
       view.on('change:resolution', onChangeCenterZoom);

       var trackHash = function trackHash() {
           if (!location.hash || doNotTrackHash) {
               doNotTrackHash = false;
               return;
           }
           params = parseParams(location.hash.slice(1));
           if (params.lat != null && params.lon != null) {
               var centre = [params.lon, params.lat];
               view.setCenter(ol.proj.transform(centre, 'EPSG:4326', view.getProjection()))
               view.setZoom(params.zoom);
           }
       };

       window.onhashchange = trackHash;

       // load kml
       function add_kml_layer (kml) {
           if (!kml)
               return;
           // kml_uri='http://openlayers.org/en/v3.13.1/examples/data/kml/2012-02-10.kml';
           var format = new ol.format.KML({
               showPointNames: false,
           });
           var loader = function(extent, resolution, projection) {
               /**
               * @param {ol.Extent} extent Extent.
               * @param {number} resolution Resolution.
               * @param {ol.proj.Projection} projection Projection.
               * @this {ol.source.Vector|ol.VectorTile}
               */
               var source = ol.xml.parse(kml);

               var features = format.readFeatures(
                   source,
                   {featureProjection: projection}
               );

               this.addFeatures(features);
           };
           var kml_layer = new ol.layer.Vector({
               title: 'POI',
               visible:true,
               source: new ol.source.Vector({
                   loader: loader,
               })
           });

           // add to the proper layer group
           map.getLayers().forEach(
               function(layer) {
                   if (layer.get('title') === 'Layers') {
                       layer.getLayers().push(kml_layer);
                   }
               }
           );
       }

       function init_popups() {
           var popup = new ol.Overlay.Popup();
           map.addOverlay(popup);

           // display popup on click
           map.on('click', function(evt) {
               var feature = map.forEachFeatureAtPixel(evt.pixel,
                   function(feature) {
                     return feature;
                   });
               if (feature) {
                   popup.show(evt.coordinate,

                   );
               } else {
                   popup.hide();
               }
           });

           // change mouse cursor when over marker
           map.on('pointermove', function(e) {
               //~ if (e.dragging) {
                 //~ $(element).popover('destroy');
                 //~ return;
               //~ }
               var pixel = map.getEventPixel(e.originalEvent);
               var hit = map.hasFeatureAtPixel(pixel);
               map.getTarget().style.cursor = hit ? 'pointer' : ;
             });
       }

       if (params.page) {
           loadWikiScript('MediaWiki:GetKml.js', function () {
               getKml(
                   {
                       page: params.page,
                       decorated: true
                   },
                   add_kml_layer
               );
           });

           loadWikiCss('MediaWiki:Ol3-popup.css');
           loadWikiScript("MediaWiki:Ol3-popup.js", init_popups);
       }
   }

   function dmsh2deg(dmsh) {
       var dmsFactors = [1, 60, 3600];
       var deg = 0;
       if (!dmsh)
           return deg;

       var parts = dmsh.split('_');
       for (var i=0, li = parts.length; i < li; i++) {
           var p = parts[i];
           if (isNaN(+ p)) {
               if (p == 'S' || p == 's' || p == 'W' || p == 'w')
                   deg = -deg;
               break;
           } else {
               deg += p / dmsFactors[i];
           }
       }
       return deg;
   }

   var zoomDelta = 0; // -3; // adjust zoom levels

   function parseParams(param_str) {
       var out = {};
       var params = param_str.split('|');

       for (var i=0, li = params.length; i < li; i++) {
           var keyVal = params[i].split('=', 2);
           var key = keyVal[0].replace(/^\s+|\s+$/g, ).toLowerCase();
           var val = keyVal[1].replace(/^\s+|\s+$/g, );
           if (key == 'lon') {
               out.lon = dmsh2deg(val);
           } else if (key == 'lat') {
               out.lat = dmsh2deg(val);
           } else if (key == 'zoom') {
               out.zoom = +(val || 12) + zoomDelta;
           } else if (key == 'layer') {
               out.layer = val || 'N';
           } else if (key == 'page') {
               out.page = val;
           }
       }
       return out;
   }

   function round(val) {
       var fact = 100000;
       return Math.round(val * fact) / fact;
   }

   // if (standalone && location.hash) {
   //     $('body').empty().append(standalone_div);
   //     $('body').addClass('cw-chartlet-extend');
   // }

   loadWikiCss('CruisersWiki:Ol3chartlet.css');
   // loadCss("http://openlayers.org/en/v3.12.1/css/ol.css");
   // loadScript("http://openlayers.org/en/v3.12.1/build/ol-debug.js", function () {
   loadCss("http://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol.css");
   loadScript("http://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol-debug.js", function () {
       if (typeof ol === 'undefined') {
           return;
       }

       // patch ol.xml as /extensions/TreeAndMenu/dtree.js overwrites Node

       ol.xml.isNode = goog.userAgent.IE ? ol.xml.isNodeIE_ : function(value) {
           //   return value instanceof Node;
           return typeof value.nodeName === "string";
       };

       nx.init(function() {
           console.log('nx.init');
           $chartlets.each(ol3Chartlet);
           // ol3Map(41.235983333333, 9.1945166666667, 11);
       });
   });