Like we do position: relative; in CSS, I need to position any newly created items relative to the parent Group. This is what I expect to get:
...with the following code:
var path = new Path([50, 0], [50, 100]);
var path2 = new Path([0, 50], [100, 50]);
// cross center at [50, 50]
var center = [100, 100]
var group = new Group({
children: [path, path2],
strokeColor: 'black'
});
// It's important to arrange the position
// right after creating the group
group.translate([50, 50])
new Path.Circle({
center: center,
radius: 5,
fillColor: 'red'
})
new Path.Rectangle({
from: [10, 10],
to: [40, 40],
strokeColor: 'black',
parent: group
})
However, what I actually get is as follows:
How can I make newly created items positioned relative to its parent group?
Note: In order to take the "desired" screenshot, I needed to .translate() the group after inserting the rectangle: Sketch
It turns out it's controlled by applyMatrix: false parameter: Sketch
var group = new Group({
children: [path, path2],
strokeColor: 'black',
applyMatrix: false,
});
group.translate([50, 50])
Related
I am trying to run the following code to extract the change map using the Land Trendr algorithm in Google Earth Engine. Everything seems to be running fine when I use a point as my area of interest, but once I try to use a polygon as my aoi file it throws me an error. I am attaching my code here :
//##########################################################################################
// START INPUTS
//##########################################################################################
// define collection parameters
var startYear = 1985;
var endYear = 2017;
var startDay = '06-20';
var endDay = '09-20';
//var aoi = ee.Geometry.Point(-122.8848, 43.7929);
var coords = ([70.9361058400289,28.387332974875402],
[83.5044652150289,28.387332974875402],
[83.5044652150289,37.305336609850876],
[70.9361058400289,37.305336609850876],
[70.9361058400289,28.387332974875402]);
var aoi = ee.Geometry.Polygon(coords);
var index = 'NBR';
var maskThese = ['cloud', 'shadow', 'snow', 'water'];
// define landtrendr parameters
var runParams = {
maxSegments: 6,
spikeThreshold: 0.9,
vertexCountOvershoot: 3,
preventOneYearRecovery: true,
recoveryThreshold: 0.25,
pvalThreshold: 0.05,
bestModelProportion: 0.75,
minObservationsNeeded: 6
};
// define change parameters
var changeParams = {
delta: 'loss',
sort: 'greatest',
year: {checked:false, start:2000, end:2010},
mag: {checked:true, value:200, operator: '\>', dsnr:false},
dur: {checked:true, value:4, operator: '\<'},
preval: {checked:true, value:300, operator: '\>'},
mmu: {checked:true, value:11},
};
//##########################################################################################
// END INPUTS
//##########################################################################################
// load the LandTrendr.js module
var ltgee = require('users/emaprlab/public:Modules/LandTrendr.js');
// add index to changeParams object
changeParams.index = index;
// run landtrendr
var lt = ltgee.runLT(startYear, endYear, startDay, endDay, aoi, index, [], runParams, maskThese);
// get the change map layers
var changeImg = ltgee.getChangeMap(lt, changeParams);
// set visualization dictionaries
var palette = ['#9400D3', '#4B0082', '#0000FF', '#00FF00', '#FFFF00', '#FF7F00', '#FF0000'];
var yodVizParms = {
min: startYear,
max: endYear,
palette: palette
};
var magVizParms = {
min: 200,
max: 800,
palette: palette
};
// display the change attribute map - note that there are other layers - print changeImg to console to see
Map.centerObject(aoi, 11);
Map.addLayer(changeImg.select(['mag']), magVizParms, 'Magnitude of Change');
Map.addLayer(changeImg.select(['yod']), yodVizParms, 'Year of Detection');
// export change data to google drive
var region = aoi.buffer(1000).bounds();
var exportImg = changeImg.clip(region).unmask(0).short();
Export.image.toDrive(
{image: exportImg,description: 'lt-gee_disturbance_map',
folder: 'lt-gee_disturbance_map',
fileNamePrefix: 'lt-gee_disturbance_map',
region: region,
scale: 30,
crs: 'EPSG:5070',
maxPixels: 1e13});
It is throwing an error: Line 75: GeometryConstructors.Polygon: LinearRing requires at least 3 points. I am not sure what I am doing wrong here. Thank you for your help.
I want to generate a NDWI chart, but I get this error:
Error generating chart: No features contain non-null values of "system:time_start".
enter code here
var L8 = ee.ImageCollection("LANDSAT/LC08/C02/T1_RT_TOA")
.filterDate('2021-01-01', '2021-12-31')
.filterBounds(VolRn)
.filterMetadata('CLOUD_COVER', 'less_than', 1.5)
.mean()
.clip(VolRn);
var green = L8.select('B3');
var nir = L8.select('B5');
var ndwi = green.subtract(nir).divide(green.add(nir)).rename('NDWI');
var ndwiParams = {
min: -1,
max: 1,
palette: ['green', 'white', 'blue']
};
var ndwiMasked = ndwi.updateMask(ndwi.gte(0.001))
Map.setCenter(44.5858, 48.8047, 7);
Map.addLayer(ndwi, ndwiParams, 'NDWI image');
var options = {
title: 'Landsat Spectral Indexes',
hAxis: {title: 'Date'},
vAxis: {title: 'Value'},
lineWidth: 1,
maxPixels: 1e9,
series: {
0: {color: 'blue'}, // NDWI
}};
print(Chart.image.series(ndwi, VolRn, ee.Reducer.mean(), 200).setOptions(options));
enter code here
Can you please explain what this error is and how to fix it.
I am completely new to GEE and can't find information about this error.
I will be very grateful
I'm using vis js to build an application and when I generate the first search I don't have edges overlapping but after expanding a node I got them.
I have a loop to fill the nodes and edges using nodes.update and edges.update
Graph:
var container = document.getElementById("graph-container");
var data = {
nodes: nodes,
edges: edges,
};
var options = {
interaction:{
dragNodes:true,
dragView: true,
hover: true,
hoverConnectedEdges: true,
selectConnectedEdges: true,
zoomView: true
},
layout:{
randomSeed : 2,
improvedLayout:true,
clusterThreshold: 150,
},
physics: {
barnesHut: {
avoidOverlap: 0.5
}
},
nodes: {
physics:false,
borderWidth:3,
size:14,
font:{color:'#000000'}
},
edges:{
length: 200,
smooth: {
roundness: 0.2,
type: 'dynamic'
},
font:{
size:9,
}
}
};
if(is not expand node){
network = new vis.Network(container, data, options);
}else{
network.fit();
network.redraw();
}
What am I doing wrong?? I think its not reading my options = {...} in the expansion
I am having issues rotating my symbol around a specific pivot point.
Here is my code :
var path_tank_left_track = new Path({
segments: [[0,0], [10, 0], [10,40], [0,40]], strokeColor: 'black',
closed: true
});
var path_tank_right_track = new Path({
segments: [[40,0], [50, 0], [50,40], [40,40]], strokeColor: 'black',
closed: true
});
var path_tank_body = new Path({
segments: [[10,5], [40,5], [40,35], [10,35]], strokeColor: 'black',
closed: true
});
var path_tank_gun = new Path({
segments: [[23,15], [23,0], [27, 0], [27, 15]],
strokeColor: 'black',
pivot: [25,15],
name: 'gun'
});
var path_arena_separation = new Path(new Point(view.size.width/2,0),
new Point(view.size.width/2, view.size.height));
path_arena_separation.strokeColor = 'black';
path_arena_separation.closed = true;
var whole_tank = new Group();
whole_tank.addChild(path_tank_left_track);
whole tank.addChild(new Point(5,20)); // trying to add the middle of the left track pivot point
whole_tank.addChild(path_tank_body);
whole_tank.addChild(path_tank_right_track);
whole tank.addChild(new Point(50,20)); // trying to add the middle of the right track pivot point
whole_tank.addChild(path_tank_gun);
// Create a symbol definition from the path:
var definition = new SymbolDefinition(whole_tank);
var instance1 = definition.place();
instance1.position = new Point(view.size.width/4, view.size.height/2);
var instance2 = definition.place();
instance2.position = new Point(3*view.size.width/4, view.size.height/2);
function onFrame(event) {
instance1.rotate(1, instance1.definition.item.children[1]);
}
As you can see, at the onFrame function, I'm trying to rotate the instance by 1 degree every frame around the point I created earlier. But I get an error saying the item_remove is not a function in the paper-full.js.
I'm confused, I tried to create a path with a single point and add it to the group but it did not let me.
If I modify the code to make the gun rotate on it's pivot instead, it does work :
function onFrame(event) {
instance1.definition.item.children['gun'].rotate(1, instance1.definition.item.children['gun'].pivot);
}
The gun does rotate around the proper pivot and the pivot stays attached to the symbol even if the symbol moves around. How could I achieve that behavior but turning the whole tank around a specific point relative to the center of the tank?
Thank you for your help, let me know if I should include more detail.
Your code is crashing because you try to add a point (and not a path containing a single point as you seems to be trying to) as a group child, which is not what API expects.
To create a path containing a single point, you have to do this:
var path = new Path(new Point(x,y));
But I think the idea of adding a single point path as a child to later retrieve its position to use it as a pivot point is wrong in your case.
The fact that you are creating each tank as a Symbol implies that you won't have access to its own children.
You can instead, before placing your symbols, store 2 vectors: one from center to left and one from center to right. They will later help you calculating left / right track positions.
Here is a Sketch adapted from your code, demonstrating this.
var path_tank_left_track = new Path({
segments : [ [ 0, 0 ], [ 10, 0 ], [ 10, 40 ], [ 0, 40 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_right_track = new Path({
segments : [ [ 40, 0 ], [ 50, 0 ], [ 50, 40 ], [ 40, 40 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_body = new Path({
segments : [ [ 10, 5 ], [ 40, 5 ], [ 40, 35 ], [ 10, 35 ] ],
strokeColor: 'black',
closed : true
});
var path_tank_gun = new Path({
segments : [ [ 23, 15 ], [ 23, 0 ], [ 27, 0 ], [ 27, 15 ] ],
strokeColor: 'black',
pivot : [ 25, 15 ],
name : 'gun'
});
var path_arena_separation = new Path(new Point(view.size.width / 2, 0), new Point(view.size.width / 2, view.size.height));
path_arena_separation.strokeColor = 'black';
path_arena_separation.closed = true;
var whole_tank = new Group();
whole_tank.addChild(path_tank_left_track);
whole_tank.addChild(path_tank_left_track);
whole_tank.addChild(path_tank_body);
whole_tank.addChild(path_tank_right_track);
whole_tank.addChild(path_tank_gun);
// store vectors from bounds center to tracks middle points
var tankCenter = whole_tank.bounds.center;
var leftTrackCenter = new Point(5, 20);
var rightTrackCenter = new Point(50, 20);
var leftVector = leftTrackCenter - tankCenter;
var rightVector = rightTrackCenter - tankCenter;
// Create a symbol definition from the path:
var definition = new SymbolDefinition(whole_tank);
var instance1 = definition.place();
instance1.position = new Point(view.size.width / 4, view.size.height / 2);
var instance2 = definition.place();
instance2.position = new Point(3 * view.size.width / 4, view.size.height / 2);
function onFrame(event)
{
// calculate pivot point position
// first we rotate vector accordingly to instance current rotation
var rotatedVector = rightVector.rotate(instance1.rotation);
// then we add it to current tank center
var point = instance1.bounds.center + rotatedVector;
// turn right
instance1.rotate(1, point);
}
I have an issue that is driving me crazy. I have an openlayers map project that works fine. I took this concept code and moved it to a project that utilizes .Net and the projection for the markers/icons get messed up.
//set the Icon/Marker that will be used
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.8,
src: '<%=PinMarkerImage%>'
}))
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
//we will zoom the map to fit the locations after we create
//the map
var mapObj = new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
target: document.getElementById('map-canvas'),
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]),
zoom: 12
})
});
alert(vectorSource.getExtent());
mapObj.getView().fit(vectorSource.getExtent(), { padding: [75, 40, 40, 75], constrainResolution: false });
//I pass in an object one at a time to populate the features
function changeMapOption(oBranch, i) {
// alert('selected');
var long = oBranch.Longitude;
var lat = oBranch.Latitude;
alert(long + ' ' + lat);
//lastCord = ol.proj.transform([coord[0], coord[1]], 'EPSG:4326', 'EPSG:3857');
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857')), //ol.proj.fromLonLat([long, lat])),
id: oBranch.Id,
title: oBranch.Name,
address: oBranch.Address + ", " + oBranch.City + ", " + oBranch.State + " " + oBranch.ZipCode
});
//alert(iconFeature.getGeometry());
vectorSource.addFeature(iconFeature);
//mapObj.getView().fit(vectorSource.getExtent(), { padding: [75, 40, 40, 75], constrainResolution: false });
//target = mapObj.getTarget();
//This will zoom the map to fit all of the vector Sources in vectorSource
//alert(vectorSource.getExtent());
//mapObj.addOverlay(popup);
//jTarget = typeof target === "string" ? $("#" + target) : $(target);
//element = document.getElementById('popup');
}
I have the alerts set to check the Longitude and Latitude. These are correct. For this test run I have three objects that are populated, the Longitude and Latitudes are as follows:
-112.04883, 40.492104
-95.673328, 29.95752
-95.638558, 29.880014
When I run the code the alert for the vectorSource.getExtent() produces this:
-12473218.699582075,-8426499.834030088,-10646435.576762961,-6361484.120029401
And the markers show up off the lower coast of Chile. The Latitude is wrong, yet the Longitude appears to be correct.
I could certainly use some guidance here. This is driving me crazy.
Thanks for any assistance.
After trying multiple times, I came up with a solution that works. Hopefully this will help someone down the line.
function loadMarker(oBranch, i) {
var sHTML = getMarkerInfoHtml(oBranch);
var long = oBranch.Longitude * 1;
var lat = oBranch.Latitude * 1;
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat(([long, lat]))),
index: oBranch.Id,
id: oBranch.Id,
title: oBranch.Name,
address: sHTML //oBranch.Address + ", " + oBranch.City + ", " + oBranch.State + " " + oBranch.ZipCode
});
vectorSource.addFeature(iconFeature);
}
The key was these two lines:
var long = oBranch.Longitude * 1;
var lat = oBranch.Latitude * 1;
by adding the * 1 to the line it forces JavaScript to treat the variables properly as numeric. It now places the markers in the correct location.