Interactive map with regions? - javascript

My friend and I are trying to making an interactive map the goes to a new page based on the region clicked. We might try image mapping via dreamweaver but want something with a little more flair/interaction ie: glowing on hover, highlights, ect.

Look into KineticJS. It's an HTML5 Canvas library that allows you to redraw shapes, apply effects, tell when you click on shapes, etc. You can use the on function to go to a new page when you click on it, and there's probably something for the glowing.

I use http://jvectormap.com/
There are maps for lots of countries and you can add your own quite easily.
Here's an example: http://jvectormap.com/examples/world-gdp/

For me imagemapster is one of the best for this task, have multiple functions and a well documented page

Related

Connect off canvas menu with markers

I'm working on a mapping project and I need to mark some building to display some data for that specific building. Basically, literally I'm trying to build something like this
I have found off canvas project and I'm using it for mine map, here is a working JSFIDDLE example.
For the map I'm using openlayers3, openstreetmap, I'm not using google-maps and I'm not interesting in using it, I'm just referencing on this picture because they have a nice example of this off canvas display data menu.
As you can see I have marked different area around NYC and I would like to, when I click on the example I trigger off canvas menu (don't mind off canvas nav-bar style it will change) and display proper data for that object.
Mine question is:
What is the best way to do this, I would like to learn how to glue this off-canvas to mine map, so markers can trigger off-canvas?
I know that there is a hidden <input type="checkbox" id="nav-trigger" class="nav-trigger" /> who I displaying as hamburger icon which is used to trigger off canvas menu. But I do not understand how can I connect all markers to the canvas to display different data for each building.
I would like to learn how can I do this? It will be great to use javascript or jquery for this, I don't thing that openlayers3 have this kind of flexibility, but maybe there is, I'm little confused about this, can someone help me build this, thank you.

Best way to go about making "simple" line graphs with a very light footprint? jquery? canvas?

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.

How can I access, then animate an existing leaflet map polyline using Javascript?

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.

Imagemap layer on top of united states map... jquery rollovers

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

Tickets places selection with JavaScript

I need to write an web page where users can select a free seats in a different halls for an events. I prefer not to use flash and make it using only javascript. Is there any library or example that can help me do it?
Edit: I'm asking how to create a client-side UI
I don't know a library, but this actually might be a case of using image maps in a semantically-correct, compatible way. The <map> and area tags are valid even in HTML5, and provide you the convenience of the DOM.
I am actually after this too for interfacing to civiEvent, however, this seems to be nebulous 'roll your own' territory for some reason.
The following script + tutorial might give you some mileage:
http://dayg.wordpress.com/2008/04/17/php-101-a-simple-seat-reservation-system/
Please update this thread with whatever you find!
If you want to go fancier than an image map, you can create a table with one chair per each cell as the physical arrangement looks. You can change each chair's picture according to the state of the seat. You could get fancy and have the chairs image change to a highlighted color, say yellow, when they hover over it.
Image transitions are done very easily with JQuery, a Javscript library. Here's some resources for rollover images with JQuery : http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html
The bad part about this is arranging the chairs, but JQuery is the easy part and it will make your page look fancier and more user friendly. Because with an image map, the actual image can't really change itself to show that seat 4321 has been taken (but you can certainly divulge this information via other means)

Categories