Resizing KineticJS stage - html

I created markers with custom html for my bing map (doesn't matter if is was google maps). The new marker contains kinetic js stage that contains layers interactive to the user. everything is working just fine except that now I want to resize my marker when my map zooms out or in. I want to give my marker max and min sizes and it should change it's size when map is zoomed in or out.
I'm not getting any idea how I can resize my kineticjs canvas.

If I'm understanding correctly, you should be able to handle that by simply changing the scale of the stage.
stage.scale({x: newXScale, y: newYScale})
http://kineticjs.com/docs/Kinetic.Stage.html#scale

Related

MarkupCore - Applying pan and zoom from drawing to multiple markups

I have a few hundred markups that were loaded with MarkupCore on some drawing (v1).
Right now, I have a new version of that drawing (v2) that has different dimensions. Instead of creating all the same markups for that new version, I've copied all the markups in v1 to be used in v2. Since the new version has different dimensions, the position and zoom of the new markups are slightly off.
I have a way for a user to go in v2, without showing the new markups, and pan and zoom until they're sure the drawing placement is right.
How can I extract and apply the pan and zoom that the user applied to drawing, to all the markups, so that their placement is correct?
As I know, markups generated by MarkupCore ext don't contain zoom and pan info. Instead, we suggest getting the zoom and pan info (i.e. camera status) via viewer.getState() and restoring it by viewer.restoreState(viewerStatePersist). See https://forge.autodesk.com/blog/using-autodeskviewingmarkupscore-extension
Therefore, if your user changed the zoom and pan info on the v2 drawing, you can call viewer.getState() again to get new camera status and replace the original one stored in your database(!?).
If just want to get new camera status, we can call the API like this viewer.getState({ viewport: true }).

How can I set the zoom point of a Google Map in iOS to be off-center?

I am implementing a Google Maps for iOS SDK map in my app. I have a UISlider that controls the level of zoom in the map. I want to be able to have the map zoom in on a point that is not directly in the center of the map -- and after zooming in, this point should be offset from the center of the map by the same number of pixels as before.
I tried setting mapView.layer.anchorPoint to an off-center point, but if I do that, then it screws up the map drawing and it draws the whole map off-center, leaving black areas.
I tried zooming in on the point itself, but that moves it to the center of the map, which I don't want.
Is there a convenience method for simply telling the SDK to treat a different point other than the direct center, as being the "fulcrum", if you will, of the zooming?

Google Maps: bind click event or info window to OverlayView

Any ideas on how to bind a click event to an OverlayView in v3 of the GMaps API? The overlays seem to be buried under the map's panes so clicking on the overlay results in just a zoom. I'd ultimately like to bind an infowindow to the overlay but just being able to click it would be a fine start.
Would just changing the z-index be the way to go? I tried this for a little while but couldn't get through all of the nested divs loaded by the map.
This is the demo I'm playing with: dutrack.com/markerShapes.php.
Edit: The overlays on the demo map are the large 'teardrop' icons and the paths. The smaller blue icons are Markers at the moment.
Consider placing your overlays in a different pane so that their z-Index is higher than. According to the documentation, getPanes().floatPane will get you the pane which is above all other map panes.
Also give your overlays a high z-Index so that they appear above other content in this frame.
Then use google.maps.event.addDomListener(..) to attach a click listener to your custom overlay.

Zoom , pan inside a rectangle bound

I am building a site with some features of google map. I want to pan, zoom in out a map with tweening effect. But when I zoom the map(Movie clip) it zooms out of the rectangular boundary.
I also want to wrap the map(when scrolled).
How can I do all these?
Check out the panning/zooming example from the Flex Interface guide:
http://www.adobe.com/devnet/flex/samples/fig_panzoom/
It demonstrates how to do what you're looking for (though not the map wrapping).
To wrap, you will need multiple copies of your map image.

How can I have a smooth animated move between 2 Google Maps locations?

When clicking from one marker to another in Google Maps, the map screen animates the move smoothly if both markers are within them initial map view but jumps if one of the markers is off screen.
I'm trying to set up a map which has several locations within the main map area but has one which is 'off screen'. I have a signpost icon to the more distant location within the initial map area which I want to smoothly scroll to the off screen location when clicked (so as to give a better sense of it's relative location). I can't find anything in the Maps API which would let me do this however.
I could zoom out, move and then zoom in again but this looks a bit jarring. Am I missing something in the API, or does anyone have any suggestions?
Unfortunately, I don't think this is possible (without a change from Google). From the v3 API reference for panTo:
Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated.
which implies that if that change is not less than the dimensions of the map, the transition won't be smoothly animated. The other pan methods are similar.
You could try moving in multiple steps but that's a bit of a hack and I suspect the result will be poor.
Sorry that's not very helpful (I have the same problem).
For me this method works, but i'm using Google Maps API v2.
LatLng latLng = new LatLng(lat,lng);
map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, ZOOM_FACTOR));
This animates the camera from current position to the new one.
If you are using Gmaps API V2, then you can implement smooth animated move very easily by using panBy() method. You have to use fromLatLngToContainerPixel() method to find the amount of pixels to pan by.
Here is the bit of code:
var newLoc = map.fromLatLngToContainerPixel(new GLatLng(lat, lng));
map.panBy(new GSize( newLoc.x, newLoc.y ));
However, what I am trying to do is to achieve the same thing in maps API V3, but sadly fromLatLngToContainerPixel() method does not work anymore the way it did :(