Cercalia add a new base layer maritim traffic

Copy

var map;

function createMaritimLayer() {

var cercaliaLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      urls: cercalia.servers.backgroundXYZ,
      crossOrigin: 'anonymous'
    })
  });

var openSeaLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://t1.openseamap.org/seamark/{z}/{x}/{y}.png'
    })
  });

var maritimTrafficLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'https://tiles.marinetraffic.com/ais_helpers/shiptilesingle.aspx?output=png&sat=1&grouping=shiptype&tile_size=256&legends=1&zoom={z}&X={x}&Y={y}'
    })
  });

return new ol.layer.Group({
    layers: [cercaliaLayer, openSeaLayer, maritimTrafficLayer]
  });
}

document.addEventListener('cercalia-ready', function() {
  map = new cercalia.Map({
    target: 'map'
  });

var layerGroup = createMaritimLayer();
  var baseLayer = new cercalia.BaseLayer({
    name: 'Maritim traffic',
    label: 'Maritim traffic',
    layer: layerGroup,
    projectionCode: 'EPSG:3857'
  });

map.addBaseLayer(baseLayer);

});

<!DOCTYPE html>
<html>
  <head>
    <title>Cercalia add a new base layer maritim traffic</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var map;

      function createMaritimLayer() {

        var cercaliaLayer = new ol.layer.Tile({
          source: new ol.source.XYZ({
            urls: cercalia.servers.backgroundXYZ,
            crossOrigin: 'anonymous'
          })
        });

        var openSeaLayer = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'http://t1.openseamap.org/seamark/{z}/{x}/{y}.png'
          })
        });

        var maritimTrafficLayer = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'https://tiles.marinetraffic.com/ais_helpers/shiptilesingle.aspx?output=png&sat=1&grouping=shiptype&tile_size=256&legends=1&zoom={z}&X={x}&Y={y}'
          })
        });

        return new ol.layer.Group({
          layers: [cercaliaLayer, openSeaLayer, maritimTrafficLayer]
        });
      }


      document.addEventListener('cercalia-ready', function() {
        map = new cercalia.Map({
          target: 'map'
        });

        var layerGroup = createMaritimLayer();
        var baseLayer = new cercalia.BaseLayer({
          name: 'Maritim traffic',
          label: 'Maritim traffic',
          layer: layerGroup,
          projectionCode: 'EPSG:3857'
        });

        map.addBaseLayer(baseLayer);

      });
    </script>
  </body>
</html>