WIP Downloadlayer

src/javascripts/SETTINGS.js

@@ -3,9 +3,9 @@ import controlIds from './controls/ol3/controls'
 
 export const defaultViewPosition = {
   position: {
-    lon: 12.0561,
-    lat: 54.1910,
-    zoom: 14
+    lon: 0,
+    lat: 0,
+    zoom: 3
   }
 }
 

src/javascripts/config/layerlist.js

@@ -7,18 +7,7 @@ import _ from 'lodash'
 
 import Seamarks from './layers/seamarks'
 import OsmBase from './layers/openStreetMapBase'
-import BasemapVector from './layers/basemapVector'
-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'
 
 /**
 for the old (2013) layers format see:
@@ -55,90 +44,22 @@ export const availibleBaseLayers = [
     urlIndex2013: 1,
     urlIndex2016BaseLayer: 'A',
     visibleDefault: true
-  },
-  {
-    LayerConstructor: BasemapVector,
-    id: 'base_vector',
-    isBaseLayer: true,
-    urlIndex2016BaseLayer: 'B',
-    visibleDefault: false
-  },
-  {
-    LayerConstructor: BingBase,
-    id: 'base_bing',
-    isBaseLayer: true,
-    urlIndex2013: 12,
-    urlIndex2016BaseLayer: 'C',
-    visibleDefault: false
   }
 ]
 
 export const availibleOverlayLayers = [
   {
-    LayerConstructor: MarineProfile,
-    id: 'overlay_marineProfile',
-    urlIndex2016: 8,
-    urlIndex2013: 6,
-    visibleDefault: false
-  }, {
-    LayerConstructor: ElevationProfile,
-    id: 'overlay_elevationProfile',
-    urlIndex2016: 9,
-    urlIndex2013: 20,
-    visibleDefault: false
-  }, {
-    LayerConstructor: GridWgs,
-    id: 'overlay_grid_wgs',
-    urlIndex2016: 6,
-    urlIndex2013: 10,
-    visibleDefault: true
-  }, {
     LayerConstructor: Seamarks,
     id: 'overlay_osm_seamarks',
     urlIndex2016: 0,
     urlIndex2013: 3,
     visibleDefault: true
   }, {
-    LayerConstructor: SeamarksDebug,
-    id: 'overlay_osm_seamarks_debug',
-    urlIndex2016: 1,
-    visibleDefault: false
-  }, {
-    LayerConstructor: DeMvDepth,
-    id: 'overlay_demvdepth',
-    urlIndex2016: 2,
-    visibleDefault: false
-  }, {
-    LayerConstructor: ScubaDiving,
-    id: 'overlay_osm_scubadiving',
-    urlIndex2016: 3,
-    urlIndex2013: 4,
-    visibleDefault: false
-  },
-  {
-    LayerConstructor: Search,
-    id: 'overlay_search',
-    urlIndex2016: 4,
-    visibleDefault: true
-  },
-  {
-    LayerConstructor: Marinetraffic,
-    id: 'overlay_marinetraffic',
-    urlIndex2016: 5,
-    visibleDefault: false
-  },
-  {
     LayerConstructor: Download,
     id: 'overlay_download',
     urlIndex2013: 8,
     urlIndex2016: 7,
-    visibleDefault: false
-  },
-  {
-    LayerConstructor: DebugTiles,
-    id: 'overlay_debug',
-    urlIndex2016: 10,
-    visibleDefault: false
+    visibleDefault: true
   }
 ]
 

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))
+}

src/javascripts/controls/sidebar/store.js

@@ -36,7 +36,7 @@ export function setSidebarActiveTab (tabName) {
  */
 export const sidebarDefaultState = {
   isOpen: !isMobile(),
-  selectedTab: 'sidebar-settings'
+  selectedTab: 'sidebar-download'
 }
 
 export const sidebar = (state = sidebarDefaultState, action) => {

src/javascripts/features/tabs.js

@@ -5,8 +5,8 @@
 'use strict'
 import React from 'react'
 
-import LayerConfig from './layerConfig/featureLayerConfig'
-import MdLayers from 'react-icons/lib/md/layers'
+// import LayerConfig from './layerConfig/featureLayerConfig'
+// import MdLayers from 'react-icons/lib/md/layers'
 
 import FeatureDevelopment from './development/featureDevelopment'
 import FaInfoCircle from 'react-icons/lib/fa/info-circle'
@@ -31,17 +31,18 @@ export const messages = defineMessages({
   }
 })
 
-export const Tabs = [{
+export const Tabs = [/* {
   name: 'sidebar-settings',
   align: 'top',
   icon: <MdLayers />,
   content: <LayerConfig />
-}, {
-  name: 'sidebar-development',
-  align: 'bottom',
-  icon: <FaInfoCircle />,
-  content: <FeatureDevelopment />
-}]
+  }, */
+  {
+    name: 'sidebar-development',
+    align: 'bottom',
+    icon: <FaInfoCircle />,
+    content: <FeatureDevelopment />
+  }]
 
 export const TabSidebarDetails = {
   name: 'sidebar-details',

src/javascripts/store/urlHashHandling.js

@@ -167,6 +167,11 @@ export function getStateFromUrlHash (defaults) {
     layers = {
       layerVisible: decompressVisibleLayers(res.options.layers)
     }
+    layers.layerVisible = {
+      base_osm_default: true,
+      overlay_osm_seamarks: true,
+      overlay_download: true
+    }
   }
   let additions = {}
 
@@ -176,6 +181,8 @@ export function getStateFromUrlHash (defaults) {
     additions.locale = defaultLocale
   }
 
+  res.name = 'download'
+
   switch (res.name) {
     case 'search':
       additions.sidebar = sidebarDefaultState