CruisersWiki:Ol3chartlet.js

From CruisersWiki

Revision as of 14:33, 22 December 2016

/*
   ol3Chartlet.js

   Copyright (c) 2016 Vadim Shlyakhov
   Licensed MIT
*/

(function() {
    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: '<b>© Navionics</b> <a href="http://www.navionics.com/en/acknowledgements" target="_new" class="navionics-acknowledgements">Acknowledgements</a> | Not to be used for navigation',
    };

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

        if ( nx.navToken ) {
            callback();
        } else {
            callback && nx.navTokenPending.push(callback);
            // 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;
                    for (var i=0; i < nx.navTokenPending.length; i++ ) 
                        nx.navTokenPending[i]();
                    nx.navTokenPending = [];
                }
            });
        }
    };

    nx.depthUnits = {
        'm': 1, 'metre': 1, 'meter': 1,
        'ft': 2, 'feet': 2,
        'fathom': 3,
    };

    nx.formatTileUrl = function (options) { // sonar, overlay, depthUnit, safeDepth, showUGC
        options = options || {};
        var layerConfig = [
            'config',
            nx.depthUnits[options.depthUnit] || 1,
            (options.safeDepth || 20).toFixed(2),
            options.sonar ? 1 : 0
        ];
        params = $.param({
            LAYERS: layerConfig.join('_'),
            TRANSPARENT: !! options.transparency,
            UGC: !! options.showUGC,
            navtoken: nx.navToken
        });
        return nx.BASE_TILE_SERVER + nx.TILE_SUFFIX + '?' + params;
    };

    nx.getTileUrl = function (options, callback) { // sonar, overlay, depthUnit, safeDepth, showUGC
        nx.init(function () {
            callback(nx.formatTileUrl(options))
        });
    };

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

        nx.getTileUrl(
            options,
            function (url) {
                source.setUrl(url);
            }
        );

        return source;
    };

    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",
        'terrain': 'http://server.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer',
        'physical': 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer',
        'relief': 'http://server.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/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",
        'street': "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-reference': "http://server.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer",
        'oceans': 'http://server.arcgisonline.com/arcgis/rest/services/Ocean_Basemap/MapServer',
        'national-geographic': "http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer",
    };

    esri.ZZnew_source = function (src_id) {
        return new ol.source.TileArcGISRest({
            url: esri.uris[src_id],
            params: {
                FORMAT: 'JPG',
                TRANSPARENT: false,
            },
            attributions: [
                new ol.Attribution({
                    html: 'Tiles by ESRI <a href="' + esri.uris[src_id] + '">Acknowledgements</a>'
                })
            ]
        })
    };

    esri.new_source = function (src_id) {
        return new ol.source.XYZ({
            url: esri.uris[src_id] + '/tile/{z}/{y}/{x}',
            crossOrigin: null,
            attributions: [
                new ol.Attribution({
                    html: 'Tiles by ESRI <a href="' + esri.uris[src_id] + '">Acknowledgements</a>'
                })
            ],
        })
    };
    
    var baselayersGroupName = 'Base';
    var overlaysGroupName = 'Overlays';

    function ol3Chartlet(chartlet_div) {
        console.log('ol3Chartlet');

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

        // if (standalone && location.hash) {
        //     $('body').empty().append(standalone_div);
        //     $('body').addClass('cw-chartlet-extend');
        // }
    
        // fill in to a full window if URL hash is set
        if (standalone && location.hash) {
            while (document.body.firstChild) {
                document.body.removeChild(document.body.firstChild);
            }
            document.body.appendChild(chartlet_div);

            $('body').addClass('cw-chartlet-extend');
        }

        this.params = parseParams(standalone && location.hash ? decodeURI(location.hash.slice(1)) : $(chartlet_div).text());
        this.params.standalone = standalone;

        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([this.params.lon, this.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 testLayer = new ol.layer.Vector({
            title: 'Icon',
            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',
            source: nx.new_source()
        });
        var nx_layer_ovl = new ol.layer.Tile({
            title: 'Navionics Boating',
            source: nx.new_source({
                transparency:true
            })
        });

        var overLayers = standalone || this.params.pageFeatures ? [
            openseamap,
            nx_layer_ovl,
            // testLayer,
        ] : [
        ];

        var osm = new ol.layer.Tile({
            title: 'OpenStreetMap',
            source: new ol.source.OSM()
        });
        var esri_world = new ol.layer.Tile({
            title: 'ESRI World Imagery',
            source: esri.new_source('satellite')
        });
        var esri_street = new ol.layer.Tile({
            title: 'ESRI World Street Map',
            source: esri.new_source('street')
        });
        var watercolor = new ol.layer.Tile({
            title: 'Water color',
            source: new ol.source.Stamen({
                layer: 'watercolor',
                //~ url: 'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'
                url: '//stamen-tiles-{a-d}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
            })
        });
        var osm_base = new ol.layer.Tile({
            title: 'OSM base',
            source: new ol.source.OSM({
                crossOrigin: null,
                url: 'http://{a-c}.tiles.wmflabs.org/osm-no-labels/{z}/{x}/{y}.png'
            })
        });
        var no_background = new ol.layer.Vector({
            title: 'Plain background',
            source: new ol.source.Vector({
            })
        });

        var baseLayers =  standalone || this.params.pageFeatures ? [
            osm,
            esri_world,
            // esri_street,
            // osm_base,
            // no_background,
            watercolor,
        ] : [
            osm,
            esri_world,
            nx_layer,
        ];

        for (var i = 0; i < baseLayers.length; i++) {
            baseLayers[i].set('type', 'base');
            baseLayers[i].set('visible', false);
        }
        baseLayers[baseLayers.length-1].set('visible', true);

        var layers = [
            new ol.layer.Group({
                title: baselayersGroupName,
                layers: baseLayers
            })
        ];
        if (overLayers.length > 0 || this.params.pageFeatures)
            layers.push(new ol.layer.Group({
                    title: overlaysGroupName,
                    layers: overLayers
            }));

        var map = this.map = new ol.Map({
            target: chartlet_div,
            layers: layers,
            view: new ol.View({
                center: ol.proj.transform([this.params.lon, this.params.lat], 'EPSG:4326', 'EPSG:3857'),
                zoom: this.params.zoom
            }),
            interactions: ol.interaction.defaults(
                standalone ? {}
                : {
                    mouseWheelZoom:false,
                    // doubleClickZoom :false,
                }
            ),
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            })
        });

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

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

        if (standalone) {
            this.params.page && this.loadFeatures();
            this.trackHash();
            this.addGraticule();
        } else if (this.params.pageFeatures) {
            this.loadFeatures();
        }
    };

    // add to a layer group
    ol3Chartlet.prototype.addNonBaseLayer = function (new_layer) {
        this.map.getLayers().forEach(
            function(layer) {
                if (layer.get('title') === overlaysGroupName) {
                    layer.getLayers().push(new_layer);
                }
            }
        );
    };

    ol3Chartlet.prototype.trackHash = function() {
        var doNotTrackHash = false;
        var setHashTimeoutID = null;

        var view = this.map.getView();
        var params = this.params;

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

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

                doNotTrackHash = true;
                setHashTimeoutID = null;

                params.lon = lonlat[0];
                params.lat = lonlat[1];
                params.zoom = view.getZoom();
                //console.log(center, zoom);

                location.hash = 'lat=' + round(params.lat) + '|lon=' + round(params.lon)
                    + '|zoom=' + params.zoom
                    + (params.layer ? '|layer=' + params.layer : '')
                    + (params.page ? '|page=' + params.page : '');
            };

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

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

        window.addEventListener('hashchange',  function () {
            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);
            }
        });
    };

    // Create the graticule
    ol3Chartlet.prototype.addGraticule = function () { // after http://map.openseamap.org/javascript/grid_wgs.js
        var this_ = this;
        loadWikiScript('CruisersWiki:Ol3chartlet/graticule.js', function () {
            var layer = graticuleLayer(this_.map);
            this_.addNonBaseLayer(layer);
        });
        /*
        var graticule = new ol.Graticule({
            map: this.map,
            // the style to use for the lines, optional.
            strokeStyle: new ol.style.Stroke({
                color: 'rgba(255,120,0,0.9)',
                width: 2,
                lineDash: [0.5, 4]
            })
        });
        // graticule.setMap(this.map);
        */
    };

    ol3Chartlet.prototype.loadFeatures = function (page) {
        loadWikiScript('CruisersWiki:Ol3chartlet features.js', function () {
            var layer = getArticleLayer(this.params);
            this.addNonBaseLayer(layer);
        }.bind(this));

        loadWikiCss('CruisersWiki:Ol3-popup.css');
        loadWikiScript("CruisersWiki:Ol3-popup.js", this.initPopups.bind(this));
    };

    ol3Chartlet.prototype.initPopups = function () {
        var map = this.map;

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

        var layerFilter = function (layer) {
            return ! layer.get('noclickable');
        };
        
        var popTemplate = 
            '<div class="cw-popup-name"><a href="{href}">{name}</a></div>\n' +
            '<div class="cw-popup-category">{category}</div>\n' +
            '<div class="cw-popup-content">{content}</div>';

        // display popup on click
        map.on('click', function(evt) {
            var feature = map.forEachFeatureAtPixel(
                evt.pixel,
                function(feature) {
                  return feature;
                },
                null,
                layerFilter
                );
            if (feature && ! feature.get('noclickable')) {
                var data = { 
                    href: feature.get("link"),
                    name: feature.get("name"),
                    category: feature.get("category"),
                    content: feature.get("description"),
                };
                popup.show(evt.coordinate, format(popTemplate, data));
            } 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, layerFilter);
            map.getTarget().style.cursor = hit ? 'pointer' : '';
        });
    };

    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 = {
            icons: true,
            //recursive: 1,
            //childrenlocations: true,
            //captions: true,
        };

        var params = param_str.split('|');
        for (var i=0, li = params.length; i < li; i++) {
            var keyVal = params[i].split('=', 2);
            var key = $.trim(keyVal[0] || '').toLowerCase();
            var val = $.trim(keyVal[1] || '').toLowerCase();
            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;
            } else if (key == 'pagefeatures') {
                out.pageFeatures = !!val;
            } else if (key == 'captions') {
                out.captions = !!val;
            } else if (key == 'childrenlocations') {
                out.childrenlocations = true;
                out.recursive = 1;
            } else if (key == 'icons') {
                out.icons = !!val;
            }
        }
        return out;
    }

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

    function chartletStart(secondCall) {
        var $chartlets = $('.chartlet-test');
        if ($chartlets.length === 0) {
            return;
        }
        if (typeof ol === 'undefined') {
            if (!secondCall) { // try to load ol
                loadCss("http://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol.css");
                loadWikiCss('CruisersWiki:Ol3chartlet.css');
                // use debug version, to allow patch below
                loadScript(
                    "http://cdnjs.cloudflare.com/ajax/libs/ol3/3.19.1/ol-debug.js", 
                    function () {
                        chartletStart(true);
                    }
                );
            }
        } else {
            // try to recover from /extensions/TreeAndMenu/dtree.js overwriting Node
            if (Node.ELEMENT_NODE === undefined) {
                if (document.firstElementChild.__proto__.ELEMENT_NODE == 1) {
                    Node = document.firstElementChild.__proto__;
                } else {
                    Node.ELEMENT_NODE = 1
                }
                ol.xml.isNode = function(value) {
                    //   return value instanceof Node;
                    return typeof value.nodeName === "string";
                };
            }            

            $chartlets.each( function () {
                new ol3Chartlet(this);
            });
        }
    };
    
    addOnloadHook(chartletStart);

})();
//