CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3noaa
Alex
Alex

Reputation: 142

Using NOAA charts with Google Maps

On this page http://tileservice.charts.noaa.gov/tileset.html#13003_1-gmaps-code it has some sample code to use. It uses this URL as a script source: maps.google.com/maps/api/js?client=gme-noaa&channel=NOS.OCS.MCD.ChartTileService

Google documentation for this on https://developers.google.com/maps/documentation/javascript/ says that you can use client ID which allows for the channel parameter. I don't have a client ID, I have an API key. Is there a way to obtain a client ID? Or is there a way to use my API key in conjunction with the NOAA tile service? If I use that URL as is, it tells me that my URL is not authorized to be used with that client ID.

Upvotes: 0

Views: 774

Answers (1)

geocodezip
geocodezip

Reputation: 161384

The tiles don't require the clientID, that is used to load the Google Maps Javascript API. If you have your own key, that should allow you to load the NOAA tiles via the Google Maps Javascript API v3.

proof of concept fiddle

code snippet:

function init() {

  // var metadata = read_metadata();
  var metadata = {
    "profile": "global-mercator",
    "attribution": "NOAA",
    "description": null,
    "format": "png",
    "basename": "13003_1",
    "minzoom": 3,
    "maxzoom": 10,
    "tilejson": "2.0.0",
    "name": "13003_1",
    "bounds": [-77.03047059346102,
      34.13783585089608, -64.93734162555232,
      45.79693682025801
    ],
    "version": "1",
    "scheme": "xyz",
    "type": "overlay"
  };
  var mapMinZoom = metadata.minzoom;
  var mapMaxZoom = metadata.maxzoom;

  // Compensate for dateline 
  if (metadata.bounds[0] > metadata.bounds[3]) {
    metadata.bounds[0] = metadata.bounds[0] - 360;
  }

  var mapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(metadata.bounds[1], metadata.bounds[0]), //south west
    new google.maps.LatLng(metadata.bounds[3], metadata.bounds[2])); //north east

  var opts = {
    streetViewControl: false,
    tilt: 0,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: mapBounds.getCenter(),
    zoom: 7
  }

  var map = new google.maps.Map(document.getElementById("map"), opts);

  // https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
  var imageMapType = new google.maps.ImageMapType({

    getTileUrl: function(coord, zoom) {

      var z2 = Math.pow(2, zoom);
      var size = 256 / z2;
      var x = coord.x;
      if (coord.x < 0) {
        x = coord.x + z2;
      }

      var proj = map.getProjection();
      var tileBounds = new google.maps.LatLngBounds(
        proj.fromPointToLatLng(new google.maps.Point(x * size, (coord.y + 1) * size)),
        proj.fromPointToLatLng(new google.maps.Point((x + 1) * size, coord.y * size))
      );

      if (!mapBounds.intersects(tileBounds) || zoom < mapMinZoom || zoom > mapMaxZoom) return null;

      var tiles = '//tileservice.charts.noaa.gov/tiles/13003_1/{z}/{x}/{y}.png';
      tiles = tiles.replace('{z}', zoom).replace('{x}', coord.x).replace('{y}', coord.y);

      console.log(tiles);

      return tiles;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    minZoom: mapMinZoom,
    maxZoom: mapMaxZoom,
    opacity: 1.0,
    name: 'Tiles'
  });

  map.overlayMapTypes.push(imageMapType);
}
google.maps.event.addDomListener(window, 'load', init);

function read_text(url, mime) {
  var request = new XMLHttpRequest();
  request.open('GET', url, false);
  if (request.overrideMimeType) {
    request.overrideMimeType(mime);
  }
  try {
    request.send();
    if (request.status != 0) {
      console.log('read_text', request.status, request.responseText);
    }
  } catch (e) {
    console.log('read_text', e.code);
  }
  return request.responseText;
}

function read_metadata() {
  var tilemap_txt = read_text("metadata.json", "application/json");
  if (tilemap_txt == null) {
    error('Cannot read tilemap.json');
    return null;
  }
  return JSON.parse(tilemap_txt);
}
html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Upvotes: 2

Related Questions