I am working on a web application of ASP.NET with the following API/tools Google Map, GeoServer, PostGreSQL(With POSTGIS). I have a requirement to display WMS layer of GeoServer on the google map V3.26.Data source of GeoServer is POSTGIS. I have inserted hundreds of MULTILINESTRING in PostGreSQL(With POSTGIS) using the below given scripts.
INSERT INTO public."LineData"("ID", "LineCoordinates") values('11195625',ST_GEOMFROMTEXT('MULTILINESTRING ((<Latitude Longitude>))',4326));
Then publish a layer in Geoserver that use the data from "LineData" table and keep Native SRC EPSG:4326. To display this layer on Google Map V3.26, I have used the below given code. The problem is that tiles are not rendering correctly. They are broken and shown at wrong places. Can anyone tell what wrong I am doing?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map with Geoserver WMS Overlay</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&language=en-US"></script>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
height: 100%;
}
</style>
</head>
<body onload="initialize()">
<h1>Google Map with Geoserver WMS and KML Overlay</h1>
<div id="map_canvas"></div>
</body>
</html>
<script type="text/javascript">
var TILE_SIZE = 256;
var wmsparams = [
"SERVICE=WMS",
"VERSION=1.1.1",
"REQUEST=GetMap",
"FORMAT=image/png",
"TRANSPARENT=TRUE",
"BGCOLOR=0xFFFFFF",
"SRS=EPSG:4326",
"WIDTH=256",
"HEIGHT=256"
];
</script>
<script type="text/javascript">
function initialize() {
// Create a MapOptions object with the required properties for base map
var mapOptions = {
zoom: 9,
center: new google.maps.LatLng(36.04450, -80.34747),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the base map
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//Define custom WMS layer for census output areas in WGS84
var censusLayer =
new google.maps.ImageMapType(
{
getTileUrl: function (coord, zoom) {
// Compose URL for overlay tile
var s = Math.pow(2, zoom);
var twidth = 256;
var theight = 256;
//latlng bounds of the 4 corners of the google tile
//Note the coord passed in represents the top left hand (NW) corner of the tile.
var gBl = map.getProjection().fromPointToLatLng(new google.maps.Point(coord.x * twidth / s, (coord.y + 1) * theight / s)); // bottom left / SW
var gTr = map.getProjection().fromPointToLatLng(new google.maps.Point((coord.x + 1) * twidth / s, coord.y * theight / s)); // top right / NE
// Bounding box coords for tile in WMS pre-1.3 format (x,y)
var bbox = parseFloat(gBl.lat()) + "," + parseFloat(gBl.lng()) + "," + parseFloat(gTr.lat()) + "," + parseFloat(gTr.lng());
//base WMS URL
var url = "http://localhost:8080/geoserver/TestWorkSpace/wms?";
url += "&service=WMS"; //WMS service
url += "&version=1.1.0"; //WMS version
url += "&request=GetMap"; //WMS operation
url += "&layers=TestLayer"; //WMS layers to draw
url += "&styles="; //use default style
url += "&format=image/png"; //image format
url += "&TRANSPARENT=TRUE"; //only draw areas where we have data
url += "&srs=EPSG:4326"; //projection WGS84
url += "&bbox=" + bbox; //set bounding box for tile
url += "&width=256"; //tile size used by google
url += "&height=256";
//url += "&tiled=true";
return url; //return WMS URL for the tile
},
tileSize: new google.maps.Size(256, 256),
opacity: 0.85,
isPng: true
});
// add WMS layer to map
map.overlayMapTypes.push(censusLayer);
}
</script>
Thanks
You are asking GeoServer to return you the tiles in epsg:4326 while your map is in epsg:3857, hence they look wrong.
So you need to change the line:
url += "&srs=EPSG:4326";
to
url += "&srs=EPSG:3875";
You also need to specify the bounding box in your map coordinates.