For example I have layerGroup:
marker1: {color: red, age: 15, type: 'fruit'}
marker2: {color: red, age: 10, type: 'animal'}
marker3: {color: green, age: 10, type: 'fruit'}
marker4: {color: green, age: 11, type: 'animal'}
And I want to show markers with color: red and also show markers with age 10
Add all markers in a array and loop it through. Then add it to a layergroup/featuregroup.
var fg = L.featureGroup().addTo(mymap);
var markers = [marker1,marker2,marker3,marker4];
mymap.on('click moveend', function(e){
fg.clearLayers();
markers.forEach(function(marker){
var options = marker.options
if(options){
if(options.color && options.color == "red"){
fg.addLayer(marker);
}else if(options.age && options.age == 10){
fg.addLayer(marker);
}
}
});
});
https://jsfiddle.net/falkedesign/vxz6pon7/
Related
I would like to download daily mean AOD data. I already did, but I got a file with 6015 rows and only ten rows with data, the rest of raws are empty.
How can I download only the data available?
var clipToCol = function(image){
return image.clip(buff1k)};
var AOD = ee.ImageCollection('MODIS/006/MCD19A2_GRANULES')
.select('Optical_Depth_055')
.filterDate('2019-07-10', '2019-07-15').map(clipToCol);
//.filterBounds(RMSP);
var band_viz = {
min: 0,
max: 350,
palette: ['black', 'blue', 'purple', 'cyan', 'green', 'yellow', 'red']
};
Map.addLayer(AOD.mean(), band_viz, 'Optical Depth 055');
var outline = ee.Image().byte().paint({
featureCollection: buff1k,
color: 1,
width: 1
});
Map.addLayer(outline, {palette: ['black']}, 'buff1k');
Map.setCenter(-46.63203, -23.55221, 9);
var AODmean_2 = AOD.map(function(img) {
return img.reduceRegions({
collection: buff1k,
reducer: ee.Reducer.mean(),
scale: 1000,
}).map(function(f){
return f.set('date', img.date());
});
}).flatten();
Export.table.toDrive({
collection:AODmean_2,
folder: "Google EE results",
selectors:(["date","mean"]),
});
Use a notNull filter on the collection: change
collection:AODmean_2,
to
collection: AODmean_2.filter(ee.Filter.notNull(["mean"])),
I have a leaflet map using leaflet-realtime to display and update a position, polygon and line from a geoJson source (data is the position and field of view from an airborne camera). I want to change the style of the line and polygon from the default blue. I understand the leaflet-realtime extends L.geojson so I thought the following code should work but I get options.style is not a function. I have been looking at other examples to try and do this but have spent the day frustrated.
var lineStyle = {
color: 'black',
weight: 5,
opacity: 0.5
}
los = L.realtime({
url: 'http://127.0.0.1/geojson/los2.geojson',
crossOrigin: true,
type: 'json'
}, {
interval: 1 * 500,
style: lineStyle
}).addTo(map);
los.on('update', function(){
map.flyTo(
[this._features.los.geometry.coordinates[1][1],
this._features.los.geometry.coordinates[1][0]]
)
});
If anyone can point me in the right direction it would be hugely appreciated.
Thanks
Yes options.style must be a function - look at:
https://leafletjs.com/reference-1.7.1.html#geojson-style
Change your code:
var lineStyle = {
color: 'black',
weight: 5,
opacity: 0.5
}
los = L.realtime({
url: 'http://127.0.0.1/geojson/los2.geojson',
crossOrigin: true,
type: 'json'
}, {
interval: 1 * 500,
style: function() { return lineStyle; }
}).addTo(map);
los.on('update', function(){
map.flyTo(
[this._features.los.geometry.coordinates[1][1],
this._features.los.geometry.coordinates[1][0]]
)
});
I need to draw x & y intercepts for all data points in a scratter chart. I went through major and minor grid lines. But it could not be my perfect solution.
Like the image below:
The sample image with x and y intercepts only on data points
You can use the render function of the chart to draw the horizontal and vertical lines on the chart surface. In the following demo, I name the x and y axes so that in the render function I can use the getAxis() method along with slot and range. See DOCS.
DEMO
var data = [[0.67, 5.4], [2.2, 2], [3.1, 3]];
$("#chart").kendoChart({
series: [{
type: "scatter",
data: data,
markers: {size: 16},
}],
yAxis: { name: "value", majorGridLines: {visible: false } },
xAxis: { name: "category", majorGridLines: {visible: false } },
render: function(e){
var chart = e.sender;
var yAxis = chart.getAxis("value");
var xAxis = chart.getAxis("category");
//iterate each point on the chart
for (var i=0; i<data.length; i++){
//vertical line
var valRange = yAxis.range();
var valSlot = yAxis.slot(valRange.min, valRange.max);
var point = data[i];
var catSlot = xAxis.slot(point[0]);
var path = new kendo.drawing.Path({
stroke: {color: "#B3BDBD", width: 1}
}).moveTo(catSlot.origin.x + catSlot.size.width/2, valSlot.origin.y)
.lineTo(catSlot.origin.x + catSlot.size.width/2, valSlot.bottomRight().y);
chart.surface.draw(path);
//horizontal line
var ySlot = yAxis.slot(point[1]);
var xRange = xAxis.range();
var xSlot = xAxis.slot(xRange.min, xRange.max);
var pathH = new kendo.drawing.Path({
stroke: {color: "#B3BDBD", width: 1}
}).moveTo(xSlot.origin.x, ySlot.origin.y + ySlot.size.width/2)
.lineTo(xSlot.bottomRight().x, ySlot.origin.y + ySlot.size.width/2);
chart.surface.draw(pathH);
}
}
});
I have a datatable created from database data that gets aggregated by google.visualization.data.group, then fed into a columnChart.
By default, the resulting chart's bars are all the same color but i would like to make the bars different colors (by iterating through the datatable and assigning a different color to each row in the datable).For now, i'll just try to assign the colour 'gold' to each bar, for simplicity.
This is the documentation for a columnChart and is the documentation for style roles.
I don't think my code can be far wrong:
var groupedCategoryData = new google.visualization.data.group(
stacked01Data, // arg 1 is the array of input data
[{ // arg 2 is the key (An array of numbers/objects being columns to group by)
column: 0, type: 'string'
}],
[{ 'column': 1, 'aggregation': google.visualization.data.avg, 'type': 'number' }]
);//group. col 1 = score
//*****************
groupedCategoryData.addColumn({ type: 'string', role: 'style' });
for (var i = 0; i < groupedCategoryData.length; i++) {
groupedCategoryData[i][2] = 'color: gold';
}//for
//*****************
var stacked01_options = {
width: 500,
height: 300
};//options
var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div'));
stacked01.draw(groupedCategoryData, stacked01_options);
The result is a chart whose bars are all default blue. I admit this is my first foray into javascript. any help would be appreciated.
Yep, that did it. thanks WhiteHat. working code:
//include the bar color data
var colorsGreen = [
[0, 1, '#6AB293'],
[1, 2, '#449371'],
[2, 3, '#277553'],
[3, 4, '#115639'],
[4, 5, '#043822']
];
groupedCategoryData.addColumn('string', 'barColor');
var groupedCategoryDataView = new google.visualization.DataView(groupedCategoryData);
groupedCategoryDataView.setColumns([0, 1, {
calc: function (dt, row) {
var rowValue = dt.getValue(row, 1);
var color;
colorsGreen.forEach(function (range, index) {
if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) {
color = range[2];
}
});
return color;
},
role: 'style',
type: 'string'
}]);
var stacked01_options = {
width: 500,
height: 300
};//options
var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div'));
stacked01.draw(groupedCategoryDataView, stacked01_options);
}
I would like to know if it's possible to have line chart series names divided in two rows, with a label in addition (Group1 and Group2 from the photo). On the picture below you can see what I want to create.
If not, is it at least possible to divide series names in two rows (without labels)?
Here is the photo:
This is an example from a kendo ui homepage, here you can find the source code: link
I think you would need to play around with the legend width and the legend item visual:
DEMO
legend: {
position: "bottom",
width: 360,
item: {
visual: function (e) {
console.log(e);
var group = "";
var rect = new kendo.geometry.Rect([0, 0], [140, 50]);
if (e.series.name == "1. GOOG (close)"){
group = "Group 1: ";
rect = new kendo.geometry.Rect([0, 0], [200, 50]);
} else if (e.series.name == "3. AMZN (close)"){
group = "Group 2: ";
rect = new kendo.geometry.Rect([0, 0], [200, 50]);
}
var color = e.options.markers.background;
var labelColor = e.options.labels.color;
var layout = new kendo.drawing.Layout(rect, {
spacing: 5,
alignItems: "center"
});
var grplabel = new kendo.drawing.Text(group, [0, 0], {
fill: {
color: "#000"
}
});
var marker = new kendo.drawing.Path({
fill: {
color: color
},
stroke : {
color: color
}
}).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0, 0).close();
var label = new kendo.drawing.Text(e.series.name, [0, 0], {
fill: {
color: labelColor
}
});
layout.append(grplabel, marker, label);
layout.reflow()
return layout;
}
}
},
In the demo, I am checking the series name and adding the group label to the first and third series. The the legend width is set so that it wraps to a second line. NOTE: there is some trial and error to make this work with your data...