Greetings,
I'm looking for a quick way of slicing the map of a country by regions and when clicked on a specific region, showing some gui with the info of the region. I am looking for a quick framework, plugin or such to achieve this swiftly. I know it can easily be achieved using flash but I want to rely on javascript instead.
Cheers
have you had a look at Seadragon? I know it will do the slicing and the zooming for you but you'd probably have to extend it by yourself to get an info window to pop up.
You may have a look at http://www.openlayers.org
Have you checked Web Maps Lite from CloudMade?
http://developers.cloudmade.com/projects/show/web-maps-lite
You may just add CM.Polygon for each region, and then processes onClick event.
Combine these two examples:
http://developers.cloudmade.com/projects/web-maps-lite/examples/info-window
http://developers.cloudmade.com/projects/web-maps-lite/examples/polylines-and-polygons
Related
Background
I am tasked with developing the front-end to an analytics product that presents the information to the user in a customizable dashboard like the one used by Google Analytics:
- Dashboard is comprised of draggable widgets arranged in a grid layout
- Widgets have a drag handle which can be clicked by the user to start dragging
- Widgets can be re-ordered by dragging and dropping the widget
Question
Part 1. Using jQuery (or any other open source Javascript API) can anyone explain to me how such a feature is implemented, from a high level overview.
Part 2. Can you recommend any resources for me to read that may be relevant to implementing this feature, or any foreseeable related features? (books, links, api docs, tutorials)
EDIT This one looks even better and more maintained! GRID by UberVU
Next one on the list is gridster.js
PS: I know this is an old thread but since this question is the first hit in Google I think its worth listing some newer libraries.
You can easily implement this.
You will get required info from
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
and
http://james.padolsey.com/javascript/inettuts-with-cookies/
First what comes to head is jQuery UI.
Use HTML 5
http://html5doctor.com/native-drag-and-drop/
You can find a lot of info here:
http://jqueryui.com/demos/draggable/
Use jQuery, and get on the Demo & Doc page to see how D&D is being used.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
If you wanna dive into a Widget Page/Dashboard architecture, and would like to see how others did it, take a look at Omar AL Zabir's book
http://www.amazon.com/Building-Web-2-0-Portal-ASP-Net/dp/0596510500/ref=ntt_at_ep_dpt_1
I am pretty sure this one is going to make you happy!
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
The tip text which highlighted in below image serves wells for giving some instruction to first time user. And I notice such pattern several times in different web apps, I guess there must be some javascript libraries to help generating such tip visualize? But I just fail to find the correct keywords to capture them. Any one give some suggestions please?
[1]: http://farm7.static.flickr.com/6071/6031668602_9c7fcf70be_m.jpg ""
------------------updated----------------
Thx for the suggestions for recommending jquery tooltip plugins.
But other than tooltip widgets, what this questions requests is a more specified “tip plugin” which could be used to generate a transparent tip image which contains simply some words in casual font and an arrow points to parent context. Yes, this is a tooltip but not a ordinary tooltip which comes in the form of a box or bubble.
Traditional tooltip are useful for displaying detail info on the fly, while the tip I mean here performs better to attract attentions to user for providing some quick tutorial instructions without adding too much visual noises**
You can try this: http://codylindley.com/blogstuff/js/jtip/
This plugin is great for tooltips in jQuery: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Demos are available here.
You are looking for some sort of tooltip plugin. Here are a few http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
I've been testing G+ for a little while and i find the friends drag and drop into circle thing has a verry good effect (don't you think ?)
I was wondering how to achieve a similar effect when drag & dropping user into a circle using jQuery. It may give me a starting point in order to achieve this for a tree or a square. :)
Thanks
An opensource example of this is Circle Hack or Facebook Circles, source: https://github.com/voloko/facebook-circles
Which could be customized for your needs (unsure about licensing though)
It uses UKI.
If you want to achieve the same effect using jQuery I recommend using jQuery UI
You should try this http://www.9lessons.info/2011/09/google-plus-style-drag-and-drop-adding.html
what is the quickest way to make clickable imagemap of the US? Is there any jquery plugin available for this?
Thanks
My plugin, that offers some features different from the others mentioned: http://www.outsharked.com/imagemapster
But generally speaking if all you want is a "clickable map" you don't even need jQuery - just use an HTML image map, and bind a click event to an area. But using the plugin offers feature like area highlighting/selection/grouping and so on.
Try to use this jQuery plugin: http://jvectormap.owl-hollow.net/
I created a mapping solution using SVG and jQuery which is accessible at
Makeaclickablemap.
Creating and saving a clickable US map is free, but it is also possible to commit edits later and there are also many other maps available.
Just use one of "image map generators" there are a lot of them in the internet. You don't even need JS for that. Here is the link to one of them: http://www.image-maps.com
Hi found the thing i was looking for here - Using JQuery hover with HTML image map
thanks :)
I would like to implement some "Drag-select" functionality into a project of mine but i'm unsure how to implement it.
The creation of the selection area is not a problem, it's the capturing of elements within the area itself which is confusing me.
A jQuery example found here.
Selectable Demo
If you can use jquery there are some plugins that do this operation. Anyway you can check if the position of the element is contained into the selection area coordinates and, if it is, you select it.
Script.aculo.us has a nice implementation of drag-n-drop, but then you have to include this rather large library. Or you could investigate how they done it for that matter, since its open-source.