I am trying to just make a clickable united states map in html. I think the best way is to create an imagemap with my US image and then just use jquery from there for rollovers and such. Does anyone know the best way to make imagemaps with irregular shapes (states in this case). I was looking for something in photoshop but seems like they used to have something for that but now they don't.
Are you just trying to find an image map of the US? There are many online already made for you. For example wikipedia commons.
Here's my jQuery plugin for doing stuff with image maps with a demo using the wikipedia commons map.
I also made a simple online tool to scale image maps which is useful if you found one for something you need to use but it's too big or too small.
Dreamweaver might be you best choice: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7c13a.html
Related
I try to display a big world map on my website with Javascript and/or Jquery.
The particularity is that I have to set and draw specific region with a custom list of countries. Exemple :
All the countries with French language (France, Belgium, Switzerland etc...)
All the countries with Spanish language (Spain, Columbia etc...)
Then, the visitors would be able to click on these custom areas to get more info. I found a lot of plugins (Google GeoChart, Mapael, Kartograph, jVectorMap) but no one seems to serve my purpose.
I'd like to avoid HTML image map.
Thanks !
Question is pretty broad but I will try my best:
Your best bet is to use the JavaScript API and embed a map in a div, from there you will have access to Google Maps API.
In terms of your implementation, I guess you could go a couple different ways, you could show 2 different markers for Spanish and French countries with click listeners and more info on the country, or you could get more fancy and draw polygons/polylines. If you go Marker route, it's easier so I would recommend that.
I'm trying to create line graphs like the one in the image below.
It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don't need pie charts or anything like that, just line graphs like above.
I'm just not sure how to go about it best, I don't know canvas, and i'm assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.
I'm wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?
All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i'm just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.
Thanks so much.
ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i'm not going to have so many of them that I need a huge jquery plugin, just something small.
Also: I'm trying to make it so it's responsive, and shrinks to fit a phones screen.
SVG sounds just like what you are looking for. You can use a library such as JQuery SVG or Raphael (based on Prototype.js) to make it easier.
Google Chart API is very solid and easy to use. Here is an example of a simple Line Chart
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
You can also Interact with the charts you create:
https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity
https://google-developers.appspot.com/chart/interactive/docs/events
I don't know how lightweight you could possibly get to do what you want, for that kind of thing I would normally use flot.
If you are not planning any manipulation on the graphs. Use a PHP library called pChart
Check out Google Charts. It looks like the perfect thing. It doesn't use flash, so it's smaller than some, and it has tooltips. As a bonus, you can use live data on the web.
I have been trying to use Jquery Image maphilight plugin but can't becoz I dont know how to find coordinates of parts of an Image.The image that I want to use is http://i51.tinypic.com/35bsgw8.jpg
IN this image I want to highlight every block which has number on it, but problem is finding coordinates.Please help me
Thanks
Anks
Alot of commercial software has this feature baked into (like Dreamweaver), but if you want to do it for free you could use an online tool like this:
If you just want coordinates: http://www.pangloss.com/seidel/ClrHlpr/imagemap.html
Or something a little more all-in-one: http://www.maschek.hu/imagemap/imgmap
You can write a javascript script to get the mouse coordinate and record it.
Can anyone suggest how I can access then animate the red polyline here using javascript:
http://gymloop.lukem.co.uk (login: User2/pass2, then select 'Challenges')
I want to animate the polyline from the first marker to the end of the red line (think Indiana jones but without the map moving and NOT using google maps). It needs to be dynamic as different users will have travelled different distances.
I need thew solution to work in FF, IE7+ & Chrome
I am using cloudmade's leaflet maps and am keen to avoid using google maps.
There is further information in my related question at gis.stackexchange
I've checked out your code and it seems you're using the leaflet API to draw the lines. Because of that, I've decided to write a somewhat generic function that animated those kinds of lines. (By the way, I'm confused why that API uses path tags instead of line tags, but I've rolled with it.)
Here's the code: http://jsfiddle.net/mihaibirsan/Wzvre/
I'd like to polish it a bit more, but I wanted to put a foot in the door for that bounty. :D (I'll get back to polishing and post an update in a few hours, once I've done some other work.)
I highly recommend jquery_svg plugin. I've been using it and there are plenty of features, including animation, text on path, user interaction.
i would load a huge image in my web page (8Mpx x 5Mpx). I thought of creating a simple mechanism on the style of google maps..
But, honestly, I do not have very clear ideas on how to implement it.. any advice on how to structure it?
in particular, I have many doubts about how to handle the drag with the asynchronous loading of the image to vary the portion of the images displayed
Thank you in advance for your help : )
An easy answer would to be use Google Maps.
It's a rather advanced topic, but it shouldn't be any harder than doing it by hand.
Here is more information
I've used Zoomify's products in the past to accomplish this. I work on a team that manages a few datacenters, so we have some gigantic floor maps (drawn up in CAD, exported as a huge image). I take those maps and convert them to what I consider a "Google style map" using Zoomify Express (free).
More info here: http://www.zoomify.com/express.htm
I realize this is an old question, but I'd like to suggest http://leafletjs.com/.
I can only think of some sort of tiles. You break down the image in several parts ( tiles ). Then you only draw the one that are in your viewport.