I want to create a heat map using Google API (Javascript). The problem is that Heatmaps use colors to represent the density of points. But, in my case the density of points is irrelevant. I want to create a map using a specific set of values. The colors on the map will be determined by that value only for that location. My set of values is Latency (ms).
Example: If a value is low it will appear on the map with green color. If a value is high it will appear with red color.
I´ve searched the API documentation, but the only thing i found was using "weighted locations". This is not a suitable solution, because the density of points is still considered.
Related
I have an app that displays a world map using amCharts 4, in which each continent is to be colored differently and then there are some bubbles places in certain countries to show some data.
For the map, I have an object that lists all countries by the country code key. Then I have an API that returns the data regarding which countries have some values associated with them that should be displayed on the map.
For the purpose of having differently colored continents ( with country borders ) I created a different series for each continent and colored it accordingly. However due to the data structure, this wouldn't let me place the bubbles, so I have another series, beneath all the colored ones, of a full world map.
For the bubbles to be places, I've followed an example from the demos, and calculate the visual center for each country.
My problem is that this has become very resource-intensive, to the point where sometimes, randomly, the map fails to build properly resulting in all the bubbles being places on the top left corner. I was wondering if there are any ways to improve this performance, namely:
- An easier way to calculate the visual center, or get the coordinates for such.
- Some way to color each continent without having to rely on a separate series
If you don't need country borders, I recommend the following steps:
1) Create a map with countries and calculateVisualCenter = true set on country series.
2) When map is build, loop through all polygons and save visualLongitude/visualLatitude of each into some object, output the result in console.
3) Use the coordinates in your actual map for bubble positions.
Here is a quick demo where the coordinates are saved and logged to console:
https://codepen.io/team/amcharts/pen/bGdQXzE
I have to build something like a heatmap but representing the noise sources in a colour, and in the noise expansion radious keep gradient to low level. My problem is that the heapmap.js library takes sense of the points concentration.
I want that the colorize depends on the noise level, and not on the concentration of noise sources.
Also I want to use it not only over a map, also over plant plains and images.
I don't know how can I do it with heatmap.js. If anyone knows or some other libraries...
Thanks in advance!
To show heatmap based on noise level first you will have to define lower and upper bounds of your data. For example, 0 = 0dB lower bound; 10 = 200dB upper bound.
heatmapInstance.setDataMax(10);
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);
Then assign weight Values to each of your data point based on the noise level.
You can assign 0 values to the sources which are quiet and 7-8 to the noisy ones. It should produce nice heatmap of the noise intensity.
Also I want to use it not only over a map, also over plant plains and
images. I don't know how can I do it with heatmap.js
AFAIK, heatmap.js uses pixel position values to plot the data, so it won't be a problem to show heatmap on anything on your screen; be it an image, map or any other canvas.
If you are talking about Google Heatmap apis, I think then it only applies for maps.
Check documentation of Heatmap.js, it is pretty straightforward.
Here is a Heatmap with one source (weight=0.3) :
And here is a Heatmap with multiple sources (weight=0.3) :
I use Heatmap to represent pollution level. And when I have 4 sources with weight of 0.3 (image2) I expect the same green color as on the image1.
But because Heatmaps are used mostly to represent density, they add these sources weights.
How can I prevent this from happening?
Note: I am using Google Maps Api
I think you want to use maxIntensity. From the documentation:
maxIntensity: The maximum intensity of the heatmap. By default,
heatmap colors are dynamically scaled according to the greatest
concentration of points at any particular pixel on the map. This
property allows you to specify a fixed maximum. Setting the maximum
intensity can be helpful when your dataset contains a few outliers
with an unusually high intensity.
The more points you add, the more intense the heatmap will be. Therefore, if you don't want the color to change, you can specify a low maximum intensity so it will always be green.
I've been searching the internet for a package which can create a simply global map.
There are several which I've searched, webgl globe, kartograph, cartodb, R etc.
None of these have what I'm looking for.
What I'm looking for:
I want a map of the globe, which has two colours for the each country.
there would be a background colour, then the second colour would fill from the bottom by x percent based on an input. For example, if I created a map of gun owners as a percentage over the US map, the background colour would be cream and the second colour would fill the map 55% which represents the amount of gun owners.
So, basically, the second colour in the map would act like a bar chart which fills the colour of the country by the % being applied to the country/area.
Please let me know if any .js library or which tools might be able to do this.
Just take any SVG map of the world and change every country into a mask with two rects below it. Do the rest with a simple loop and svgTopOfTwoElements.style.setProperty("height", heightPercentage, ""). Just search google for getting started with SVG from javascript (it's practically the same as working with HTML elements). The only possible concern would be that 17% of the users don't support SVG (IE8-), but for the ease of use you get in return I would believe this to be an acceptable price.
I have locations that have quality 'X', where X can be a negative or positive value. I would like to plot negative values of X as red, and positive values as green. Intermediate values will be yellow. The opacity of the color will correspond to local density of data.
Issue 85 proves that fusion tables alone can't do this yet. Is there a viable extension that can handle this style of heatmapping?
I've made a mockup of what I want here.
I don't know if variable transparency will be an inherent problem. Would that even be possible for a Google Map overlay?
It is indeed possible, though I was only able to solve this problem with custom heatmap code. You can see the result here.
I hope to add the ability to handle both density and data values simultaneously in this API I created. Keep checking.