How to implement google-maps-like zoom-and-pan system in web? - php

I'm writing a ticket-shop-system atm for reserving tickets for various concerts.
What I have is a php-backend and a webpage that shows a .swf with some actionsscript-3 code in it, to draw in flash some sort of map and make available seats clickable for the end-user.
The problem with this solution is, that there are quite large halls and just making the seats smaller isn't the right solution.
My next idea was to make a google-maps-like interface, so that users can pan and zoom and things like that. But I can't find any information about doing something like this, whether it'll be flash or javascript or something else...
I would appreciate any information regarding this topic!
Thanks in advance!

Google maps allows you to use their system and provide your own custom map too, so you can overlay your seating chart and nothing else. You can read the documentation here.

There's a sample pan-zoom flex application you might find helpful:
Source Code for Pan-Zoom Flex Map.
Hope that's helpful.

Take a look at Seadragon (http://seadragon.com). Might be an interesting way to expose the functionality.

Related

Project Research - Zoomable, Scrollable, Hoverable High-Resolution Images

I'm doing some research before I start a project, and I want to know what the best method of going about this project is before I begin. Any help I can get would be much appreciated, and I'd be happy to provide more information if necessary.
Basically, I'll be given a number of extremely high resolution images to display to users. I want to create an interface whereby the user can scroll around the image and zoom in, as well as hover over parts of the picture and receive some information about that specific location. Also, I would really, really like it if I could do it without using Flash in any way, both because I don't like Flash and because it wouldn't work on i-devices.
Here's an example of the zooming capability that I'm looking for, and here's an example of the hover capability that I'm looking for (sorry they're both biblical manuscripts, don't mean to get religious on y'all, these were the best examples I could find!)
Anyway, so far I've found this spiffy script for zooming, but I haven't found anything for hovering yet (another example of what I'm looking for is something like when you tag someone in a picture on Facebook - if you hover over their face, their name pops up). And to make things all the more difficult, I have to figure out how to make them play nice, so zooming in doesn't break the hovering capabilities.
So my questions are...does anyone have any experience with anything like this? Do you have any suggestions for projects (open source is far preferred) that allow for this kind of thing? I'd really appreciate any help you fine people can give me! I'll be publishing my findings and code afterwards.
I think the technology behind Google Maps (and other such technology) would be the way to go. With Google Maps API you can use your own custom tiles instead of the map tiles. You could then set boundaries on the map to stop the user navigating away from your available imagery. Lastly, you can use the API to specify the coordinates for polygons on the "map". These polygons are great as the allow you to have hover/click events which should provide you the functionality you're after.
A good article I found on something similar to what you're after can be found here: http://forevermore.net/articles/photo-zoom/
Hope this provides some direction and sounds like a fun project that you're about to embark on :)

how to create Mail Chimp style charts and graphs

Take a look at this blog post mail chimp released a few months back:
http://blog.mailchimp.com/chimp-charts-are-here/
The ones you see there are pretty amazing looking, and they function great. It uses Flash.
I'd love to know what they are using to make that happen, is anyone aware?
Even better, they also have other amazing looking charts that are NOT flash... take a look at this:
This is the chart type that I am far more interested in. The graphs flow up when the page loads (assuming jQuery) - and bounce into place. Then, you can click them for links to more information.
Does anyone know if this is created fram scratch by them, or if there is a similar package that's available out there?
There are literally hundreds and hundreds of premade chart libraries for JS (as well as Flash). Do a simple google search and you are bound to find what you are looking for. Otherwise most of it can be easily replicated by hand with jQuery (if you want them to be dynamic).
However, if you want to do curvy charts yourself with JavaScript then it's either HTML5 Canvas, http://raphaeljs.com/ or similar "technologies".
Random search hits on google:
http://www.highcharts.com/
http://g.raphaeljs.com/
http://javascript.open-libraries.com/utilities/chart/20-best-javascript-charting-and-plotting-libraries/
http://www.webresourcesdepot.com/free-javascript-charts-library-js-charts/

drawing "good" graphs in php

I'm intrested in the best way to draw a graph: i have a network and i'd like to draw a map of it. I know how to use gd, but i don't know how to make this graph good for viewing: i mean no line crossing etc.
So, i guess there must be some tools or even php classes for doing this (maybe for graphviz dot?).
Any help will be great for me!
Well, maybe you could use the PEAR Image_GraphViz class?
Personally, I'd off-load the work of drawing the graph to the browser.
A good Javascript graphing library such as gRaphael can draw the graph using vector graphics (ie SVG), and can look much better than most static images generated by PHP, and can have features which static images can't, such as popups when you roll-over data points.
If you do it this way, all your PHP code has to supply is the graph data.
Hope that helps.
As you've laready hinted at, the quickest and simplest approach is to use graphviz. Given the abstraction provided by the dot language, there's little point in providing a PHP abstraction layer on top of it.
Use google!
http://code.google.com/apis/visualization/documentation/using_overview.html#load_your_libraries
They have great graphs. You just need to present the information in the right matter for google to understand. It's pretty simple.

Can anyone recommend a good way to display stats on a web page?

I want to display statistics on my site - we have the figures, but would like to display them in some way that looks prettier than just displaying the numbers.
Has anyone done this before, and do you have any recommendations for software we could use? Obviously open source would be ideal, although we might be willing to pay a small sum - they're not complicated stats though, so something simple would be best.
The mockup done by our designer is based on Google Analytics, but I think that may be a bit more than we need.
Essentially, there are 4 numbers, which change over time, so we would like to plot graphs showing each of them.
Thanks!
If the mockup is based on Google Analytics, than I would reccomend the Google Chart API. Another advantage could be that integrating this API is really easy (you have to load an url where Google makes the plot for you, so no need to install any library on server/homepage).
You could make static, image based plots, and interactive ones also.
I'd start using http://code.google.com/p/flot/ or possibly with http://www.highcharts.com/
I would recommend using jpgraph http://jpgraph.net/ or graphpite http://graphpite.sourceforge.net/

facebook status bar

Anyone know a good tutorial of how to make the status bar found in the new facebook? the one on the bottom. looks really cool
i was thinking it was written in either ajax or jquery. but not sure.
Here are some useful links/plugins that might help you:
Positioning the footer
Enable drag/drop of things (like applications)
Tooltip (when hover)
And for the interaction with the server (for new events etc.) you might use the AJAX functionality in jQuery:
In order to have it always be in the bottom, that is more of CSS than javascript.
I think you would get better answers if you were more specific. For example, I would want the answer to revolve around as to how the chatroom works on facebook. Is the javascript request being sent every second to check for new messages? or is there another protocol being used in order to have instant messages?
It's not clear what your are looking for: bar's design or it's functionality. If your are speaking about design you should look into css positioning (absolute). If it's about functionality i suppose that there is some kind of ajax javascript which checks every x seconds if there is change of state, and if there is go deeper and find out what to load.
Why not just download the Facebook source code and take a look at how they do it? They open sourced a lot of the stuff they use/created/enhanced.
Soh Tanaka just put out a great step-by-step tutorial on how to re-create the Facebook Status Bar:
Here's another good starting point: http://www.ben-griffiths.com/project/jquery-position-footer/. If I remember correctly it works in FF & IE & Safari
I looked through the jQuery plugins, and Googled the topic for you. All I could find was this which isn't exactly what you want, but it is a good place to start. With some style changes, and a little tweaking it could easily look exactly like the Facebook bar.
Not sure that this is the type of answer you were looking for, but i've been looking for the same thing and this code seems to at least show how it's done.

Categories