I have an overview drawing of a plant and I want to show the important pieces of equipment. Each piece of equipment would show some description information and have a link whenever it is hovered over.
I want the whole thing to function similarly to Google Maps where I can zoom in and pan around.
I have been trying to get the basic pan and zoom functions to work in Flash but are there better ways to develop this? Maybe something that doesn't involve Flash?
If you want to go for a flash-free, google maps-free plugin, you can combine http://wayfarerweb.com/jquery/plugins/mapbox/ with some jQuery for the mouseover behaviours.
It of course depends on how comfortable you are using jQuery, the implementation of the map itself is quite easy (it has zoom and pan), and the hovers are not complicated but will require more research if you haven't worked with javascript before. The advantage is that you will have complete control over it...
Related
This is my first post, wooohooo! I've been using stack exchange when I needed information but usually someone had the same problem as me and I didn't need to make a post. Which means this website is really good.
Now turns out I have a pretty unique problem.
Please check out http://gaia.tru.ca/birdMOVES/
You will see a website with a google map. It is connected to a db which will be automatically updated.
The purpose of this website is to track how birds feed. There is going to be bird feeders equipped with NFC all over the world to track birds equipped with RFID when they feed.
I am taking care of the front-end, the web app for visualizing.
This is a work in progress so try not to care about the looks of it.
Apparently everything was written in RApache because the person who made everything this far is a Geography teacher(Not a lot of programming background, I had to refactor his code and learn R because it wasn't in my array of known languages.)
My client asked me to add time animation to his map. Feasible with the help of Google Earth.
I made the existing R code generate a tour. It works perfectly and even shows on my map.
Here is the address of my dev server: http://thelab.dyndns.org:1080/birdmoves/
You can see that there is an extra check box for time animation. If you check it, the tour will appear as an object on the map (no way to use it whatsoever right now).
So what I'd like to know is how do I make it work? How do I make it autoplay when the submit button is pressed? With standard google earth controls for rewind, pause and fast-forward. And independently from the google maps without tour?
This is intense. I have the feeling google earth isn't going to work because they deprecated all their gadgets.
I'm on the clock and I need help.
In case you were wandering what eventually happened:
We ended up making a hybrid website where the static visualization is within Google maps using kml and the time animation is within CesiumJs using CZML.
CZML is based off JSON and can be used very similarly to kml.
The api is also very nice, it only takes one line of javascript code to get a map running on an existing server.
To implement time visualization CZML supports putting multiple consecutive values for almost any property(like position, to animate movement, or even color to change colors) and takes account of time.
Also very nice, CesiumJs supports animated 3d models!
If you're interested http://cesiumjs.org/
It also has a lot of support, documentation and tutorials... etc..
It's being maintained by professionals. I really recommend it.
The Google Earth API got deprecated and will not function by December this year which is not a viable option for a long term service. So cesium was the only option for this specific project.
Cheers
I need a component based on an HTML5 <canvas> which will behave very much like Google maps.
NOTE - to clarify, I am not looking for a maps component, but a generic image zooming/annotating component that behaves like Google maps!
It needs to do the following:
draw an image
draw some shapes over the image at certain coordinates
have smooth pinch-zoom on the image, ideally zooming in on the spot at the centre of the pinch on the screen
have the image be draggable when zoomed-in so you can change the area of the image the viewport is looking at
redraw the shapes at the same coordinates over the zoomed portion of the image, so they remain the same size no matter the level of zoom
I thought about how I would achieve this, and decided I'd probably do something like the following:
use a library like jGestures or Hammer.js or Sencha Touch to detect pinch and drag gestures
use the context.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh) function to implement image zoom and positioning based on the drag and pinch events
keep a track of the zoom level and viewport position so the shapes can be redrawn at the correct coordinates on the image every time it is dragged/zoomed
perhaps use a loop with setTimeout() to make the zooming/dragging smoothly animated rather than all-at-once
However I quickly realised this would be pretty complex to write from scratch, even using a library to handle the touch gestures.
I started Googling for an open-source implementation of such a component, but the few I found didn't have the full feature-set, seem well-supported or have good reviews.
I find it hard to believe that a good open-source implementation of a component like this isn't out there. This is such a common requirement in mobile web apps, and there are already several SO questions around how to implement something similar - though most of these are from a while ago so maybe something exists now that didn't then?
Can anyone point me in the right direction?
I have heard good things about: http://www.openlayers.org/ and have seen the results of it being used (Intranet project, nothing public - sorry). However, I have not used it myself.
I need to build a custom interactive web map of my country with all it's regions (Peru). Which tool or technology would be the best way to go?
The idea is to have a map that shows the population of each region with a color scale: the more people the region has, the darker it's painted. Also I need to display some information as text and pictures when I click each region as the maps zooms in.
I've seen around and there are lots of "pre-developed" tools that can be customized but I need to build my own. Flash is already discarded. I was thinking of Java applet but is just an idea.
Thank you for your answers.
Here is the VectorWorkz GeoChart jQuery plugin, which are readily compatible with all major web-development platforms. It allows you to create heat map based on some data, you can bound your data to the regions so that region color will change when bounded data changes, it also allows you to add label text and markers into the map, adding image markers also possible.
I would not use a java applet, as seo searching of the applet will not happen. Who cares if it's a great applet if no one knows about it?
I would check out D3. I am trying to use it myself as we speak, but I have the feeling you can map your data to it quite well.
I was taking a look at this example, http://gardengnomesoftware.com/samples/pano2vr_3/mozart/ and I was really interested in how it was done.
Do you think it would be complicated to develop such a function using one of the webgl engines out there? Is the panorama image just a texture on a cylindrical model? How is the panorama "cut?"
Perhaps it is just a cube with the images as a texture? You can kind of see the faces when it is loading slowly.
Yes, in this case it is simply a cube that the "camera" is centered in. It's basically the same concept as a skybox in many video games.
How to create a cube-map from photos the way they've done isn't something I have experience with, but the wikipedia article links to some tools that may help, including Hugin
Could someone give me some information about whether Google Earth or Google Maps supports Multi - Touch or not in Windows? Where can I find the relevant information from?
It would be a good idea to let us know if you're talking about the full desktop Google Earth (ie. with the COM API) or the thin client web based app.
That being said -- neither versions support touch events natively. Both applications are extremely "mouse heavy" and do virtually all interaction via the mouse. You basically have to map all the touch events to mouse events and go from there. This isn't exactly easy, and requires a lot of low level WinAPI programming -- so it might be easier to get some overlay that does the mouse translation for you.
I personally haven't used the wrapper that Kevin posted, but it looked interesting -- so that might work for you.
EDIT: Kevin's suggestion uses TUIO, which is a pretty popular way of going from touch --> mouse events. In my experience this doesn't do a very good job for Google Earth though, which relies on your typical "mouse down, mouse move, mouse up" patterns ---- this can be done in TUIO, but the actual gestures to get mouse down/move/up actions are clunky.
-- Dan