Openseamap on Google Maps - adding marine profile layer as default

Question

I am trying to do some personal project which I am trying to add marine layer on google maps. So decided to go with free osm option.

I want to add marine profile and ais layers as default layer on seamark. So far semarks layer osm on google maps is ok.

How can I add other layers as default layer with seamark layer. I couldn't figure out how to add additional layers as default on map.

Thanks in advance!

My fiddle

and Snippet:

var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: {
      lat: 44.5,
      lng: 13.1
    },
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap']
    }
  });


  var osmMapTypeOptions = {
    getTileUrl: function(coord, zoom) {
      console.log("getTileUrl("+coord.x+","+coord.y+","+zoom+")");
      var z = zoom;
      var limit = Math.pow(2, z);
      if (coord.y < 0 || coord.y >= limit) {
        return null;
      } else {
        coord.x = ((coord.x % limit) + limit) % limit;
        url = "http://t1.openseamap.org/seamark/";
        path = zoom + "/" + coord.x + "/" + coord.y + "." + "png";
        console.log("getTileUrl:" + url + path);
        return url + path;
      
      }
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    maxZoom: 19,
    minZoom: 0,
    name: "OSM"
  };

  function getTileURL(bounds) {
    var res = this.map.getResolution();
    var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
    var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
    var z = this.map.getZoom();
    var limit = Math.pow(2, z);
    if (y < 0 || y >= limit) {
      return null;
    } else {
      x = ((x % limit) + limit) % limit;
      url = this.url;
      path = z + "/" + x + "/" + y + "." + this.type;
      if (url instanceof Array) {
        url = this.selectUrl(path, url);
      }
      return url + path;
    }
  }

  var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);

  map.overlayMapTypes.insertAt(0,osmMapType);
  map.overlayMapTypes.insertAt(1,osmMapType);

}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?language=en&libraries=drawing,geometry"></script>
<div id="map"></div>

score 4 · Answer 1 · edited Oct 20 '17 at 15:27

I've found an example of using several layers on a map:

https://developers.google.com/fusiontables/docs/samples/multiple_layers_per_map

<!DOCTYPE html>
<!--
  Copyright 2011 Google Inc. All Rights Reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Fusion Tables Layer Example: Multiple Layers per Map</title>

    <link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(37.4, -122.1),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infoWindow = new google.maps.InfoWindow();

        // Initialize the first layer
        var firstLayer = new google.maps.FusionTablesLayer({
          query: {
            select: 'geometry',
            from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA'
          },
          map: map,
          suppressInfoWindows: true
        });
        google.maps.event.addListener(firstLayer, 'click', function(e) {
          windowControl(e, infoWindow, map);
        });

        // Initialize the second layer
        var secondLayer = new google.maps.FusionTablesLayer({
          query: {
            select: "'Full Address'",
            from: '1tL67aacGcCyMfAg9PUo_-gp4qm74GDtFiCMtFg'
          },
          map: map,
          suppressInfoWindows: true
        });
        google.maps.event.addListener(secondLayer, 'click', function(e) {
          windowControl(e, infoWindow, map);
        });
      }

      // Open the info window at the clicked location
      function windowControl(e, infoWindow, map) {
        infoWindow.setOptions({
          content: e.infoWindowHtml,
          position: e.latLng,
          pixelOffset: e.pixelOffset
        });
        infoWindow.open(map);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Hope that helps.

Thank you for the answer, but it is really not specifically what I was looking for. I need openseamap marine profile layer. — , Oct 03 '17 at 19:06

score 0 · Answer 2 · answered Nov 20 '18 at 21:57

try creating:

var osmMapTypeOptions2 = {...}
...
var osmMapType2 = new google.maps.ImageMapType(osmMapTypeOptions2);
...

and then:

 map.overlayMapTypes.insertAt(0,osmMapType);
 map.overlayMapTypes.insertAt(1,osmMapType);
 map.overlayMapTypes.insertAt(2,osmMapType2);
 map.overlayMapTypes.insertAt(3,osmMapType2);

Openseamap on Google Maps - adding marine profile layer as default

2 Answers2