Clickable continent/country maps: which way to go? - javascript

There are many Web sites that include clickable maps that highlight regions on mouseover and allow the user to narrow down a selection from a world map view to a continent level. Here is an interesting example: davidlynch.org.
Many of these clickable maps are implemented with HTML image maps, while another option is to use for example Google's GeoChart API. Concerning the HTML image maps option, I'm wondering where people get all the 'raw data', all the country and regional border polygons. Is there a free resource for that? Concerning the Google GeoChart option, I'm wondering if that is scalable or if the number of API calls are somehow limited?
Does anyone have some advice on the availability of a free library that allows a straightforward implementation of clickable maps with customizable regions?

Well it is not really a problem which could be tagged 'geocoding'.
Since I have been playing with Raphael.js these days, I thought of this lib while reading your question title. I also remember Wikipedia commons hosted a SVG map of the world. Raphael helps you manipulate svg files, so that could be a nice way to go.
Anyway, after searching whith the criteria 'raphael' I found a conversation matching your request, exactly. So there it is : http://groups.google.com/group/raphaeljs/browse_thread/thread/46b5402c677ce274/7ff6a6a8d8f5f9fa?pli=1
There are some utility scripts, as well as the link to the svg world file mentioned above and a live examples (and links to Stack Exchange topics).
Sure there is work to do, and it may be easier to call directly the google api.
In my experience of the gmaps API, you have to make many requests per second to be blacklisted by google. Like when you launch a heavy batch geocoding tool. So it depends of your project but I would consider quite safe to use it even if your page is popular.
[EDIT] : There is now a live demo on RaphaelJs website.
[EDIT again]: And now a complete production workflow based on Python and Raphael exists : Kartograph. It's really young but looks promising.

Check this out. Seems to serve your requirements and offers a bit more:
Google Maps with Clickable Regions
http://codecanyon.net/item/google-maps-with-clickable-countries/3186942

I second the raphael.js, it is a nice library to draw the shapes with all kinds of user interaction. As an example, you may look at this project, which is a vector map of Russia, implemented on top of the Raphael.js. It allows highlighting the regions programmatically.

There are two libraries I can recommend without doubt: 1. d3JS and 2. Raphael JS
The latter is what I was using for writing my
clickable map generator web application - Make a Clickable Map
d3JS has a steeper learning curve, but you can do way more things with it than Raphael. On the other hand, Raphael is easier to pick up and is fun to work with.

Related

Google Maps Textured Roads

I would like to find a Google Maps API v3 friendly way to add textures (my own images) to elements such as roads, grass, and water. I know you can change the colors of various elements, but I want to do more.
I'm curious if anyone knows if this can be done at a large scale (not just a single area but the whole world).
I have some ideas beyond the API but I would like to see if this could work first.
Thanks.
If I am understanding your question correctly, I do not believe that there is currently a way to do that easily and reliably using Google Maps API v3.
If I wanted to have such a feature, I'd look at OpenLayers and Google Earth API. I have no idea if either support such a feature, but that's where I'd look first.
You may be able to do something fairly involved to achieve this affect with Google Maps API v3, but it might be a lot of work and could be very difficult to do reliably.

Developing asp.net application, use Google maps or bing maps?

I need to use a map in an application that I develop. In my application I want to use pins that will show infoboxes on the map. Use the zoom in, zoom out functionality and the ability to show several maps on the same page. I won't need to use the search locations or routing directions.
Which type of maps should I use? Google or Bing? As I understand, they both have good user interface, but which one is easier to develop with? If I'll use Bing then will it be more Microsoft like, I mean, it will let me use visual studio convenient programming? More or less javascript so it will be a hassle do debug it?
In truth it doesn't matter. They'll both get you the same results. What you need to look as it the licensing agreements between the two of them. That is going to be your real deciding factor.
Personally, I like Bing better, but that is entirely my opinion. People who are really good with Google will tell you it is easier. It all depends on what you are used to and what you like. I would quickly mock up both and see which is better for you.
I would check here. It is a comparison between the two and the writer's breakdown of what he experienced.
Bing Maps Example
Drawing a Circle in Bing Maps
Sorry I don't have examples of Google's. I haven't used it a while.
From a capability or customizability perspective, any of the options will meet your needs.
In terms of user experience, my personal preference is the Silverlight version of Bing Maps - very fast and smooth. That does require Silverlight though which may or may not be acceptable to you. If it's not, Google's AJAX map is 2nd best. I find the AJAX version of Bing Maps to not be very fast or smooth when zooming or panning.

