We want to build a google map liked javascript library to show our map data(we can not use google map or yahoo map).
We have done 60% of all the work,we can display the map tiles(img) according to user's drag operation.
Howver we found some problem:
We have a container(div element) to fill the tiles,when use drag on this container,we will do some caculatioin to see if new tiles should to be loaded.
It works. But it seems that when image are loaded,we can hardly move the mouse until imgaes are loaded completed or error.
It seems that the image load thread and the event handle thread is the same.
So any idea to fix it?
Multithreading in javascript exists, but it's still quite new. https://developer.mozilla.org/En/Using_web_workers
Related
I was thinking of uploading some huge images onto my webpage and figured I could possibly optimize the load using a special image viewer with zoom functionality. As I've understood from long ago is that browsers have certain limits when it comes to image dimensions, and possibly memory as well. The workaround for the simple task of just displaying the image on a page would be to resize it server-side in PHP and display that.
However, with the idea of allowing zoom capabilities so one can look at all the little details (essentially seeing the picture as 1:1 scale), the problem I'm having is being able to provide that "zoom" quickly. As I understand it, a PHP script is run once when called, then cleared from memory when done. I made a test with a 40MB picture and imagecreatefrompng(); took 5 seconds, meaning each time a client zoomed (and panned), they'd have to wait 5 seconds before the image is updated.
The question becomes if it is possible to keep a PHP script running and have its memory preserved for the duration it's needed? Like when a client clicks on a thumbnail, a call goes out to the PHP to load the image and it returns the resized image, but remains active and retains the $img in memory, waiting for more instructions. When the client zooms, a new call goes out to the PHP with the dimensions needed, and instead of having to reload the image it resizes and crops the original $img it still has in memory. When the client is done by closing the viewer, tab or browser, a call goes out to the PHP saying it's done which triggers it to imagedestroy(original);, clear memory, and stop.
(maybe have some kind of timeout for cases when the client unexpectedly shuts down and no "stop" signal is sent)
As you are having really big images I would consider creating tiles once the image is uploaded and then use a JS library to handle the display and zoom functionnality like most map libraries. OpenSeadragon is typically one of these.
For the tiles generation, you could use Deepzoom or Zoomify as they are made to work with OpenSeadragon.
Probably impossible without using an API, but I'm going to ask anyway because it would save me so much pain and tears.
Is there a way to give a googlemaps marker a z-index without using the API? I've got the plug-in called Wild-Googlemaps implemented on my wordpress site. And I've created a googlemaps div, with an overlaying div set to opacity:0.7 for styling purposes.
Now I've lost the ability to click the marker, so I need to somehow change its z-index.
Anyone had this problem or has any ideas? Much appreciated.
Thanks in advance.
You cannot do that without accessing API.
By default all markers are created as a part of a map canvas and you cannot access them (they don't belong to the DOM tree). You could do that after turning off optimized parameter passed during creation of the marker (take a look at
description of marker parameters), but this require access to API.
As you can see from this jsFiddle, I have a responsive google map thanks to this stack overflow question.
Now the problem is to have the map remain centered on the marker on different viewports and browser resizes.
I have found an answer here with the following code:
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(homeLatlng);
});
However, since I am still not very good with jQuery and javascript, I have no idea how to apply the event listener.
Does anyone know how the event listener would be applied?
I don't think your second code snippet will work in conjunction with the first as you're embedding your map using an iFrame. This means you have no access to the map to manipulate it via its API (which is what the second code snippet is attempting to do).
I'd suggest you take a look at the Google maps API 3 getting started guide which will give you all the information you need to get going. You should be able to combine the 'hello world' example with your responsive CSS and the event handler above to make the map do exactly what you want.
It's a really intuitive API and the documentation is fantastic, so I don't think you'll have any trouble. If you do run into difficulties you know exactly where to come!
I'm running a Google Map which loads png images from server, stores them in an array and when needed, creates and shows animation of these images. As they are png images, I have issues with IE transparency support. I know about IEPNGFix.htc script, but I don't think it can be used in this situation. From what I've read it is only applicable to DOM elements. Is there a way to apply png transparency fix for these images?
Google doesn't help neither (although i would expect this to be a common problem). If you have any idea how to solve this, let me know.
You can call PNGFix on any element after it has been added to the page. See here:
http://pjdietz.com/jquery-plugins/pngfix/
You will need to hook into the event which is fired after the image has been displayed on the google map and then apply the pngfix to that new element.
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.