What is the best way to locate the xy points? I could keep guessing and see where the marker moves but that seems inefficient...
I am using leaflet and imageOverlay
var sol = xy(175.2, 145.0);
var mizar = xy( 41.6, 130.1);
var kruegerZ = xy( 13.4, 56.5);
var deneb = xy(218.7, 8.3);
L.marker( sol).addTo(map).bindPopup( 'Test 1');
L.marker( mizar).addTo(map).bindPopup( 'Test 2');
L.marker(kruegerZ).addTo(map).bindPopup('Test 3');
L.marker( deneb).addTo(map).bindPopup( 'Test 4');
var travel = L.polyline([sol, deneb]).addTo(map);
Related
In order to make my own markPoint div (since I cannot get Echarts markPoints to show up), I need to get the x,y pixel coordinates of a visual point on a stacked line chart where one series hits a 0 value. But because it is stacked, that 0 point isn't at the bottom of the chart, but somewhere higher sitting on top of other series lower in the stacking order. the echartsInstance.convertToPixel function is responding back with the y pixel coordinate at the bottom of the chart, where absolute 0 would be, but that's not where the series is. It's higher up, even with a 0 value, due to stacking.
Is there anyway, maybe through getModel() or getZr() to find out what the pixel coordinates are for a series (where it actually appears visually after stacking) at a given set of its own x,y values?
OK, let's imagine that you have a bar chart and you want to place the markPoint on the top of second bar, drawing the chart:
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
data: ["A", "B", "C"]
},
yAxis: {},
series: [{
name: 'Series1',
type: 'bar',
data: [5, 20, 36],
}]
}
myChart.setOption(option);
Then you should define the markPoint in series config:
// ...
markPoint: {
symbol: 'circle',
symbolSize: 10,
itemStyle: { color: 'black' },
data:[{
// here you defined: x = 'B' and y = '20'
coord: ['B', 20]
}]
}
// ...
Here you can find the full example.
Next. You want to place the div point with pixel coordinates depending on the size of bar. Here you convert the pixel coordinates into Echarts scale:
var [chartX, chartY] = myChart.convertToPixel({ seriesIndex: 0 }, [x, y]);
You need function to draw point on page:
function Point(opts){
var { x,y } = opts;
var canvas = document.getElementById('main');
var point = document.createElement('div');
point.classList.add('point');
var [chartX, chartY] = myChart.convertToPixel({ seriesIndex: 0 }, [x, y]);
point.style.left = chartX + 'px';
point.style.top = chartY + 'px';
return canvas.insertAdjacentElement('afterbegin', point);
}
and then call it:
var p1 = new Point({ x: 'B', y: 20 });
It's all. See full example.
I'm creating an app using Leaflet library
I have a field radius that contains distance in meters (m).
const radius = 1000;
I would need to convert this field to pixels, but on different zoom levels
For zoom levels, I get values from 8 till 18
I have this function that converts successfully on the current zoom level
function disToPixeldistance(distance){
var l2 = L.GeometryUtil.destination(map.getCenter(),90,distance);
var p1 = map.latLngToContainerPoint(map.getCenter())
var p2 = map.latLngToContainerPoint(l2)
return p1.distanceTo(p2)
}
But I would need to pass different zoom levels as an additional parameter and then convert them from meters to pixels
Like:
function disToPixeldistance(distance, zoomLevel)
Does anyone knows how could I achieve this ? Thank you in advance :)
Change the map.latlngToContainerPoint(latlng) to map.project(latlng,zoom)
function disToPixeldistance(distance, zoom){
zoom = zoom || map.getZoom();
var l2 = L.GeometryUtil.destination(map.getCenter(),90,distance);
var p1 = map.project(map.getCenter(), zoom)
var p2 = map.project(l2,zoom)
return p1.distanceTo(p2)
}
The problem statement is that a region of interest is given.
I need to find all the lakes in a polygon bounded region using the NDWI index for water bodies, which are at a height of more than 1500m. Then display the changes in the area of lake's surface water starting from the year 1984 till 2018 on a 2-year interval in a table like structure in Google Earth Engine. I have used Landsat 5 and 7 data.
I have created the following code:
Earth Engine Code
Now I need to display the results in the polygon marked region in a table sort of structure in the following format:-
Rows - (Lake 1, Lake 2, Lake 3... Lake n)
Columns - (Surface Area in 1984, Surface Area in 1986, ....2018)
How should I go about doing it?
I answer this question in regard of the code posted in the comments, hopefully the question is updated with the code posted in the comments.
Filtering: ok.
Just a comment, I wouldn't name an image collection variable with name img, it's just confusing to me, but variables names are up to you.
var mf = ee.Filter.calendarRange(10, 12, 'month');
var img1 = ee.ImageCollection(l5
.filterDate('1984-01-01','1999-12-31')
.filterBounds(roi)
.filter(mf));
var img2 = ee.ImageCollection(l7
.filterDate('2000-01-01','2018-12-31')
.filterBounds(roi)
.filter(mf));
add NDWI: This is your code:
var addNDWI = function(image){
var ndwi = image.normalizedDifference(['B2', 'B4']).rename('NDWI');
var ndwiMask = ndwi.gte(0.3);
return image.addBands(ndwi);
};
var image1 = img1.map(addNDWI);
var image2 = img2.map(addNDWI);
you are not saving ndwiMask, so you won't be able to use it outside of this function. Again, I wouldn't name them image as they are not images but image collections.
elevation mask: you have to select the elevation band:
var elevMask = elevation.select('elevation').gt(1500)
This mask image will have ones where elevation is greater than 1500 and zeros where not.
applying masks: in this part you have to remember that Earth Engine uses functional programming, so objects are not mutable, this means that you cannot update the state of an object using a method, you have to catch the output of the method you are calling. Here you need ndwi mask, so you have to compute it with NDWI band.
var mask = function(image){
var ndwiMask = image.select('NDWI').gt(0.3)
var ndwi_masked = image.updateMask(ndwiMask);
return ndwi_masked.updateMask(elevMask);
};
var maskedImg = image1.map(mask); // ImageCollection!
var maskedImg2 = image2.map(mask); // ImageCollection!
Visualizing: As the results are ImageCollection, when you add it to the map EE makes a mosaic and that is what you would see. Keep that in mind for further processing.
var ndwiViz = {bands: ['NDWI'], min: 0.5, max: 1, palette: ['00FFFF', '0000FF']};
Map.addLayer(maskedImg, ndwiViz, 'Landsat 5 masked collection');
I am working on a floor map which is an Image, where I want to assign real coordinates to the map, So when I click anywhere on map I should get the real coordinates. I have completed almost everything but don't know how can I assign real coordinates to map.
I am new to Leaflet.
var map = L.map('image-map', {
minZoom: 1,
maxZoom: 4,
center: [0, 0],
zoom: 1,
crs: L.CRS.Simple
});
// dimensions of the image
var w = 2000,
h = 1500,
url = 'http://kempe.net/images/image-of-a-floor.jpg';
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);
// add the image overlay,
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);
Simply do not use L.CRS.Simple and specify "real coordinates" bounds for your Image Overlay. You can just drop all the map.unproject thing.
L.imageOverlay(url, [
[latCornerA, lngCornerA],
[latCornerB, lngCornerB]
]).addTo(map);
Then everything else will use the default CRS and mouse events will generate an event.latlng with corresponding coordinates.
We have all seen the nice RX handling of mouse drag n drop.
I want something similar but outputting the change in angle to the centre of the screen.
Like if the user hits the mouse button and circles the screen twice I would get values from 0 to 720 degrees.
Essentially rotating the thing on screen.
How would one do that?
This will give you the angle in radians from the center of the object. It will only operate in the range (-Pi, Pi] however. If you rotate three times, you won't get a value higher than a single rotation.
var mousedown = from evt in Observable.FromEventPattern<MouseButtonEventArgs>(this, "MouseDown")
select evt.EventArgs.GetPosition(this);
var mouseup = from evt in Observable.FromEventPattern<MouseEventArgs>(this, "MouseUp")
select evt.EventArgs.GetPosition(this);
var mousemove = from evt in Observable.FromEventPattern<MouseEventArgs>(this, "MouseMove")
select evt.EventArgs.GetPosition(this);
Vector center = new Vector(this.Width / 2, this.Height / 2);
var radian = from start in mousedown
from pos in mousemove.StartWith(start).TakeUntil(mouseup)
select Math.Atan2((pos - center).Y, (pos -center).X);
EDIT
If you are after the change in angle, the following should work:
var angle = from start in mousedown
from pos in mousemove.StartWith(start).TakeUntil(mouseup)
select Vector.AngleBetween(pos - center, start - center);
Thanks for your help. Ive figured out the last bit myself:
var down = Observable.FromEventPattern<MouseButtonEventArgs>(this, "MouseDown").Select(e=>e.EventArgs.GetPosition(this));
var move = Observable.FromEventPattern<MouseEventArgs>(this, "MouseMove").Select(e => e.EventArgs.GetPosition(this));
var up = Observable.FromEventPattern<MouseEventArgs>(this, "MouseUp").Select(e => e.EventArgs.GetPosition(this));
Vector center = new Vector(this.Width / 2, this.Height / 2);
var f = from start in down
from pos in move.StartWith(start).TakeUntil(up).Buffer(2, 1)
where pos.Count == 2
select Vector.AngleBetween(new Vector(pos[0].X, pos[0].Y) - center, new Vector(pos[1].X, pos[1].Y) - center);
f.ObserveOnDispatcher().Subscribe(p => {
game.Player.Angle += p;
});