mirror of
https://github.com/google/earthengine-api.git
synced 2025-12-08 19:26:12 +00:00
64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
An example web page that creates and displays a custom Google Maps API Map Type
|
|
for Earth Engine map tiles. See Google Maps documentation on Custom Map Types
|
|
for details.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>SRTM</title>
|
|
<script type="text/javascript"
|
|
src="https://maps.google.com/maps/api/js?sensor=false"></script>
|
|
<script type="text/javascript">
|
|
/**
|
|
* This page will be called from a Python script in App Engine that uses
|
|
* Jinja templates to pass information from the script to the web page.
|
|
* Here we get the mapid and token for the map tiles that were generated
|
|
* by Earth Engine using the Python script ee_appengine.py.
|
|
*/
|
|
|
|
var MAPID = "{{ mapid }}";
|
|
var TOKEN = "{{ token }}";
|
|
|
|
/**
|
|
* The Google Maps API calls getTileUrl when it tries to display a maps
|
|
* tile. This is a good place to swap in the mapid and token we got from
|
|
* the Python script. The other values describe other properties of the
|
|
* custom map type.
|
|
*/
|
|
var eeMapOptions = {
|
|
getTileUrl: function(tile, zoom) {
|
|
var url = ['https://earthengine.googleapis.com/map',
|
|
MAPID, zoom, tile.x, tile.y].join("/");
|
|
url += '?token=' + TOKEN
|
|
return url;
|
|
},
|
|
tileSize: new google.maps.Size(256, 256)
|
|
};
|
|
|
|
// Create the map type.
|
|
var mapType = new google.maps.ImageMapType(eeMapOptions);
|
|
|
|
// Initialize the Google Map and add our custom layer overlay.
|
|
function initialize() {
|
|
var myLatLng = new google.maps.LatLng(-34.397, 150.644);
|
|
var mapOptions = {
|
|
center: myLatLng,
|
|
zoom: 8,
|
|
maxZoom: 10,
|
|
streetViewControl: false
|
|
};
|
|
|
|
var map = new google.maps.Map(document.getElementById("map"),
|
|
mapOptions);
|
|
map.overlayMapTypes.push(mapType);
|
|
}
|
|
|
|
window.onload = initialize;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="map" style="width: 640px; height: 480px;"></div>
|
|
</body>
|
|
</html>
|