I need to create an interactive world map on the front page of a site, the view portal will be about 650x200 pixels. The interactivity would include the following, mouse-over a country would highlight (the countries are will literally be filled with "red" for example) that country and display the countries' name (preferably text in a div), I will also be linking the highlighting event with a that will highlight a country when selected.
I am having a difficult time finding a suitable solution, I refuse to use or learn a proprietry technology such as flash so it is not an option. I created a simple mockup using openlayers and a custom map image but the countries' markers load too slowly in IE6.
Also svg seems too large, as I tried to use RaphaelJS, but abondoned it when I realised the world map data is 1.2mb which is totally un acceptable for the front page of a site..
I am really at a loss on how I am going to do this, my last resort is to manually create 250+ (however many countries there are) pngs and apply mouseover events to hotspots in the image... but this is probably going to be a dead end too.. desperately seeking a solution, any helpful comments will be appreciated!
I developed jVectorMap for that purpose.
Why reinvent the wheel. Google Charts already does this.
I finaly settled with RaphaelJS, importing all the paths from an svg in inkscape, works amazingly well!
We've developed Highmaps, related to Highcharts, to easily solve data visualization problems like this. We also supply a map collection of over 350 maps, optimized for size to keep things lightweight.
For a drilldown example (loading more detailed map on mouse click) see this demo.
Highmaps is free for non-commercial use.
Do you have country coordinate data stored somewhere?
If so setting up functions to parse through the passed in data and create 250+ paths should not be that large.
Related
Here is an example of a Flood Map using D3.js and topojson.
http://bl.ocks.org/cappelaere/6472064
https://gist.github.com/cappelaere/6472064
It is really taxing D3. Simplification of the topojson at load time does seem to hang Firefox. We really need to get this working to support our disaster management work. It would be great to have adaptive simplification as we zoom in. Any help would be greatly appreciated.
Thanks,
Pat.
Pretty much your only choice for this is to have pre-simplified data sets that are loaded according to the zoom level. That is, after each zoom you would need to determine whether to load a new, higher resolution data set for the region that the user has zoomed into. If so, you would need to clear the existing elements and add the new ones.
This would be quite a bit of effort. At this point, you might as well have pre-rendered bitmap tiles (like in Google Maps for example) and use a library like Leaflet that does the heavy lifting for you. On top of this pre-rendered map, you could still use D3 for dynamic stuff.
I've been searching but cannot seem to find a solution.
I have a GeoJSON file which is 170mb in size. It contains about 2500 polygons. Somehow I need to render it to a leaflet map. Evidently at that size I have no chance.
What will the easiest way to render this data? Am I able to create a complete transparent png which can simply be rendered over the world map. The huge size is due to the complexity and the number of polygons. At this point I don't need it to be interactive.
Thanks,
Brian
The easiest way is to create your own map tiles based on that data. There are a couple of ways of achieving this but my suggestion is that you use TileMill. It's free and very easy to use. So, basically you would:
Use TileMill and specify your GeoJSON file as the data-source
Configure how the map should be displayed (like the color of the polygons) with a special CSS-like language inside TileMill
Generate the tiles
Load a new TileLayer in your Leaflet map that references your files
I've actually written a tutorial some time ago that uses a .shp instead of a GeoJson, but should be similar enough:
http://build-failed.blogspot.pt/2012/03/custom-map-tiles-part-2-tilemill.html
I cannot argue with psousa's recommendation. For a straightforward presentation, TileMill is a great idea.
However, if you want to overlay your polygons onto another map, I reckon the only way is by using Mike Bostock's TopoJSON and D3.
The main TopoJSON page:
https://github.com/mbostock/topojson/wiki
An example at the scale you are talking about:
http://bl.ocks.org/mbostock/4206573
You'll have to shop around Mike's excellent examples on github to see how to combine leaflet with a D3 overlay.
I'm currently doing this successfully with hundreds of complex polygons. Haven't had the need to break into the thousands ... yet.
There is also geojson-vt, which apparently can to the tiling serverless on-the-fly - after a bit of loading time.
Just another humble suggestion.
I had successfully done loading 10000+ polygons and querying attributes by rolling out my own Geoserver and PostgreSQL DB + PostGIS instance and producing a WMS (not WFS), as you can see in the image.
But it is not straightforward to implement, especially if the geojson data is the original (and only) data
In that regard I would second psousa's answer to use TileMill.
Im trying to highlight specific building within a map using the google maps v3 api. I was wondering if anyone had any idea how to do this. I've been looking through google api documentation and come across nothing at the moment.
For example: http://goo.gl/maps/GyrDB - This is a map of a section manhattan, as you can see the 3d building. Im trying to highlight specific ones on hover.
Thanks :D
If you have information about where the building is, then you can use a Polygon to highlight it. If you don't have information about where the building is, then you are probably out of luck. The Google Maps API doesn't have any way of interacting with the map at that level.
Now, I suppose that one thing you could do is:
download the Google Maps tile,
find the point in the image that the user clicked on,
do a flood fill of that point with some awful colour,
set to clear all the pixels which are not the colour,
overlay that image on top of your map
You would also need to be clever about buildings which lie in more than one tile.
HOWEVER, this might run you afoul of the Terms of Use. I know that they disallow modifying the artwork; I am not sure if this would count as modifying the artwork; you'd need to look carefully at the TOU and maybe ask a lawyer. Or ask Google. (Don't ask me, I am not a lawyer.)
In many countries, every building is a cadastral parcel and there Web Map Service (WMS) layers showing them, provided for free by state bodies.
Using these layers, you can get building polygon coordinates. For ex: https://snag.gy/WtU7ZT.jpg
I have a written up HTML file using the Google Maps API v3.
All I want to do is color a couple of countries, for example, color in China and Canada to red. What is a simple solution (that doesn't involve Polygons and thousands of coordinates) to color in countries?
After browsing previous StackOverFlow questions, there seemed to be three common solutions. However these 3 solutions do not seem appropriate for my situation.
Charts API
-I don't really understand if Charts API is a good solution for me because I have already have a file using Google Maps API. Unless Charts can be applied over my map, or synchronize with the map, this does not seem to be a valid solution.
Styling (With Styling Wizard)
-This wizard (as far as I know) deals with the style of general characteristics, like road, water, population, etc. Unless someone can show me how to assign a specific country a color, I do not see how this can work.
Polygons
-I saw the example of the Bermuta triangle and other people have suggested to get the coordinates of the perimeter of a country and create a polygon. This may work except I may need a thousands of coordinates in order to fully outline China. Perhaps there is a more simple method in which I can color in a country?
Use either FusionTablesLayer or KmlLayer.
Both take kml formated geographical data and render it on tiles, yielding better performance with complex or large numbers of polygons.
The Natural Earth data set is available in Fusion Tables, and contains most countries.
This might work for you if coordinates generated automatically in different resolutions depending on your requirements. all you need to do is to load an appropriate GeoJSON onto your map. See here for the complete answer which is done just by adding a couple of line of codes.
I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.