ALA WMS with Google Maps API 2018
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <style type="text/css"> | |
| html { height: 100% } | |
| body { height: 100%; margin: 0px; padding: 0px } | |
| #map_canvas { height: 100% } | |
| </style> | |
| <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script> | |
| <script type="text/javascript"> | |
| var map; | |
| var locationCentre = new google.maps.LatLng(-25.0, 135.0); | |
| // Define MWS baselayer | |
| var wmsMapType = new google.maps.ImageMapType({ | |
| getTileUrl: function (coord, zoom) { | |
| return "https://tile.openstreetmap.org/" + | |
| zoom + "/" + coord.x + "/" + coord.y + ".png"; | |
| }, | |
| tileSize: new google.maps.Size(256, 256), | |
| isPng: true, | |
| alt: "ALA species layer", | |
| name: "ALA", | |
| maxZoom: 19 | |
| }); | |
| //Define custom WMS tiled layer | |
| var SLPLayer = new google.maps.ImageMapType({ | |
| getTileUrl: function (coord, zoom) { | |
| var proj = map.getProjection(); | |
| var zfactor = Math.pow(2, zoom); | |
| // get Long Lat coordinates | |
| var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor)); | |
| var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor)); | |
| //corrections for the slight shift of the SLP (mapserver) | |
| var deltaX = 0.0013; | |
| var deltaY = 0.00058; | |
| //create the Bounding box string | |
| var bbox = (top.lng() + deltaX) + "," + | |
| (bot.lat() + deltaY) + "," + | |
| (bot.lng() + deltaX) + "," + | |
| (top.lat() + deltaY); | |
| //base WMS URL | |
| var url = "https://biocache.ala.org.au/ws/ogc/wms/reflect?q=taxon_name:Acacia+dealbata"; | |
| url += "&REQUEST=GetMap"; //WMS operation | |
| url += "&SERVICE=WMS"; //WMS service | |
| url += "&VERSION=1.1.1"; //WMS version | |
| url += "&LAYERS=" + "ALA:occurrences"; //WMS layers | |
| url += "&FORMAT=image/png" ; //WMS format | |
| url += "&BGCOLOR=0xFFFFFF"; | |
| url += "&TRANSPARENT=TRUE"; | |
| url += "&ENV=color:e6704c;name:circle;size:4;opacity:0.8"; | |
| url += "&OUTLINE=false"; | |
| url += "&SRS=EPSG:4326"; //set WGS84 | |
| url += "&BBOX=" + bbox; // set bounding box | |
| url += "&WIDTH=256"; //tile size in google | |
| url += "&HEIGHT=256"; | |
| return url; // return URL for the tile | |
| }, | |
| tileSize: new google.maps.Size(256, 256), | |
| isPng: true | |
| }); | |
| function initialize() { | |
| var mapOptions = { | |
| zoom: 4, | |
| center: locationCentre, | |
| mapTypeId: 'ALA', | |
| mapTypeControlOptions: { | |
| mapTypeIds: ['ALA', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN], | |
| style: google.maps.MapTypeControlStyle.DROPDOWN_MENU | |
| } | |
| }; | |
| map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); | |
| map.mapTypes.set('ALA', wmsMapType); | |
| map.setMapTypeId(google.maps.MapTypeId.ROADMAP); | |
| //add WMS layer | |
| map.overlayMapTypes.push(SLPLayer); | |
| } | |
| </script> | |
| </head> | |
| <body onload="initialize()"> | |
| <div id="map_canvas" style="width:100%; height:100%"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
rawgit version https://rawgit.com/nickdos/b11036c458674f551b42aa99639beb65/raw/f4bdd5f23f279d48fbb39e14ee96c41888070447/index.html