OpenLayers Map breaks when open developer tools or download something - javascript

im using Openlayers 3 for a while, and i keep this problem.
When im using Chrome, and open the developer tools or closing it, my OpenLayers Map moves such a bit, the same goes when i download something. Of course this does not make bigger problems, but one of the functions in my map is to make zoom by bounce, and if the map is moved like i said the bounce does not go to the right place, it goes a little close.
This is an image before opening the developers tool:
before opening
And this is an image after opening the developers tool:
after opening
Hope someone can help, if need more details just tell.
Thanks!

Related

Image Slider Effect that respond to mouse movement

I'm looking for a way to implement image effect like the one seen in this website -> http://62models.com/ Is there any existing libraries or can somebody point mo to a right direction for adding this to a web page.
In the development toolbar (Hotkey: F12) on the network tab you can see the files that are loaded when you browse at the site.
I looked through them and found main.min.js which included multiple banners from different javascript libraries. Looking them up I think the page uses PixiJS and StackBoxBlur. (Not sure if imagesLoaded is used.)
FYI: It is always a nice try to load the unminified source, but in this case
main.js doesn't help much.
(My 2 cents: The effect looks nice, but is worthless on touchscreens and is not implemented well for smaller screen width.)

Workaround for the grey area around the map on zoom out

I am using Google Maps Javascript API for rendering a map. When we zoom out on the map there is a brief moment that we see a grey area (while waiting for new tiles). Is there any workaround for this behavior in order to provide a similar user experience as mobile devices (Google Maps SDK Android and Iphone), where we always see a map on zoom out and not that brief grey area around the map?
The grey area around the map exists because it takes time to access the image tiles over the Internet connection from the server. My presumptiosn as to the reason why the mobile version does not do this are either that they have a special function that accesses the cache instead of re-querying the image on mobile, or that mobile simply has a built-in cache of, say, the entire world at zoom levels 0-3.
In other words, I do not know of a way to avoid the grey space. To get a work-around would require re-writing a good portion of Google's code, specifically to access the browser's cache. Even if you did succeed, a first-time user of the webpage would still get the grey space simply because a cache does not already exist.
My advice is to ignore it, as it is "brief" (and likely will not have much of any impact on the user experience), and that there are no easy fixes.

jQuery Pan & Zoom or Magnify script with ability of hotspot or image map link?

Im creating a super simple 'app' for facebook were users will have to locate a character from within a detailed illustration (wheres waldo style).
I want people to be able to Zoom and Pan (like google maps) but also have the ability to click on the character once they find it and have a popup or redirect to the next page.
Does anyone know of a script that can do this? I have found a few zoom tools but you cant click or create hotspots, same goes with the zoom + pan tools. I found this one which is quite nice: http://www.dimin.net/software/panojs/#Demos
Hoping someone knows of something that will work for me.
Thanks in advance,
Matt
Ended up just using a good old html map with a redirect. Thanks all!

Image Magnifiers and Clickable Content

I'm currently using an application that generates large images for organizational maps, unfortunately the content is quite small due to the volume of data being output. I would like to find a way that allows the user to view segments of the map in an intuitive manner, yet still allow the user to click content inside of the map.
The first thing that came to mind was an image magnifier using something similar to the loupe jQuery plugin. This works great for magnifying the image, but I can't select content once magnified. If anyone has any suggestions for possible solutions to this issue I would greatly appreciate the help.
Thanks!
You might try Etalage: http://frique.me/demos/etalage/ -- if you click on the image, the link works (triggers the javascript alert), almost no other image zoomer seems to do that.
I'm trying to find something that returns the coordinates on a click, so I can ask users to zoom and and find things within a picture, and then I'll have the coordinates to crop the picture to extract the items they've found. But I haven't found a script that does that yet, either.

Google Maps API V3 - Internet Explorer

Hi I am having some problems with my javascript not working in IE. That being said I have been looking through older post such as these.
google-maps-javascript-api-error-in-internet-explorer
google-maps-api-marker-images-not-showing-in-internet-explorer
I still cant figure out what the problem is. When I debug I end up in the minifed google api code and have no idea what is going on (Similar to this post google-maps-javascript-api-error-in-internet-explorer ) . One thing that I can tell is that as I step over the errors the polygons start to to be drawn in the order that they are ( order is at the bottom of windData.js. I think the problem might have to do with the way I have windData.js setup.
I dont think the problem is with a global variable map since when you enter a address and click search it re-centers the map on that location, but then the marker is not drawn and the infowindow does not appear.
One CSS note that I saw was that the search button, and nav bar dont seem to be lining up correctly. More specifically the Nav bar doesnt line up in IE. The Search bar doesnt line up in Firefox.
For all my testing I have been using Internet Explorer 9, Firefox 7.0.1 and Chrome 15.0.874.120 m.
Thanks in advance for your help. Additionally I am new to all this and any recommendations you have on how I should do thing would be greatly appreciated thanks.
One obvious problem is this sort of thing:
paths: [
new google.maps.LatLng(27.32074511436256,-99.53600600398401),
new google.maps.LatLng(27.30459798514129,-99.5366568769641),
...
new google.maps.LatLng(27.32074511436256,-99.53600600398401),
],
The comma after the last LatLng, before the closing ] will cause errors in Internet Explorer. I think all your paths arrays leave that comma in.

Categories