CruisersWiki:Ol3chartlet.js
From CruisersWiki
(Difference between revisions)
Line 459: | Line 459: | ||
}), | }), | ||
})); | })); | ||
+ | f.set('auxiliary', true); | ||
features.push (f); | features.push (f); | ||
} | } | ||
Line 485: | Line 486: | ||
}), | }), | ||
})); | })); | ||
+ | f.set('auxiliary', true); | ||
features.push (f); | features.push (f); | ||
} | } | ||
Line 518: | Line 520: | ||
return feature; | return feature; | ||
}); | }); | ||
- | if (feature) { | + | if (feature && ! feature.get('auxiliary')) { |
popup.show(evt.coordinate, | popup.show(evt.coordinate, | ||
'<div class="cw-popup-name">' + feature.get("name") + '</div>' + | '<div class="cw-popup-name">' + feature.get("name") + '</div>' + |
Revision as of 16:30, 25 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');
if ( nx.navToken ) { callback(); } else { // 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.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", '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() }), esri_layer, new ol.layer.Tile({ title: 'Water color', type: 'base', source: new ol.source.Stamen({ layer: 'watercolor' }) }), //~ new ol.layer.Vector({ //~ title: 'Plain background', //~ type: 'base', //~ source: new ol.source.Vector({ //~ }) //~ }), ] }), 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');
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);
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;
function add_to_layers (new_layer) { // add to the proper layer group map.getLayers().forEach( function(layer) { if (layer.get('title') === 'Layers') { layer.getLayers().push(new_layer); } } ); }
// 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 xml_tree = ol.xml.parse(kml);
var features = format.readFeatures( xml_tree, {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 add_to_layers(kml_layer); }
// load coord grid function add_coord_grid () { // after http://map.openseamap.org/javascript/grid_wgs.js
var zoomUnits = null;
// in Winkelsekunden var gridUnits = [ 3, // 0.05' 6, 12, 30, // 0.1' 0.2' 0.5' 1*60, 2*60, 3*60, 5*60, 10*60, 20*60, 30*60, 1*3600, 2*3600, 3*3600, 4*3600, 6*3600, 10*3600, 15*3600, 30*3600, 45*3600];
var gridPixelDistance = 100;
//--------------------------------------------------------- // Find matching grid unit (minutes) or return null //---------------------------------------------------------
var getGridUnit = function (distance) {
if (zoomUnits) return zoomUnits[map.getView().getZoom()];
for (var i=0; i<gridUnits.length; i++) { if (distance < gridUnits[i]) return gridUnits[i]; } return null; };
//--------------------------------------------------------- // Format gridsize //---------------------------------------------------------
var dd = function (n) { return parseInt(n) >= 10 ? n : '0'+n; };
var formatGridSize = function (s) { var h = Math.floor(s / 3600); var m = s % 3600 / 60; return (h ? h + "°" : "") + (m ? m + "'" : ""); };
var formatDegrees = function (s, unit) { return Math.floor(s / 3600) + "°" + (unit % 3600 ? dd(s % 3600 / 60) + "'" : "") };
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 lonlat_extent = ol.proj.transformExtent(extent, view.getProjection(), 'EPSG:4326');
//--------------------------------------------------------- // Grid unit //---------------------------------------------------------
var seconds = 3600 * (lonlat_extent[3] - lonlat_extent[1]);
var unit = getGridUnit (seconds / map.getSize()[1] * gridPixelDistance);
//--------------------------------------------------------- // Compute grid //---------------------------------------------------------
var x1 = Math.max (-180.0*3600, Math.ceil (3600 * lonlat_extent[0] / unit) * unit); var x2 = Math.min (+180.0*3600, Math.floor (3600 * lonlat_extent[2] / unit) * unit); var y1 = Math.max ( -90.0*3600, Math.ceil (3600 * lonlat_extent[1] / unit) * unit); var y2 = Math.min ( +90.0*3600, Math.floor (3600 * lonlat_extent[3] / unit) * unit);
var features = [];
//--------------------------------------------------------- // Vertical lines //---------------------------------------------------------
var lineStyle = new ol.style.Stroke({ color: [102, 102, 102, 255 * 0.8], // "#666666", width: 1, //~ strokeOpacity: 0.8 });
for (var x=x1; x<=x2; x+= unit) { var l = new ol.geom.LineString([ ol.proj.transform([x/3600, Math.min(+85, lonlat_extent[3])], 'EPSG:4326', view.getProjection()), ol.proj.transform([x/3600, Math.min(-85, lonlat_extent[1])], 'EPSG:4326', view.getProjection()) ]); var f = new ol.Feature(l); f.setStyle(vStyle = new ol.style.Style({ stroke: lineStyle, text: new ol.style.Text({ text: formatDegrees (Math.abs(x), unit), textAlign: 'end', textBaseline: 'top', offsetX: 0, offsetY: - map.getSize()[1] / 2, rotation: - Math.PI / 2, scale: 1.5, //~ labelAlign: "lt", }), })); f.set('auxiliary', true); features.push (f); }
//--------------------------------------------------------- // Horizontal lines //---------------------------------------------------------
for (var y=y1; y<=y2; y+=unit) { var l = new ol.geom.LineString([ ol.proj.transform([Math.max(-180, lonlat_extent[0]), y/3600], 'EPSG:4326', view.getProjection()), ol.proj.transform([Math.min(+180, lonlat_extent[2]), y/3600], 'EPSG:4326', view.getProjection()) ]); var f = new ol.Feature(l); f.setStyle(new ol.style.Style({ stroke: lineStyle, text: new ol.style.Text({ text: formatDegrees (Math.abs(y), unit), textAlign: 'start', textBaseline: 'top', offsetX: - map.getSize()[0] / 2, offsetY: 0, rotation: 0, scale: 1.5, //~ labelAlign: "lt", }), })); f.set('auxiliary', true); features.push (f); }
this.clear();
this.addFeatures(features); };
var coord_grid = new ol.layer.Vector({ title: 'Coordinate grid', visible:true, source: new ol.source.Vector({ loader: loader, strategy: ol.loadingstrategy.bbox }) });
// add to the proper layer group add_to_layers (coord_grid); }
add_coord_grid ();
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 && ! feature.get('auxiliary')) { popup.show(evt.coordinate,'
' + feature.get("name") + '
' +
'' + feature.get("styleUrl").split('#')[1] + '
' +
'' + feature.get("description") + '
'
); } 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://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol.css"); // use debug version, to allow patch below 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"; };
$chartlets.each(ol3Chartlet); });});