How to export Tiff images from Google Earth Engine - google-earth-engine

I am working on the Surface water data in google earth engine.
I want to export the tiff files from here and use them in Mapbox.
I am trying to export tiff images from google earth engine but My images are coming out to be geometrically wrong.
I tried everything I knew but I don't know where I am doing wrong.
// Asset List
var gsw = ee.Image('JRC/GSW1_0/GlobalSurfaceWater');
var occurrence = gsw.select('occurrence');
var change = gsw.select("change_abs");
var roi = /* color: 0B4A8B */ee.Geometry.Polygon(
[[[-74.17213, -8.65569],
[-74.17419, -8.39222],
[-74.38362, -8.36980],
[-74.43031, -8.61293]]]);
// Constants
var VIS_OCCURRENCE = {
min:0,
max:100,
palette: ['red', 'blue']
};
var VIS_CHANGE = {
min:-50,
max:50,
palette: ['red', 'grey', 'limegreen']
};
var VIS_WATER_MASK = {
palette: ['white', 'black']
};
//////////////////////////////////////////////////////////////
// Calculations
//////////////////////////////////////////////////////////////
// Create a water mask layer, and set the image mask so that non-water areas are transparent.
var water_mask = occurrence.gt(90).mask(1);
// Generate a histogram object and print it to the console tab.
var histogram = ui.Chart.image.histogram({
image: change,
region: roi,
scale: 30,
minBucketWidth: 10
});
histogram.setOptions({
title: 'Histogram of surface water change intensity.'
});
print(histogram);
//////////////////////////////////////////////////////////////
// Initialize Map Location
//////////////////////////////////////////////////////////////
// Uncomment one of the following statements to center the map on
// a particular location.
// Map.setCenter(-90.162, 29.8597, 10); // New Orleans, USA
// Map.setCenter(-114.9774, 31.9254, 10); // Mouth of the Colorado River, Mexico
// Map.setCenter(-111.1871, 37.0963, 11); // Lake Powell, USA
// Map.setCenter(149.412, -35.0789, 11); // Lake George, Australia
// Map.setCenter(105.26, 11.2134, 9); // Mekong River Basin, SouthEast Asia
// Map.setCenter(90.6743, 22.7382, 10); // Meghna River, Bangladesh
// Map.setCenter(81.2714, 16.5079, 11); // Godavari River Basin Irrigation Project, India
// Map.setCenter(14.7035, 52.0985, 12); // River Oder, Germany & Poland
// Map.setCenter(-59.1696, -33.8111, 9); // Buenos Aires, Argentina\
Map.setCenter(77.1025, 28.7041, 5); // India
//////////////////////////////////////////////////////////////
// Map Layers
//////////////////////////////////////////////////////////////
Map.addLayer({
eeObject: water_mask,
visParams: VIS_WATER_MASK,
name: '90% occurrence water mask',
shown: false
});
Map.addLayer({
eeObject: occurrence.updateMask(occurrence.divide(100)),
name: "Water Occurrence (1984-2015)",
visParams: VIS_OCCURRENCE,
shown: false
});
Map.addLayer({
eeObject: change,
visParams: VIS_CHANGE,
name: 'occurrence change intensity'
});
Export.image.toDrive({
image: gsw.toInt32(),
description: 'gsw',
region: gsw,
scale:250
});
The expected output is multiple Tiff files that show complete data.

Maybe you forgot to add type of the image that you want to export
//Export
Export.image.toDrive({
image: image that you wanna export,
description: 'file name',
scale: 250,
folder: 'your folder name',
region: you region,
fileFormat: 'GeoTIFF'
})

Related

Update a Mapbox layer by zoom level when loading geojson

