CruisersWiki:Ol3chartlet.js

From CruisersWiki

(Difference between revisions)
Jump to: navigation, search
Line 283: Line 283:
                 loadWikiScript("MediaWiki:Ol3-popup.js", init_popups);
                 loadWikiScript("MediaWiki:Ol3-popup.js", init_popups);
             }
             }
 +
        }
 +
 +
        function initStandalone (map, params) {
 +
 +
            var doNotTrackHash = false;
 +
            var setHashTimeoutID = null;
 +
   
 +
            var onChangeCenterZoom = function () {
 +
                var setHashDelay = 1000;
 +
   
 +
                var setHash = function () {
 +
                    var bounds = webapi.getBoundsArea();
 +
                    params.lon = (bounds[2] + bounds[0]) / 2;
 +
                    params.lat = (bounds[3] + bounds[1]) / 2;
 +
                    params.zoom = webapi.getZoom() - zoomDelta;
 +
                    //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);
 +
            };
 +
           
 +
            JNC.Events.on("map:centerchange", onChangeCenterZoom);
 +
            JNC.Events.on("map:zoomchange", 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) {
 +
                    webapi.goToCoord(params.lon, params.lat, params.zoom);
 +
                }
 +
            };
 +
   
 +
            window.onhashchange = trackHash;
         }
         }

Revision as of 18:49, 20 February 2016

/* 

  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.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 noneLayer = new ol.layer.Vector({
           title: 'Yellow',
           type: 'base',
           source: new ol.source.Vector({
           })
       });
   
       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 overlay_group = new ol.layer.Group({
           title: 'Layers',
           layers: [
               nx_layer_ovl,
               // new ol.layer.Tile({
               //     title: 'Countries',
               //     visible: false,
               //     source: new ol.source.TileWMS({
               //         url: 'http://demo.opengeo.org/geoserver/wms',
               //         params: {'LAYERS': 'ne:ne_10m_admin_1_states_provinces_lines_shp'},
               //         serverType: 'geoserver'
               //     })
               // }),
               // vectorLayer
           ]
       });
       
       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.Tile({
                           title: 'Water color',
                           type: 'base',
                           source: new ol.source.Stamen({
                               layer: 'watercolor'
                           })
                       }),
                       noneLayer,
                       // nx_layer
                   ]
               }),
               overlay_group
           ],
           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 (webapi, params);

           // 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}
                   );
                   // , format.readProjection(source)) {
                   
                   this.addFeatures(features);
   
                   //   function(features, dataProjection) {
                   //     this.addFeatures(features);
               };
               var kml_layer = new ol.layer.Vector({
                   title: 'POI',
                   visible:true,
                   source: new ol.source.Vector({
                       loader: loader,
                       // url: kml_uri,
                       // format: new ol.format.KML({
                       //     showPointNames: false,
                       // })
                   })
               });            
       
               overlay_group.getLayers().push(kml_layer);
               loadWikiCss('MediaWiki:Ol3-popup.css');
               loadWikiScript("MediaWiki:Ol3-popup.js", init_popups);
           }
       }

       function initStandalone (map, params) {

           var doNotTrackHash = false;
           var setHashTimeoutID = null;
   
           var onChangeCenterZoom = function () {
               var setHashDelay = 1000;
   
               var setHash = function () {
                   var bounds = webapi.getBoundsArea();
                   params.lon = (bounds[2] + bounds[0]) / 2;
                   params.lat = (bounds[3] + bounds[1]) / 2;
                   params.zoom = webapi.getZoom() - zoomDelta;
                   //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);
           };
           
           JNC.Events.on("map:centerchange", onChangeCenterZoom);
           JNC.Events.on("map:zoomchange", 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) {
                   webapi.goToCoord(params.lon, params.lat, params.zoom);
               }
           };
   
           window.onhashchange = trackHash;
       }

       function init_popups() {
           var popup = new ol.Overlay.Popup();
           map.addOverlay(popup);
           
           // map.on('singleclick', function(evt) {
           //     var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
// popup.show(evt.coordinate, '

Coordinates

' + prettyCoord + '

'); 
           // });

         // 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,
'
' + feature.get("name") + '
' + '
' + feature.get("styleUrl").split('#')[1] + '
' + '
' + feature.get("description") + '
' 
               );
           //   popup.setPosition(evt.coordinate);
           //   $(element).popover({
           //     'placement': 'top',
           //     'html': true,
           //     'content': feature.get('name')
           //   });
           //   $(element).popover('show');
           } else {
           //   $(element).popover('destroy');
               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 () {
               // getKmlUri(
               getKml(
                   {page: params.page, decorated: true},
                   add_kml_layer
               );
           });
       }
   }

   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);
       });
   });
});
Retrieved from "http://www.cruiserswiki.org/wiki/CruisersWiki:Ol3chartlet.js"
Personal tools
advertisement
Friends of Cruisers Wiki