Openseamap on Google Maps - adding marine profile layer as default

Question

Openseamap on Google Maps - adding marine profile layer as default

1.7k Views Asked by AudioBubble At 21 October 2024 at 21:01

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>

Original Q&A

There are 2 best solutions below

**vka** · Answer 1

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);

**Felipe Valdes** · Answer 2

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.

Openseamap on Google Maps - adding marine profile layer as default

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-MAPS

Related Questions in OPENSEAMAP

Trending Questions

Popular # Hahtags

Popular Questions