Maritime data

Copy

var map;

function createMaritimLayer() {

var standardMaritim = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'https://dq40vu6xe6hbg.cloudfront.net/tiles.cmw?c-map_service=tile&c-map_layer=Vector&c-map_level={z}&c-map_idx={x}&c-map_idy={y}'
    })
  });

return standardMaritim;
}

function createExtraMaritimLayer() {

var extraMaritim = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'https://dq40vu6xe6hbg.cloudfront.net/tiles.cmw?c-map_service=tile&c-map_layer=VADs&c-map_level={z}&c-map_idx={x}&c-map_idy={y}'
    })
  });

return extraMaritim;
}

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

var layer = createMaritimLayer();
  var baseLayerStandardMaritim = new cercalia.BaseLayer({
    name: 'Standard maritim',
    label: 'Standard maritim',
    layer: layer,
    projectionCode: 'EPSG:3857',
    logo: '<a style="color:#000000;" href="http://lightmarine.c-map.com/es" target="_blank"><b>C-MAP</b></a>'
  });

map.addBaseLayer(baseLayerStandardMaritim);
  map.setBaseLayer(baseLayerStandardMaritim);

var layerExtra = createExtraMaritimLayer();
  var baseLayerExtraMaritim = new cercalia.BaseLayer({
    name: 'Extra maritim',
    label: 'Extra maritim',
    layer: layerExtra,
    projectionCode: 'EPSG:3857',
    logo: '<a style="color:#000000;" href="http://lightmarine.c-map.com/es" target="_blank"><b>C-MAP</b></a>'
  });

map.addBaseLayer(baseLayerExtraMaritim);
});

<!DOCTYPE html>
<html>
  <head>
    <title>Maritime data - C-MAP</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 standardMaritim = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'https://dq40vu6xe6hbg.cloudfront.net/tiles.cmw?c-map_service=tile&c-map_layer=Vector&c-map_level={z}&c-map_idx={x}&c-map_idy={y}'
          })
        });

        return standardMaritim;
      }

      function createExtraMaritimLayer() {

        var extraMaritim = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'https://dq40vu6xe6hbg.cloudfront.net/tiles.cmw?c-map_service=tile&c-map_layer=VADs&c-map_level={z}&c-map_idx={x}&c-map_idy={y}'
          })
        });

        return extraMaritim;
      }

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

        var layer = createMaritimLayer();
        var baseLayerStandardMaritim = new cercalia.BaseLayer({
          name: 'Standard maritim',
          label: 'Standard maritim',
          layer: layer,
          projectionCode: 'EPSG:3857',
          logo: '<a style="color:#000000;" href="http://lightmarine.c-map.com/es" target="_blank"><b>C-MAP</b></a>'
        });

        map.addBaseLayer(baseLayerStandardMaritim);
        map.setBaseLayer(baseLayerStandardMaritim);

        var layerExtra = createExtraMaritimLayer();
        var baseLayerExtraMaritim = new cercalia.BaseLayer({
          name: 'Extra maritim',
          label: 'Extra maritim',
          layer: layerExtra,
          projectionCode: 'EPSG:3857',
          logo: '<a style="color:#000000;" href="http://lightmarine.c-map.com/es" target="_blank"><b>C-MAP</b></a>'
        });

        map.addBaseLayer(baseLayerExtraMaritim);
      });
    </script>
  </body>
</html>