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.
Related
I've read through the documentation of PDFMake, and PDFKit, and WPS: PostScript for the Web but haven't been able to find any reference to anything other than background layers, from looking at various documentation, it sounds like Optional Content Groups are what I need, but how to handle them using Javascript, I've no idea (I've found little about OCG and layers generally, which isn't sounding promising)!
Any suggestions would be greatly appreciated!
Having tried a few libraries, PDFKit appears to be the best bet, it doesn't discuss layers, but each object you add does exist as a layer, and placing items on top of each other will layer them.
Can anyone suggest a good javascript library for displaying and navigating huge images in HTML?
I need a way for my users to navigate some custom maps[1], with zooming and dragging similar to Google Maps. I need the solution that works offline as I'm embedding it in an iPad html (phonegap) application[2].
I actually already have this working (mostly) with PanoJS. But it lacks a way to float widgets above items in the map, e.g. Float a button over an area of the map that can be clicked to navigate to somewhere else.
I am able to split up my large images into tiles. I'm just looking for a slightly more advanced viewer than PanoJS, without having to build it myself :)
Anyone got any ideas? Some have suggested OpenLayers. War stories?
Thankyou,
dan
[1] The maps are stylized and don't map to real world coordinates.
[2] All the images and tiles are supplied with the application and are loaded locally.
In the end I went with leaflet.js. This was able to give me the map, layers, markers and the other bits and pieces I needed. (http://leaflet.cloudmade.com/)
I spent quite a bit of time with ModestMaps.js along the way. That's a great library, but quite low level. Leaflet ended up being the best mix.
Thanks everyone for their help.
I was going on through certain ways and codes to draw charts and graphs, I found many libraries some free some commercial etc.,but at last i draw it on canvas,One thing which I found interesting is to draw with the help of javascript and HTML5.
For reference:
enter link description here
I have no idea how to do this dyanamically(not with the fixed values),I really want to use it,but i don't know javascript or HTML so i am unable to go ahead,It would be a great help if you would be able to tell me, how to do this with dynamic values.(either by accessing the database or any other way if possible).
You can access db in java and inject results to the javascript by using
webView.loadUrl("javascript:refreshData(someDynamicContent)");
Where are you getting your "dynamic values" from (the user or a database)? Regardless you will need to know at least a little html and javascript. Google Charts has some really nice libraries for this.
On Google some time ago I read an article on optimizing image use. Basically there is a way to combine multiple images...say small icons into one larger image and then use a method to display the part you need for ecah part of the page. Can anyone point me in the right direction on how to do this. Cant' seem to find it on google at the moment. Thanks!
The technique is called CSS Sprites, knowing that will make it easy to find information about it.
You can read about it for example here:
CSS Sprites: Image Slicing’s Kiss of Death
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This is the best website for this. http://spriteme.org/
It will analyze your website and advise you on what images can be 'sprited' (is that the correct term?) and will generate the new CSS for you and the image(s) sprite(s)
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