Resize embedded google map - javascript

I tried asking question at super user first at https://superuser.com/questions/763734/how-to-get-larger-map-on-iss-live-stream, with no luck. I am just an observer watching the live Internation Space Station (ISS) stream whenever I get a chance. I don't own/can not modify at the source, the pages I am visiting. I just want to use firebug to enlarge element on the screen that's already there.
Site http://eol.jsc.nasa.gov/HDEV/ streams pictures from camera's on International Space Station. On right hand side there a flash window that shows trajectory and underneath it is a google map. On my monitor the current position with red dot is always lost as map size is very small and I don't get any options like centre here. Ctrl+ keys makes things little bigger, but problem essentially persists.
If I go to http://www.esa.int/Our_Activities/Human_Spaceflight/International_Space_Station/Where_is_the_International_Space_Station, I get same screen, but maps area is more usable, but I loose ability to watch live stream.
Is there any way I can set height of google maps using firebug or similar so that map is more usable and I can relate the actual location? I tried inspecting elements and changing various values, but could not figure out how height is managed.

Resize the maps origin element (most likely a DIV) and then run google.maps.event.trigger(map, "resize"); in the JS console of your preferred browser (assumes that 'map' is a global var set to the map object - you have have to hunt for this).

Related

Google Maps Markers in wrong location, but lat/lon appears correct

I am using custom markers to show a semi-live view of the location and orientation (heading) of certain vehicles of interest overlayed on Google Maps. (In my case, I'm depicting aircraft, the same way Uber does for cars, or how FlightAware does for commercial flights).
The coordinates for the markers are being broadcast in JSON format to participating browsers from a server that I control. The JSON data is processed by a JavaScript function at the browser to create / update the markers on the Google map. The refresh (broadcast) rate can sometimes be as fast as once every 2-seconds, or as slow as once every 30 seconds, depending on the particular user's needs of the moment.
Sometimes, it is possible (and valid) for two markers to be thousands of miles apart from each other. For example, one marker could be in Montana, and the other could be somewhere in Africa, and this is a valid condition.
However, sometimes, when I am zoomed into a region of the world so I can look more closely at one marker, a "ghost" marker appears nearby that "isn't really located there". The ghost marker is labeled as one of the other markers that may be hundreds or thousands of miles away, but it's showing up in my zoomed in view for some strange reason. If I momentarily zoom in our out, the ghost disappears, but it may re-appear again.
Interestingly, the ghost image has the proper orientation for the vehicle it represents, but it's just located in the wrong part of the world.
Are there any special things I should be doing when I'm updating multiple markers separated by large distances so they don't show up like this in the wrong place?
I have traced this as far as putting console messages in the browser so I can see the lat/lon of each marker being depicted. I output the latLng object just before it's applied to each marker, and the lat/lon I see in the console log is correct, even when the actual marker shows up in the wrong place.
I don't know if this is a contributor to the problem, but the marker images I'm using are custom PNG files, not standard Google makers. Has anybody run into this before?
As I can see there are a couple of issues reported in the Google issue tracker very similar to the one you described here.
Have a look at them:
https://issuetracker.google.com/issues/74225068
https://issuetracker.google.com/issues/73864685
Feel free to add your comments and star the issues to subscribe to further notifications from Google.
Please note that these issues were reported for the experimental version of Google Maps JavaScript API. Double check which version of the API you are using. Probably loading the release or frozen version will work as a temporary workaround for you.
For more details about versioning model of Google Maps JavaScript API please refer to the documentation:
https://developers.google.com/maps/documentation/javascript/versions
I hope this helps!

Programatically moving around a map is jittery

In my mapbox/leaflet app I'm using the following code in a loop to follow a route a round a map
map.setView(microLineArray[microIteration], zoom);
microLineArray is the array of lat longs that the route follows.
It plays very odd though because of the tiles loading in.
As I am only using a couple of zoom levels and only covering the USA for the route playing is it possible to pre-load the tiles at all. If so how would I go about doing this.
There is some discussion happening about this on the google group # https://groups.google.com/forum/#!topic/leaflet-js/nWk2k0FySRo. Sounds like some people are making phantom/hidden/offset map containers that contain more tiles than the user's map viewport.
So if you know where your routes are "generally" going to be...create another map container and use setView to get it moving & requesting tiles that you need prior to the user's map container.
Additionally, there is an old plugin called Leaflet.TileBuffer that sounds like it does exactly what you want - however compatibility with latest versions appears unknown.
You will probably also want to consider forcing unloadInvisibleTiles to false.

Using selenium with Open Layers

It is not possible to automate the clicks on the map elements which are svg nodes (they do not have specific x-paths which selenium relies on).We tried clicking on features which also fails as it is also set as a svg element. Is there a solution for this?
I have finally found a solution for this (at least for point feature types). It is done using issuing a request to the DB to get the feature coordinates and then using the following method to get the pixel values for the x,y coordinates for the points.
OpenLayers.getPixelFromLonLat()
After that the Open Layers click controller is used to issue a request to the given pixel. It works on all window sizes as well.

How to re-render html element in canvas element

I have short question.
Is possible render Google maps or Bing maps to hidden element and re-render in canvas with sepia and blur effect?
I think not, so, is possible do this with any kind of todays technologie?
You don't really need to render the maps to a hidden element and then capture it somehow, the maps are all made of images anyway, you just need to download the image tiles. You can then add those images to a canvas in the normal way.
However, downloading and storing GMaps images would probably be a violation of their terms of service, I imagine Bing will have similar restrictions. However OpenStreetMap does allow tile downloading, if you scroll to the bottom of that page you'll see some links to tile providers and tools.

Customer interactive vector map

I'm sure this isn't going to be straight forward, however..I have a custom vector map of the UK and it's an animated map. It shows different locations all over the country and I need to be able to allow the user to click on a certain location on the map. So the user will get a pop up about the location they've selected. Something like this - http://jqvmap.com/ However like i said the map has charactertures on it.
I'm wondering how simple it would be to change the co-ordinates in the Javascript to locate the positions on the map. Is there a tool I can get so it tells you your current co-ords on hover to help?
Any suggestions would be much appreciated! It needs to work on all major browsers including IE 8/9 (7 if possible).
Thanks,
Josh
I've found something that seems to have done the trick - http://www.outsharked.com/imagemapster/default.aspx?demos.html#frog
I've implemeted the code onto my page and it's worked. I've managed to get the co-ordinates from the web developer tool bar.
However, I'd like to implement a zoom in feature, where you can zoom and move around the image as if you were using google maps. So you can scroll with the house. My worry is will that lose the co-ordinates on the image? As I still want users to be able to click on the locations on the map.

Categories

Resources