Create a web based GPS Skyplot

I am looking to create a web based GPS skyplot.
Currently just in the planning stages. Was wondering if anyone knew any javascript libraries or such in which this would be best to start with or have a look at, of if you have done something similar before. I know Flot is decent for plotting but unsure if it would be easy in this scenario.
TLDR: Looking for javascript libraries or other alternatives to create a web based GPS Skyplot.
Further info.
I would like to be able to maintain it all generally in javascript / HTML but am open to other alternatives. I will have a server passing me the GPS details.
Skyplot Examples: For those who don't know.
http://www.gpsoftnav.com/skyplot.html
http://www.novariant.com/resources/technologies/skyplot.cfm#
I came accross:Geographic Information Systems (Stack Exchange) yesterday, would make a good site for these kind of questions.
So if anyone is interested in this please also go make a commit :). Otherwise I am still looking for any feedback on the question.
Is it the graphical issues you are concerned with, or are you intending to also calculate which satellites are visible, and their azimuths and elevations at the given location and time?
If it's just the graphical part you are concerned with, I would use jQuery and Keith Wood's SVG plugin - see http://keith-wood.name/svg.html . This gives you a Javascript handle to Scalable Vector Graphics, for drawing circles, lines and dots on a canvas in the web page. It's simple to use, and the page I've linked to has examples that should help.

