CruisersWiki:Ol3chartlet.js
From CruisersWiki
(Difference between revisions)
Line 214: | Line 214: | ||
// testLayer, | // testLayer, | ||
]; | ]; | ||
+ | |||
+ | var watercolor = new ol.layer.Tile({ | ||
+ | title: 'Water color', | ||
+ | source: new ol.source.Stamen({ | ||
+ | layer: 'watercolor' | ||
+ | }); | ||
+ | |||
+ | watercolor.on('tileloaderror', function (evnt) { | ||
+ | console.log(evnt); | ||
+ | }); | ||
var baseLayers = [ | var baseLayers = [ | ||
Line 235: | Line 245: | ||
source: esri.new_source('street') | source: esri.new_source('street') | ||
}), | }), | ||
- | + | watercolor, | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
//~ new ol.layer.Vector({ | //~ new ol.layer.Vector({ | ||
//~ title: 'None', | //~ title: 'None', |
Revision as of 08:35, 1 March 2016
/*
ol3Chartlet.js
Copyright (c) 2016 Vadim Shlyakhov Licensed MIT
- /
addOnloadHook(function() {
var $chartlets = $('.ol3-chartlet'); if ($chartlets.length === 0) { return; }
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.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>' }) ], }) };
function ol3Chartlet(chartlet_div) { console.log('ol3Chartlet');
var standalone_div = $('#ol3-chartlet-standalone')[0]; var standalone = !! standalone_div;
if (standalone && location.hash) { $('body').empty().append(standalone_div); $('body').addClass('cw-chartlet-extend'); }
this.params = parseParams(standalone && location.hash ? location.hash.slice(1) : $(chartlet_div).text());
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', source: nx.new_source({ transparency:true }) });
var overlaidLayers = [ openseamap, nx_layer_ovl, // testLayer, ];
var watercolor = new ol.layer.Tile({ title: 'Water color', source: new ol.source.Stamen({ layer: 'watercolor' });
watercolor.on('tileloaderror', function (evnt) { console.log(evnt); });
var baseLayers = [ new ol.layer.Tile({ title: 'OpenStreetMap', source: new ol.source.OSM() }), //~ new ol.layer.Tile({ //~ title: 'OSM no labels', //~ source: new ol.source.OSM({ //~ crossOrigin: null, //~ url: 'http://{a-c}.tiles.wmflabs.org/osm-no-labels/{z}/{x}/{y}.png' //~ }) //~ }), new ol.layer.Tile({ title: 'ESRI World Imagery', source: esri.new_source('satellite') }), new ol.layer.Tile({ title: 'ESRI World Street Map', source: esri.new_source('street') }), watercolor, //~ new ol.layer.Vector({ //~ title: 'None', //~ source: new ol.source.Vector({ //~ }) //~ }), ];
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 map = this.map = new ol.Map({ target: chartlet_div, layers: [ new ol.layer.Group({ 'title': 'Base', layers: baseLayers }), new ol.layer.Group({ title: 'Layers', layers: overlaidLayers }) ], view: new ol.View({ center: ol.proj.transform([this.params.lon, this.params.lat], 'EPSG:4326', 'EPSG:3857'), zoom: this.params.zoom }), 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) { this.initStandalone(); } };
// add layer to a layer group ol3Chartlet.prototype.addNonBaseLayer = function (new_layer) { this.map.getLayers().forEach( function(layer) { if (layer.get('title') === 'Layers') { layer.getLayers().push(new_layer); } } ); }
ol3Chartlet.prototype.initStandalone = function () {
this.trackHash() this.addCoordinateGrid();
var page = this.params.page; var _this = this;
if (page) { loadWikiScript('MediaWiki:GetKml.js', function () { getKml( { page: page, decorated: true }, _this.addPOIs.bind(_this) ); });
loadWikiCss('MediaWiki:Ol3-popup.css'); loadWikiScript("MediaWiki:Ol3-popup.js", _this.initPopups.bind(_this)); } };
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); } }); };
// add coordinate grid layer ol3Chartlet.prototype.addCoordinateGrid = function () { // after http://map.openseamap.org/javascript/grid_wgs.js var gridSteps = [ // in seconds //~ 3 / 3600, // 0.05' 6 / 3600, 12 / 3600, 30 / 3600, // 0.1' 0.2' 0.5' // in minutes 1 / 60, 2 / 60, 3 / 60, 5 / 60, 10 / 60, 20 / 60, 30 / 60, // in degrees 1, 2, 3, 4, 6, 10, 15, 30, 45];
var gridPixelStep = 100;
// Find matching grid step var getGridStep = function (distance) { for (var i=0; i<gridSteps.length; i++) { if (distance < gridSteps[i]) return gridSteps[i]; } return gridSteps[i-1]; };
// Format label var zeroPad = function (x, int_places, dec, zero_pad) { var pad = ' ' // spaces there var sign = var places = dec > 0 ? int_places+dec+1 : int_places if (zero_pad == null || zero_pad) { var pad = '00000000000000000000' if (x < 0) { x = Math.abs(x) places-- sign = '-' } } return sign + (pad + x.toFixed(dec)).slice(-places) };
var formatDegrees = function (deg, format, isLon) { var adeg = Math.abs(deg); return + zeroPad(Math.floor(adeg), isLon ? 3 : 2) + "°" + (format == 'd' ? : zeroPad((adeg * 60) % 60, 2, format == 'dm' ? 0 : 1) + "'") + (isLon ? (deg < 0 ? 'W' : 'E') : (deg < 0 ? 'S' : 'N')); };
var map = this.map; var view = this.map.getView();
// layer loader 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 view_proj = view.getProjection(); var geo_proj = 'EPSG:4326'; var map_size = map.getSize();
var lonlat_extent = ol.proj.transformExtent(extent, view_proj, geo_proj);
// clip extent to max values var x1 = Math.max (-180, lonlat_extent[0]); var x2 = Math.min ( 180, lonlat_extent[2]); var y1 = Math.max ( -85, lonlat_extent[1]); var y2 = Math.min ( 85, lonlat_extent[3]);
// grid step var step = getGridStep((lonlat_extent[3] - lonlat_extent[1]) / map_size[1] * gridPixelStep);
var labelFormat = step % 1 ? ((step * 60)% 1 ? 'dm.m' : 'dm') : 'd'; // round degrees number
var features = [];
// line style var strokeStyle = new ol.style.Stroke({ color: [102, 102, 102, 255 * 0.8], // "#666666", width: 1, //~ strokeOpacity: 0.8 });
// Vertical lines for (var x = Math.ceil(x1 / step) * step + (x1 == -180 ? step : 0); x <= x2; x += step) { var l = new ol.geom.LineString([ ol.proj.transform([x, y1], geo_proj, view_proj), ol.proj.transform([x, y2], geo_proj, view_proj) ]); var f = new ol.Feature(l); f.setStyle(new ol.style.Style({ stroke: strokeStyle, text: new ol.style.Text({ text: formatDegrees (x, labelFormat, true), textAlign: 'end', textBaseline: 'top', offsetX: 0, offsetY: - map_size[1] / 2, rotation: - Math.PI / 2, scale: 1.5, // labelAlign: "lt", }), })); features.push (f); }
// Horizontal lines for (var y = Math.ceil(y1 / step) * step; y <= y2; y += step) { var l = new ol.geom.LineString([ ol.proj.transform([x1, y], geo_proj, view_proj), ol.proj.transform([x2, y], geo_proj, view_proj) ]); var f = new ol.Feature(l); f.setStyle(new ol.style.Style({ stroke: strokeStyle, text: new ol.style.Text({ text: formatDegrees (y, labelFormat, false), textAlign: 'end', textBaseline: 'top', offsetX: map_size[0] / 2, offsetY: 0, rotation: 0, scale: 1.5, //~ labelAlign: "lt", }), })); features.push (f); }
this.addFeatures(features); };
var coord_grid = new ol.layer.Vector({ title: 'Coordinate grid', visible: false, source: new ol.source.Vector({ loader: loader, strategy: ol.loadingstrategy.bbox }) }); coord_grid.set('noclickable', true);
// add to the proper layer group this.addNonBaseLayer(coord_grid);
var onChangeCenterZoom = function () { coord_grid.getSource().clear(); } view.on('change:center', onChangeCenterZoom); view.on('change:resolution', onChangeCenterZoom); };
// load kml ol3Chartlet.prototype.addPOIs = function(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 this.addNonBaseLayer(kml_layer); };
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'); };
// 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')) { 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, 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 = {}; 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; }
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( function () { new ol3Chartlet(this); }); });});