I am making a map based on arcgis js api. I have a lot of symbols drew on graphiclayer but they are too dense and even overlapping with each other.
How could I make my map showing less points if I zoom out and more points if I zoom in ? I think in this way, overlapping would no more exist.
Thanks.
You could have a look at min and max scale of the GraphicsLayer object:
https://developers.arcgis.com/javascript/3/jsapi/graphicslayer-amd.html#maxscale
Then determine what scales are you interested in. This should stop the symbols from drawing if you zoom out too far out.
Related
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.
I have a Bing Maps where i draw some polygons,
I would like to get the best view (zoom / center) to show all the polygons.
I've tried this, and that achieve what i want, but it make a lot of time.
var poly = new Microsoft.Maps.Polygon(allPoints);
var boundaries = Microsoft.Maps.LocationRect.fromLocations(poly.getLocations());
Thanks for help.
If you have a lot of points (tens of thousands) it will take time. Another way to do this is to loop through your array of location objects and get the min and max latitude and longitude values and then use those to create a location rect. However I doubt that would be much faster as that is basically what the fromLocations method does behind the scenes.
Also, rather than using getLocations, just use the allPoints value you have. Might save a bit of processing.
All that said, unless you are working with really large polygons (thousands of points), I can't see this being slow. Panning and zooming may be slow, but would likely be because the browser has to constantly update the position of the points for the polygon as the map moves. The more points your polygon has, the slower the browser will become.
I am working on a project where data points are visualized in the scatterplot using d3. Since it is a web application, the region is limited and a lot of points overlap. In total there are 20k points and I allow users zooming in with a brush (and its extent) on regions, but even when zoomed in there is still a huge overlap of points. An example of such a situation:
What are good approaches to still visualize underlying points, to enhance the view or perception of the points? I was thinking about maybe using transparency, but I do not know if that would do it.
It might be worthy to note that all points represent genes, so clustering them may not be very logical in terms of representation.
I would suggest trying d3's fisheye plug-in. It allows you to zoom and distort the scale with the mouse letting you zoom in on areas.
You can see an example of it used with a scatter/bubble chart lower on the page here: http://bost.ocks.org/mike/fisheye/
In addition, if you have overlap I would increase opacity, so you can see which points have lots of overlap vs. points that don't.
Here's an example graph with very clustered points that I created using both fisheye and opacity: http://crclayton.com/projects/fisheye/
It also allows you to hover over individual points to see a tooltip containing more details about them.
If the number of data points is of interest, then you could cluster the points (either on client/server side). You typically see this pattern if maps have too many markers (example cluster map).
Edit:
I am still not quite sure if I'm heading in the right direction. To visualize the quantity of points you could use a 3D visualization. Here is an idea taken from the Software Cities project:
You could basically render the position of the points on the plane and create vertical cylinders - the more points on the same spot, the higher the cylinder.
I am using the Google Maps API through the Biostall Library. I am also using the MarkerClusterer function in it.But if I have a couple markers on the exact same location the markers won't split up. What would be the best way to solve this? I was thinking of adding a small random number to those exact same coordinates so that they would be seperate.
Why do you think they should split up?
If they are closer than MarkerClusterer's minimum distance (a configurable option) and you are above the maximum zoom (also a configurable option) and your minimum cluster size is 2 (yup, configurable too) then those two markers should appear as a blue cluster of two.
If you zoom enough, you won't see the cluster anymore, just the markers (which is an indication that MarkerClusterer is showing you the original markers). And if the clusters are in the same position, then it isn't up to MarkerClusterer to split them.
Perhaps you should give a look at OverlappingMarkerSpiderifier for that funcionality.
Basically, what I'm trying to do is use a map viewer as an image viewer with the same sort of efficient tile-loading, zoom/pan awesomeness without having to build it myself.
Specifically, I need an image viewer that will allow the image to grow and change while not altering the coordinates of any older (unchanged) tiles. This means that the center point (0,0), where the image started growing from, must always remain (0,0). So I'm looking for a library that will allow me to use a very basic Cartesian coordinate system (no map projection!), which will ask for tiles infinitely in all directions with no repetition (as opposed to how map libraries just ignore y-axis above and below the map, but the x axis repeats).
There's another catch. I need zoom level 0 to be zoomed in all the way. Since the image is constantly growing, there's no way to tell what the max zoom level will be, and the coordinates need to be based on the base image layer tiles so that every tile in zoom level z contains 2^z base layer tiles.
I am wondering if this is possible with OpenLayers and how to do it. If it's not, any suggestions of other (open-source javascript) libraries that can do this would be very appreciated! I've tried playing around with Polymaps, but the documentation is lacking too much for me to be able to tell if it will work. So far no luck.
Please let me know if none of this made sense, and I'll try to include some images or better explanations. Thanks!
I ended up using Polymaps after all, since I like it more than OpenLayers, because it's faster and has much smoother scrolling and panning. I wasn't able to do exactly what I wanted, but what I did was close enough.
I ended up writing my own layer (based on the po.image() layer), which disabled infinite horizontal looping of the map. I then wrote my own version of po.url() that modified the requests going to the server for tiles so that zooming was reversed (I just arbitrarily picked a 'max' zoom of 20, then when making a request subtract the zoom level from 20) and the x and y coordinates were converted to cartesian coordinates from the standard row, column coordinates Polymaps uses, based on the zoom level and the map centered at (0,0).
If anyone is interested in the code I can post it here. Let me know!
EDIT: I've posted the code on github at https://github.com/camupod/polymaps
The relevant files are src/Backwards* and examples/backwards (though it actually doesn't work, you might be able to clean some information about how it should work).