OpenLayers vs Google Maps? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have used Google Maps a couple of times, but what wondering about OpenLayers.
Before starting any kind of coding, here are a couple of questions that come to my mind,
Why would I use OpenLayers instead of Google Maps?
Except for its OSS licence, anyway
Did you encounter any situation in which you'd recommend absolutly not using OpenLayers?
I did a search about "OpenLayers" on Stack Overflow; there are not many answers. Does it mean this solution is not used much? Could it be a problem for long-term viability of the project?
For those of you who have already used OpenLayers: are there any common pitfalls / problems I may encounter?
What about using a JavaScript Framework with it? I've seen it's using Prototype, and I know Prototype, so that would be OK. But what about using something else like MooTools? (Which is not compatible with Prototype, BTW)
Are there any kind of speed and performance related problems? I need my application to be responsive and can't wait hours to get a map displayed.
Are there maps available for many places, or are there lots of those missing?
That is, I'm in France, and need my application to work at least for big cities... Will that be OK?
if not, is it easy to find layers and visualisations for OpenLayers and integrate them?
Is there any kind of API to display roads?
For instance, to show roads that are one-way only.
If yes, how can I do that? Do I have to have some kind of file containing those roads information, and, then, display them on the map by myself?
Do you know any good tutorial to OpenLayers?
I have not tried it yet, those are just out of the blue questions...
These are a really great questions! I'm a professional OpenLayers developer and fan, so I'll address your questions from that perspective.
Why would I use OpenLayers instead of Google Maps?
Flexiblity: You are not tied to any particular map provider or technology. You can change anytime and not have to rewrite your entire code. Google, Yahoo, Microsoft, WMS, ArcGIS Server, MapServer, etc. are all supported out of the box.
Vector Support: Better support for points, polylines, and polygons.
Control: You have the ability to add any new features that you may need. I've personally written three plugins for OpenLayers, two of which are or will be part of the source.
Debugging: Much easier to debug when you can step through the source code!
I would not worry at all about the long-term viability of the project. It is the premier open source client-side mapping library.
Are there any common pitfalls / problems I may encounter?
The biggest pitfall I've run into is working with the Web Mercator (Google) projection. It can be a pain to display vector data that is in a common and real projection like WGS 84 into an OpenLayers map using Google, Yahoo, and Microsoft base maps. The examples are your friend.
JavaScript Framework Compatibility
I use the jQuery framework for all of my work, and the only problem I've had is referencing jQuery after OpenLayers. Other than that, it's been smooth sailing.
Performance is great! The only issues will be with your map server or adding too many vectors to your map.
Are there maps available for many places?
Like I said, you can use basemaps from just about any source for anywhere in the world.
Is there any kind of API to display roads?
I'd check out CloudMade! The have converted the OpenStreetMap project into a map tile service and allow custom styling. I believe that you can style one-way streets (per your example) a particular way. The CloudMade Developer Zone.
Do you know any good tutorial to OpenLayers?
I don't know any tutorials, but there are a ton of examples in OpenLayers Examples
I hope this is useful. And I'm around Stack Overflow if you have any questions!
It's not necessarily a question of OpenLayers OR Google Maps. You can after all use Google Maps for your map background in OpenLayers. Some more specific answers:
Why OpenLayers?
OpenLayers can combine maps from different sources (Google Maps background, WMS overlays, vector data from KML or GML files or WFS etc)
You can style OpenLayers much more thanyou can Google Maps
Open source, you can check the source code when debugging
If you need high precision in the maps, use OpenLayers with a suitable map server backend rather than Google Maps to get a better map projection (Google Maps assumes that the earth is a perfect sphere)
Pitfalls
If you want to use vector (WFS) data from another server you need a proxy, due to cross site scripting limitations
Performance
Depends mainly on the speed of the map backend
Displaying many vector features (limit is browser dependent, but say > 200 on one view) takes time, but that is more a browser thing than a problem with OpenLayers
JavaScript frameworks
Have a look at GeoExt, which is ExtJS + OpenLayers, for example
Available maps
OpenLayers doesn't come with a map backend. You can use Google Maps, Yahoo Maps, MS Virtual Earth etc, or any WMS and WFS service tou have access to
I haven't seen much of a presence from OpenLayers users on SO but they're out there. The OpenLayers mailing lists are pretty active (I'm on Users and Dev and see anywhere from 50-100 emails a day discussing various things. You can search the lists from those links too.).
I can't answer all your questions but one thing I'll put out there is that OpenLayers and google maps aren't mutually exclusive. OpenLayers is a javascript library and you can use it to interact with google maps. Check out this example: OpenLayers using google maps. And here's the main OpenLayers examples page.
It really depends on what you want to use the map for. To simply plot points on a map, Google Maps will be fine. The map layers for Google Maps are also quite detailed. OpenLayers on the other hand offers far more functionality and is very extensible.
OpenLayers have lots of examples to get you started.
As for maps, OpenLayers is only an API so you need to supply it will map layers. The Google Maps API will be limited to the map layers supplied by google. With OpenLayer you can display pretty much any publicly available map service (WMS, WFS, TMS, WMS-C). A very good example is openstreetmap.org - (global streets map collected by the community). OSM can be added to openlayers as a TMS layer. Check out this example for instructions.
One point that hasn't been fully made here is that using OpenLayers avoids various restrictions Google places on the terms of service for its map APIs, including:
You can't legally use a Google map solely in a section of your site that requires payment to access, or for a private site that the public can't sign up for (e.g. a corporate intranet). (IANAL, but see Terms of Service, 9.1 and the FAQ)
You can't legally (or practically) use the Google API for offline applications (i.e. where the tiles are served from your own machine). Even if there weren't legal restrictions, Google makes this technically very difficult, while OpenLayers makes it easy.
Google reserves the right to shut down access to the API if you're showing a map with content it finds objectionable. The example given in the FAQ is a map of illegal drugs, which gives a good sense of the gray areas this restriction might cover.
See this FAQ and the Terms of Service for more details.
All that said, as a long-time Google Maps developer who recently started using OpenLayers, I feel that Google Maps has better documentation, a larger user community, and a clearer and more stable API than OpenLayers. So you have to make a trade-off somewhere.
I agree with all answers, but there is one very important point that nobody mentions.
OpenLayers and Google Maps have different targets.
OpenLayer is an excellent framework to display geodata, but Google Maps is a pool of services that include a framework to display geodata among other services.
So, Google Maps expose a lot services and features that OpenLayes do not have.
Some examples of Google Maps features and services are region localization, sensor detection (for device with GPS) and user localization, geocoding and reverse geocoding, street view, etc.
Some clients may refuse, or have strong reservations, about using Google Maps. They may have valid concerns that Google may introduce advertising or change the API without notice.
However Google Maps does have the benefit of integrating with other Google services (placemarks, adding photos, geocoding services).
As its the web you can always combine many different mapping services and APIs.
I have used both APIs. I make a software for corporations and this software requires mapping but not all clients have a GoogleMaps license, so I need to support both types of maps.
I have made a common API for abstracting the differences between them and let me tell you, some stuff is easier to do in one than the other. Like limiting the bounds of where you can pan the map to, it is a lot easier to do in OpenLayers, but heatmaps are easier to use on GoogleMaps (it is officially supported by google, unlike the available OpenLayers plugins).
OpenLayers support offline maps. Some of my users are in private
intranets without internet connection.
GoogleMaps has two absolutely must have plugins, MarkCluster
and Spiderfier that makes possible visualizing a huge numbers
of markers.
GoogleMaps InfoWindows are easier to use and have better
usability than the OpenLayers.Popups. These are the little windows
that can open when you click in a marker. Googlemaps InfoWindows are
also a lot more pretty by default, you have to do some CSS wizardry
with the Popups.
GoogleMaps has streetview which is useful sometimes.
GoogleMaps has more features that you might need. Although many
features are present in OpenLayers too, but not officially
supported.
Usually in the end you should go with OpenLayers because of the reduced headache you might get from licensing and bandwith usage from googlemaps. Both handle basic mapping (ie, displaying markers on top of a map) very well. Unless you can find a specific feature you need from one that is not present on the other you should go for OpenLayers.
See this for more information about googlemaps billing and when you can use it for free.
Also GoogleMaps has its basic geolocation type as 'LatLng' and Openlayers use 'LonLat' which drives me freaking nuts because I keep mistaking the order of the parameters in function calls.
In addition to those who mentioned speed problems, I would like to add that IE's VML renderer can get really slow with a vector layer with many features. One user mentioned about 200. That's about exactly what I can add before IE slows down considerable to the point of freezing. If you add features that are text labels, you can add half less, probably because internally each text label consists of two VML elements.
In Google you may create a custom GOverlay whose content is a "div", which gets rendered without problems in IE.
A couple of things I would add, from two perspectives: client usage and data derving.
Client usage:
What are you clients used to using currently? Change can be difficult.
How much functionality do you really need? OpenLayers has quite a bit, but if you are not using it...
Data serving:
Are you serving KML data? If so, both OpenLayers and Google Maps will work with it, and you are probably going to have to decide based upon client usage.
Are you serving other types of data services? (WMS, WFS, CSV, etc.) If so, then OpenLayers very likely has examples and support for it.
OL has a large fanbase and is perhaps the most used Opensource geothing used in the world.
You dont see that many threads and posts about it in this cyberplace because people here tend to discuss other kind of techs, like JSF and Mobile (non geo), not because OL is like struts.
However Ol has some drawbacks, mainly that it's so low level that you have to write lots of code to do common ops. That can work in the good way too, because as a developer a: you have all the code upfront and b: tweaking and customizing is very easy.
There are more sophisticated free geotools, but all they do is call openlayers and abstract some of the more boring chores.
So use it confidently. It's mature, robust and it's not going to die in the foreseable future. However if you want to speed up your developing process you should try the other tools that mount in top of it.
have a nice day

JavaScript Charts API: Flot jQuery Plugin OR Google Visualization?

I am looking for a charts library to be displayed on a website. I will use intensively this library (for area, line and bar charts mainly), so I prefer to secure my choice before starting implementing.
The list of website chart libraries that I have initially considered are:
Plotkit
Emprise JS Charts
Sparkline
Protochart
gRaphael
Bluff
YUI Charts:
However after some researches on this forum and investigations on the web, I have reduced my candidate list to these two libraries:
Flot jQuery plugin
Google Visualization
Which one do you advise me to use and why (if you have worked with one or two of them, please tell me your feedback)?
How do they compare one to each other regarding ease of use, performance and features?
Thank you
EDIT: Based-Flash Chart libraries were not eligible with my constraints
I will try to answer my own question after some several tries and researches about these 2 visualization libraries, here are my own list of pros for each solution :
Flot Pros
jQuery plugin : if you are familiar with jQuery (or if your apps is integrated with jQuery), it seems natural to use Flot
Offline visualization : you can test or have it installed into an internal website. Google Visu can only work if you have acces to the google website !!
Customization : this is basically a JavaScript file so if you are good at JS coding, you can customize your charts as your convenience. Also the Flot plugin system allows you better modularity
Google Visualization Pros
Documentation : awesome ! Examples for each type of graphs are available in the Google site
Easy to use : Really. Easier than Flot (that requires to somehow customize the div container)
Powerful : you have many sorts of graphs and features (zooming, interactivity,...)
Java and Python API : it can helps a lot for constructing the Data Table (at least for me, I can use the Java API)
Bottom Line
If you are familiar with jQuery, go with Flot. If you need for some reasons to see your charts offline, go with Flot. If you want full control, go with Flot.
If you don't recognize yourself above, go with Google Visu. It's easy to learn and implement, very well documented and extremely powerful.
Not in your list, but I would recommend you have a look at Highcharts http://www.highcharts.com/
Highcharts is SVG, and as such, it is much more dynamic than Flot, you can restyle graphs with CSS, attach events, perform animations, etc...
It is also compatible with IE6 and it works server-side (thx to Batik)
I'm currently building a graph-intensive application, and chose Highcharts after lots of benchmarkings. I don't regret my choice.
The piwik project uses the Open Flash Chart (not on your list).
It's easy to use, has plenty of working examples very user friendly.
I am a user of Flot, and a big fan. I use it in a Grails application, and use stacked bar, line, and pie charts, including time-series and a bunch of interactive capabilities (i.e. turn off / on series with checkboxes, etc).
I found it to be a pleasure to work with overall, and feel the API is quite well developed (I saw that a bunch of other JS charting libraries adopted the API, so you'll even have some flexibility to move to another kit in the future). From looking at the google API just now for a minute, I think I like flot's better (although google may have ability to pass in a series as well, didn't see it from samples).
They just came out with a new version a few weeks ago (0.6), that supports plugins, which I expect will stimulate more innovation.
So I think part of this depends on other technologies you are planning to use. It seems like Visualization is integrated with GWT, so if you are thinking of using that, Visualization is the way to go. On the other hand, if you are thinking of using JQuery for AJAX, then Flot might be a more natural fit.
When I was making my decision to use this, it seems like Google didn't have interactive visualizations, only google charts (images), which is one of the reasons I went with Flot.
There is jqPlot (http://www.jqplot.com/), an open source project which looks good. Based on jQuery as well. I will give jqPlot a try, jQuery flot seems to be inactive.
Not in your list, but very impressive: ExtJS 4.0 charts

Categories

Resources