I need to attach marker for many cities on the map. My problem is that due high density of cities around Europe and UK markers and labels overlay each other and entire visualisation looks terrible.
First thing that I can do is to use a smaller markers. But what should I do with label? My idea was to show just subset of some cities every time user zooms in display more and more.
But how do I make sure labels never overlay each other?
Thanks for any help!
Related
I'm trying to create an interactive map (Google Map / OpenStreetMap etc.) showing a global grid of coloured squares representing temperature data. The length of each side of a square inside the grid is 0.5 degrees in terms of the UTM.
I have temperature data for the centre of each square on the grid. These could be min, max etc. I wish to plot this data on an interactive map so that the result will be a kind of heatmap where low values will be bluish and high values will be reddish.
I would expect the result to be similar to this, but interactive:
I have searched for about eight hours and I can't seem to find a viable solution.
I have looked at Fusion Tables, and followed a tutorial to get this example: Fusion Table Example, so I've looked into making a KML file of the 0.5 degrees grid, but got stuck here.
I have looked at CartoDB and made this but if you zoom in, the points are circular and scale smaller as you zoom in. I wish the points to be square and to stay the same size for all zoom levels.
I was thinking of doing something like this but I imagine having this grid on the entire global map would cause it to be very slow.
I hope to have drop-downs on the page to switch to different parameters like max, min temperature etc, and for the overlay to change.
I already have a grid working here but the user simply clicks on a grid to get the temperature graph for that grid. If the user could click something to turn on the coloured grid to see a kind of heat map when they zoom out, that would be great, but I'm a bit lost as to which direction to take. Any help would be greatly appreciated.
I'm toying around with d3.js and some other javascript libraries plotting geoJSON data in the browser. I've done some cool things with the data, but to give it a bit more context I want to lay it over a map that fills the browser (i'll probably make it opaque to not distract). I've spent a few hours with the google and bing API, which have great "zoom" options, but I want to specify how detailed the map becomes without further restricting how far I can zoom in. Is there a way to do this? I.e. I want to zoom further in and be able to pan around, without all of the side streets appearing-- maintaining the "main drags" of the city I'm working with.
I'm open to using different resources, but this is not a commercial product so I don't want to pay anything. As far as I know, the option for increasing and decreasing the detail/resolution of the pane is by increasing or decreasing the zoom variable. Thanks.
Edit: There really doesn't need to be much interaction with the map. This is kind of the intention http://www.caudillweb.com/temp/d3_choropleth.html, but since it will be at the city level, as you can see when you zoom in that far all sorts of different elements and side streets appear, taking away from the clean view at a more zoomed-out level and it begins to distract from the data.
I'm a bit new with Google Maps API, so I don't know if the following question is well asked.
I'm trying to create a v3 powered custom map for a game world. I will use Google Example to ask my question. Lets say I want to limit how far user can go up North or South. Unlike real planet, game map is not connected from sides, and in this example is not connected from North to South. If you will try to max zoom out, and go North, drag the map to the North as much as you can, you will see how it runs out of tiles, and shows gray default background instead. I want to limit this North going behaviour.
I guess that radius property in example has to do something with it, but playing with it didn't help.
Is there another option as to how to limit it?
Thanks!
At first: the radius-property used in this script is without any meaning.
Basically you can't restrict the bounds of the map to a given area.
The only thing you can do is to observe a bounds_changed- event and when the bounds are not within the restricted area revert the bounds.
But this may have some undesired effects.
Instead you may disable the dragging of the map and use a custom pan-control, which allows the user a limited panning to north/south
Is there a way to figure out the ideal zoom for one map if another bigger sized map changes its zoom level. Idea is to keep both maps in sync in terms of viewable area as a smaller map with same zoom will not be viewable the same
Found the answer by searching more. You can call fitBounds() function on the map and pass it the bounds you want it to fit.
So map1.fitBounds(map2.getBounds());
So I was browsing around sites on the internet to get ideas on how to improve maps on a number of my websites when I came across hipmunk.com. If you do a hotel search you will see that instead of stacking and cramming map markers for hotels that are close together they group them. Example can be seen at http://snpr.cm/5G3rLr.png - in that screenshot the circles with no number represent a single hotel whereas the circle with a 2 on it represents 2 hotels.
It seems they have some kind of grid over the map and then they run through all their coordinates and place each hotel into a cell on the grid. Cells with no hotels don't show a marker, cells with one hotel show a circle and cells with multiple hotels show a circle with a number on it. The part I can't wrap my head around is how they are defining this grid. Any ideas?
I know this is a somewhat vague question and in a case I'm in a "monkey see, monkey want to do" situation but I'm sure other web developers who have sites with maps have similar questions about the "how" when they saw hipmunk.
The big mystery for me was figuring out a way to translate an pixel on the map to a latitude/longitude coordinate and vice versa. Turns out this is extremely chunky to do via Google's Maps API v3. This example gave me the most help in solving that issue: http://www.william-map.com/20100416/1/map.htm