Very similar to this tutorial, I would like to create a MapBox map that at a zoomed out level shows regions (labelled Pcode in my data), but once zoomed it switched to a district level (labelled Name). Ideally both these layers would be part of a single geojson shapefile though that can be loaded from an external source (https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/Districts_261_simplified.json). my questions are
how can I format the geojson in such a way that is possible (in R)? (Maybe it is necessary to combine the district polygons into new region polygons and save a seperate geojson file with these regions that gets loaded at another zoom level?)
how do I load the data into Mapbox to make it switch at a certain zoom level?
I am using this example on how to load the code
mapboxgl.accessToken = 'MY TOKEN';
// Create a new map.
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12',
center: [-100.04, 38.907],
zoom: 3
});
map.on('load', () => {
// Add a source for the state polygons.
map.addSource('states', {
'type': 'geojson',
'data': 'https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/Districts_261_simplified.json'
});
// Add a layer showing the state polygons.
map.addLayer({
'id': 'states-layer',
'type': 'fill',
'source': 'states',
'paint': {
'fill-color': 'rgba(200, 100, 240, 0.4)',
'fill-outline-color': 'rgba(200, 100, 240, 1)'
}
});
// When a click event occurs on a feature in the states layer,
// open a popup at the location of the click, with description
// HTML from the click event's properties.
map.on('click', 'states-layer', (e) => {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.Name)
.addTo(map);
});
// Change the cursor to a pointer when
// the mouse is over the states layer.
map.on('mouseenter', 'states-layer', () => {
map.getCanvas().style.cursor = 'pointer';
});
// Change the cursor back to a pointer
// when it leaves the states layer.
map.on('mouseleave', 'states-layer', () => {
map.getCanvas().style.cursor = '';
});
});
You can combine both sets of features into one GeoJSON FeatureCollection, just be sure to add some property that you can filter on, like:
...
{
type: 'Feature',
geometry: {...},
properties: {
type: 'district'
}
}
...
When you load the data, add one source, and two layers. Each layer should have a filter attribute so that only the features of a certain type show in that layer. Make sure one has its visibility set to none when the map first loads.
map.addLayer({
...,
layout: {
visibility: 'none'
},
filter: ['==', 'type', 'district']
});
map.addLayer({
...,
filter: ['==', 'type', 'pcode']
});
Then you can follow the same example you posted, and toggle the visibility on zoom.

Google Map API Direction Triangle Icon Ambiguous

I am using Google Map API V3 to show the vehicle traveled path and its route directions. But by google direction icon, its very hard to find the directions. The image below explain more
and I saw the each icon, it is
source
I found the image path, it is
http://www.google.com/intl/en_ALL/mapfiles/dir_0.png for
How to make a good directions icons ?
There are some predefined symbols (e.g. arrows) available in V3 that may be used for an IconSequence.
See http://jsfiddle.net/doktormolle/V3gMT/ for a demo.
P1 AND P2 ARE POINTS.
A point is this:
({ lat:Latitud, lng: Longitud }
Latitud and Longitud are values with coordinates.
function MapsP2P(p1, p2)
//dipuja linea de punto a punto
{
if (p1.lat != 0) {
var line = new google.maps.Polyline({
path: [
new google.maps.LatLng(p1.lat, p1.lng),
new google.maps.LatLng(p2.lat, p2.lng)
],
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 1,
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor:'#0000ff',
fillColor:'#000000',
fillOpacity:1
},
repeat:'100px',
path:[]
}],
map: map
})
lines.push(line);
}
}

OpenLayers: display remote kml

I'm trying to let OpenLayers display a KML file that was retrieved from a server.
For some reason this does not work.
Similar questions have been asked, but I could not find a working example.
What I did was improve one of the examples in the OpenLayers distribution: kml-track.js
I improved it with what I found. This is what it looks like. I feel like I'm missing something obvious.
Any pointers are welcome
var map ;
function init() {
var mercator = new OpenLayers.Projection("EPSG:900913");
var geographic = new OpenLayers.Projection("EPSG:4326");
//note that I have host equal to location// //Math.Random will stop caching//
var mykmlurl = 'http://myserver/kml-track.kml';
map = new OpenLayers.Map({
div: "map",
projection: mercator,
layers: [
new OpenLayers.Layer.OSM(),
//Defiine your KML layer//
new OpenLayers.Layer.Vector("This Is My KML Layer", {
//Set your projection and strategies//
projection: geographic,
strategies: [new OpenLayers.Strategy.Fixed()],
//set the protocol with a url//
protocol: new OpenLayers.Protocol.HTTP({
//set the url to your variable//
url: mykmlurl,
//format this layer as KML//
format: new OpenLayers.Format.KML({
//maxDepth is how deep it will follow network links//
maxDepth: 1,
//extract styles from the KML Layer//
extractStyles: true,
//extract attributes from the KML Layer//
extractAttributes: true
})
}),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
graphicName: "circle",
pointRadius: 2,
fillOpacity: 0.5,
fillColor: "#ffcc66",
strokeColor: "#666633",
strokeWidth: 1
})
})
})
],
center: new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator),
zoom: 8
});
//function called// //timer// //layer to refresh//
window.setInterval(UpdateKmlLayer, 5000, MyKmlLayer);
}
function UpdateKmlLayer(layer) {
//setting loaded to false unloads the layer//
layer.loaded = false;
//setting visibility to true forces a reload of the layer//
layer.setVisibility(true);
//the refresh will force it to get the new KML data//
layer.refresh({ force: true, params: { 'key': Math.random()} });
}
This is an example of how to display a KML layer in OpenLayers which might help you:
http://openlayers.org/dev/examples/kml-layer.html
Are you getting any errors when opening your page - or does it run ok but nothing appear? If you're not getting any errors then it might indicate an issue with how your projections are set up (i.e. your features might not appear where you expect them to)

