switch marinetraffic to image tiles

src/javascripts/config/layerlist.js

@@ -12,13 +12,13 @@ import DeMvDepth from './layers/germany_mv_depth'
 import ScubaDiving from './layers/scubaDiving'
 import SeamarksDebug from './layers/seamarkDebug'
 import Search from './layers/search'
-import Marinetraffic from './layers/marinetraffic'
 import GridWgs from './layers/grid_wgs'
 import Download from './layers/downloadBundles'
 import MarineProfile from './layers/marineProfile'
 import ElevationProfile from './layers/elevationProfile'
 import BingBase from './layers/bingBase'
 import DebugTiles from './layers/tilesDebug'
+import MarinetrafficImages from './layers/marinetraffic-imageLayer'
 
 /**
 for the old (2013) layers format see:
@@ -121,12 +121,6 @@ export const availibleOverlayLayers = [
     urlIndex2016: 4,
     visibleDefault: true
   },
-  {
-    LayerConstructor: Marinetraffic,
-    id: 'overlay_marinetraffic',
-    urlIndex2016: 5,
-    visibleDefault: false
-  },
   {
     LayerConstructor: Download,
     id: 'overlay_download',
@@ -139,6 +133,12 @@ export const availibleOverlayLayers = [
     id: 'overlay_debug',
     urlIndex2016: 10,
     visibleDefault: false
+  },
+  {
+    LayerConstructor: MarinetrafficImages,
+    id: 'overlay_marinetraffic-imageLayer',
+    urlIndex2016: 11,
+    visibleDefault: false
   }
 ]
 

src/javascripts/config/layers/marinetraffic-imageLayer.js

@@ -0,0 +1,43 @@
+/**
+* @license AGPL-3.0
+* @author aAXEe (https://github.com/aAXEe)
+*/
+'use strict'
+
+import ol from 'openlayers'
+import ChartLayer from '../chartlayer'
+import { layerTileLoadStateChange } from '../../store/actions'
+import controlIds from '../../controls/ol3/controls'
+import orderIds from '../layerOrderNumbers'
+
+module.exports = function (context, options) {
+  // return the url to get the tile at [z, x, -y]
+  function tileUrlFunction (tileCoord) {
+    return ('https://tiles.marinetraffic.com/ais_helpers/shiptilesingle.aspx?output=png&sat=1&grouping=shiptype&tile_size=512&legends=1&zoom={z}&X={x}&Y={y}')
+              .replace('{z}', String(tileCoord[0] + 1))
+              .replace('{x}', String(tileCoord[1]))
+              .replace('{y}', String(-tileCoord[2] - 1))
+  }
+  var ATTRIBUTION = 'Ship data by <a href="https://marinetraffic.com/">MarineTraffic</a>'
+  let source = new ol.source.XYZ({
+    attributions: [new ol.Attribution({html: ATTRIBUTION})],
+    tileUrlFunction: tileUrlFunction,
+    crossOrigin: 'Anonymous',
+    tileSize: [512, 512]
+  })
+
+  source.on(['tileloadstart', 'tileloadend', 'tileloaderror'], function (ev) {
+    context.dispatch(layerTileLoadStateChange(options.id, ev))
+  })
+
+  var defaults = {
+    nameKey: 'layer-name-marinetraffic',
+    layer: new ol.layer.Tile({
+      source: source,
+      opacity: 0.7,
+      zIndex: orderIds.user_overlay
+    }),
+    additionalControls: [controlIds.scaleline_nautical, controlIds.attribution]
+  }
+  return new ChartLayer(context, Object.assign(defaults, options))
+}