Skip to content

Instantly share code, notes, and snippets.

View jpoehnelt's full-sized avatar
🏠
Working from home

Justin Poehnelt jpoehnelt

🏠
Working from home
View GitHub Profile
git config filter.lfs.process = "git-lfs filter-process --skip"
git config filter.lfs.smudge = "git-lfs clean --skip %f"
git config filter.lfs.clean = "git-lfs clean -- %f"
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<Layer queryable="1" opaque="0">
<Name>mrlc_display:NLCD_2016_Land_Cover_L48</Name>
<Title>NLCD_2016_Land_Cover_L48</Title>
<CRS>EPSG:3857</CRS>
<CRS>CRS:84</CRS>
<BoundingBox CRS="CRS:84" minx="-180.00000000000003" miny="-85.06" maxx="180.00000000000003" maxy="85.06"/>
<BoundingBox CRS="EPSG:3857" minx="-2.0037508342789244E7" miny="-2.00489661040146E7" maxx="2.0037508342789244E7" maxy="2.0048966104014594E7"/>
</Layer>
const NLCD_LAYER = 'mrlc_display:NLCD_2016_Land_Cover_L48';
var EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];
function xyzToBounds(x, y, z) {
var tileSize = EXTENT[1] * 2 / Math.pow(2, z);
var minx = EXTENT[0] + x * tileSize;
var maxx = EXTENT[0] + (x + 1) * tileSize;
// remember y origin starts at top
var miny = EXTENT[1] - (y + 1) * tileSize;
var maxy = EXTENT[1] - y * tileSize;
return [minx, miny, maxx, maxy];
var getTileUrl = function(coordinates, zoom) {
return (
"https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?" +
"&REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1" +
"&LAYERS=mrlc_display%3ANLCD_2016_Land_Cover_L48" +
"&FORMAT=image%2Fpng" +
"&SRS=EPSG:3857&WIDTH=256&HEIGHT=256" +
"&BBOX=" +
xyzToBounds(coordinates.x, coordinates.y, zoom).join(",")
);
var landcover = new google.maps.ImageMapType({
getTileUrl: getTileUrl,
name: "Landcover",
alt: "National Land Cover Database 2016",
minZoom: 0,
maxZoom: 19,
opacity: 1.0
});
<!DOCTYPE html>
<html>
<head>
<title>WMS and Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
babel(
name = "transpiled",
args = ["$(location :app)", "--out-file", "$@/transpiled.js"],
data = [":app", "@npm//@babel/preset-env", "//:babel.config.json"],
outs = ["transpiled.js"],
)