Google Maps JS API v3 marker color

I'm using a fantastic library of code that allows me to have many specific markers with css styled info boxes. In addition, I'd like to have three different categories of colored markers signifying 3 different rivers on a map. Although there are many posts that explain how to color a marker, my code crashes if I use these approaches. I need help with how to assign the specific color to each location. Except for numerous more locations, here is my code with the default red marker:
var locations = [
['<div id="mm-img"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-00-sm.jpg" /><h3>Mile Marker 0 East</h3><p>Old east channel river mouth, now East Waterway. Spokane street fishing pier. Location of historic river mouth, east channel Duwamish River.<br /><span style="font-size:10px;line-height:300%">photo: UW University Libraries</span></p></div>', 47.573600, -122.343585, 1],
['<div id="mm-img"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-01-sm.jpg" /><h3>Mile Marker 1 East</h3><p>Kellog Island, Federal Center South, Diagonal Way, Oxbow Building, Shoreline Access. Proposed mile marker design for new Corps of Engineers building on the Duwamish River.</p></div>', 47.560398, -122.341732, 2],
['<div id="mm-img"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/BR-LWO-sm.jpg" /><h3>Old Lake Washington Outlet</h3><p>Renton airport. Near Black River resort. View of Resort on Lake Washington prior to 1916, when the lake emptied via the Black River into the Duwamish.<br /><span style="font-size:10px;line-height:300%">photo: Renton Historical Museum</span></p></div>', 47.491100, -122.217169, 38]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(47.524501, -122.319785),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Thank you Hungerstar for coming up with an equally good solution. Unfortunately, if I was to use your coding, I would have to rewrite much of what I've already done. With the combination of a friend's help and this link, I had to complete 4 steps for me to get different colored markers with everything in columns in locations.
1) You have locations with
[popup with a bunch of text, 47.491100, -122.217169, "blue", 38]
2) You put in the variable, array, describing what you are getting
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_red.png",
3) The really sneaky part, code I had to simply copy from another guy's code, was how to name the color
if (!icons[iconColor]) {
icons[iconColor] = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_"+ iconColor +".png",
4) and lastly, you get the icon with
map: map,
icon: getMarkerImage(locations[i][3])
For me the simplest way is use
Google dynamic icons generator
For example:
https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E5%8D%B1|FF0000|000000
Not sure what the criteria for select which color your going to use. Is it the last value in location array?
I use a png sprite for my markers so for each marker I have something like this:
var redIcon = new google.maps.MarkerImage(
ABSPATH + 'images/map-icons.png',
new google.maps.Size( 20, 25 ),
new google.maps.Point( 0, 60 ),
new google.maps.Point( 10, 85 )
);
Then you determine which color to use and attach it to the marker:
if ( locations[i][3] == 38 ) {
icon = redIcon;
} else {
icon = bluIcon;
}
marker.setIcon( icon );

Google maps and Transparent click-through marker

I'm using Google maps api v3. In the middle of the map there is a (custom) flag marker with large transparent areas around the flag body. Under the flag icon there are another markers that are inaccessible because of dead transparent areas. Is there any way to set flag marker to be click-through? I cant find solution.
Yes, it is possible the Marker class has a shape property that takes a MarkerShape object. This describes the clickable region for the Marker.
Here is Google's Example. They have a custom flag image and adjusted the shape so that only the rectangular flag section is clickable. With the MarkerShape object you can draw a Circle, Retangle, or Polygon shape area.
Google example code segment:
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
Yes, set the clickable property to false. for example:
const newMarker = new google.maps.Marker(
position: {
lat: 10,
lng: -66
},
clickable: false // <------
)

Resources