I would like to add a legend to my Heat Map Layer using LegendControl Module. I want to add StopColors in the legend using the number of points. However the HeatMapLayer color option only allows HeatMapDensity (0 to 1) in the data expression. How do we assign colors to HeatMapLayer using "interpolate" expression and the number of points ?
color: [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(0,0,0,0)',
0.2,
'royalblue',
0.4,
'cyan',
0.6,
'lime',
0.8,
'yellow',
1,
'red'
],
However adding ['get','point_count'] to the color throws error inplace of heatmap_density. How to create a legend and color the heat map based on number of points ? Thanks !
Sounds like you are trying to create a weighted heat map. Use the weight option. For example:
var layer = new atlas.layer.HeatMapLayer(datasource, null, {
weight: ['get', 'point_count']
});
Related
is there any way we can add two polylines between two coordinates
new atlas.data.LineString([[point A],[point B]])
new atlas.data.LineString([[point B],[point A]])
like this
currently it shows only one line when i add this to data source
If you have one linestring and you want a second linestring with coordinates in the opposite order, you can create a deep copy of the linestring, and then reverse the coordinate array, then add the lines to the data source. For example, if you have a GeoJSON linestring object:
var line = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);
//Create a deep copy of the line.
var newLine = JSON.parse(JSON.stringify(line));
//Reverse the order of the coordinates in the new line.
newLine.coordinates.reverse();
As you noted, these lines will overlap when rendered. What you can do to add a visual separation, turn one of these into a GeoJSON feature and add a unique property that can be seen by the data driven styles, then use the offset option of the LineLayer. For example:
//Create a feature from the line and add some property we can use to know this is a reverse copy of a line when styling.
var newFeature = new atlas.data.Feature(newLine, { isCopy: true });
//Add the feature to the data source instead of the new line.
datasource.add(newFeature);
//Have two-line layers with a filter
//Line layer for original lines.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'green',
strokeWidth: 1,
offset: -2,
filter: ['!', ['has', 'isCopy']]
}));
//A second line layer that renders the line copies
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'red',
strokeWidth: 1,
offset: 2,
filter: ['has', 'isCopy']
}));
if it is just the Polyline you want to plot between points and indicate with two different colors, you can use the offset property of LineLayerOptions and plot the lines using the following JavaScript.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'green',
strokeWidth: 1,
offset: -2
}));
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'red',
strokeWidth: 1,
offset: 2
}));
});
The above JavaScript would produce the following Ploy Lines on Azure Maps.
Optionally, you can add a distinct data source if you prefer and map the layers for each data source. But you can achieve the same output by using a single data source as indicated above.
I have built the JavaScript code based on the Azure Maps documentation Add Line Layer to the Map where you can find great code references to add symbols and line gradients. Here is the link to the LineLayers interface which provides a list of options that you can use when rendering line layers in Azure Map.
My Y-Axis keys (or ticks) are pretty long, and they're being truncated
But it's not due to lack of sufficient width for the graph itself, using the inspect tool, I can see there's enough space allocated for it, but the frame that is allocated to the whole graph is not sufficient... and that's supposed to be the ResponsiveBar...
changing the "transform" value for the X-Axis makes the text appear in full (almost), but then the legends are being truncated:
How can I make them appear in full? Couldn't find my answer in the docs.
Here's a sandbox to reproduce the problem: https://codesandbox.io/s/missing-legends-text-pns6v
IMPORTANT: 'width' is not the problem, it is somehow covered with a sort of a white line... also, I tried many 'width' sizes
The problem I'm referring to is this:
Would love to hear if there's a way to wrap the text, or truncating with adding on hover effect to show the full text
solution 1 : increase margin
You can set the left property in margin of ResponsiveBar. In the following example set to 240px:
<ResponsiveBar
........
margin={{ top: 50, right: 150, bottom: 50, left: 240 }}
........
/>
You will also need to update the container style to expand the chart setting the margin to 0 for example :
style={{
.....
margin: "0"
}}
Result:
Sandbox
solution 2: tooltip
If you don't want to increase the margin, you can override the format function in axisLeft props and :
cut the string like New York, Manhatta...
add a <title> tag to display a tooltip :
axisLeft={{
format: (v) => {
return v.length > 10 ? (
<tspan>
{v.substring(0, 10) + "..."}
<title>{v}</title>
</tspan>
) : (
v
);
},
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "",
legendPosition: "middle",
legendOffset: -40
}}
checkout this post
Sandbox
I am using RGraph version 5.00, trying to make a scatter plot that looks like this,
https://i.stack.imgur.com/lsPB8.png
This is my best effort, thus far,
https://i.stack.imgur.com/LKIYH.png
How can I move the Y-Axis from the left-hand side to the center of the plot?
I've tried setting the 'xaxisScaleMin' option to 'mirror', but that doesn't work. Here is my code,
new RGraph.SVG.Scatter({
id: 'chart-container',
data: [],
options: {
backgroundGridHlinesCount: 10,
backgroundGridVlinesCount: 10,
colors: ['cyan', 'magenta', '#cc0', 'black', 'red', 'green', 'blue', 'brown'],
linewidth: 3,
gutterLeft: 50,
gutterBottom: 50,
xaxisLinewidth: 1.5,
xaxisScale: true,
xaxisScaleMax: 125,
xaxisScaleMin: -125,
yaxisLabelsCount: 10,
yaxisLinewidth: 1.5,
yaxisScale: true,
yaxisScaleMax: 125,
yaxisScaleMin: -125,
title: 'solid ink colors'
}
}).draw();
2019-05-29:
Looking at the source, RGraph.svg.common.core.js, there is no way to place the Y-axis at the origin, as with the X-axis. Placing the Y-axis on the origin, when it is in the range of the graph, seems like a proper default behavior, or should at least be a simple option. I will try changing the source.
One of the examples in the download does just this:
demos/scatter-negative-x-axis.html
The trick is to add a large left margin and then use the drawing API X axis to add the extra axis (the left-hand-side X axis).
(incidentally - the lines that are shown on the chart are just trigonometry curves - sin/cos/tan)
You can get the RGraph download here:
https://www.rgraph.net/download.html#stable
Especially looking for an idea or way around to achieve this.
I am trying to build a video editor/mixture as in the above image using react js. This UI primarily targets to align different video/image media with timelines. As user drag video/image in any of the layer, it just needs to expand or shrink with time scale.
Three screens are for three different videos. A feature like a crop/split is not required. This UI collect information and send it to the server which will do the rest of the processing. Required contents are already on our servers.
Any solution/possible direction on collecting media information drag into layers with the time scale on the top ?. What are the best resources to achieve this UI using React JS?
You should be using timeline of vis.js with the following options :
var start = new Date(1970, 0, 1, 0, 0, 0, 0);
var end = new Date(1970, 00, 01, 0, 1, 0, 0);
var options = {
zoomKey: "ctrlKey",
horizontalScroll: true,
verticalScroll: true,
orientation: "top",
moveable: true,
zoomable : true,
editable: true,
min: start,
max: end,
start: start,
end: end,
zoomMax: 10000000,
zoomMin: 1000,
stack:false,
showCurrentTime: true,
multiselect: true,
multiselectPerGroup: true,
};
This will give you a multiline scrollable (both horizontal and vertical) sliding timeline which is the basis of a video editor.
I suggest your timeLine component to have a module and scale both provided by its father component. The nested divs have their own module length, but not scale, and the same happens with the timeLine component. So, you only talk about modules length. Then i.e. you set the equivalence 1 module = 50px
I hope this help you!
I have a problem with WMS overlays in OpenLayers. Basically I just want to add data from a WMS server as an overlay and not as a base layer. This appears to be a very simple problem but I am unable to find a solution. If I set singleTile to true, the overlays appears over the whole map but you cannot zoom in. If it is set to false, only one tile is displayed at every zoom level. If I set it as a base layer, it works just fine but I really want the overlay solution so I can make it transparent and see the map behind it.
Demonstration of the problem, with a different dataset but the issue is the same:
http://jsfiddle.net/adbnC/2/
I think it might be related to some coordinate system issues but I am no expert so any help is appreciated.
Thanks a lot!
Here is the relevant section of the code that does not work as expected:
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000",
"http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false,
// Setting single tile to true will kind of work but than one
// cannot zoom in any more.
singleTile: false
}
);
I can't quite get what exactly is wrong here, but I think it has something to do with messed up reference systems. Here is a workaround:
Modified Jsfiddle.net
I changed the map projection to spherical mercator and now it seems to work fine for me:
var mapOptions = {
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m"
};
map = new OpenLayers.Map('map', mapOptions);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000", "http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false
});
map.addLayer(osm);
map.addLayer(pop_layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
Let me know if that helped!