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.
Related
When I pan the map with the mouse, I want the visible layers to update (before I release the mouse). Ideally, it would actually be preloaded, like the basemaps, so that you don't have to see the unloaded edge of the layers.
Example: Say I have a layer which is a solid red block over the entire map. When I pan, the screen moves so that you see that the red layer doesn't extend to infinity; it's actually covering only the viewport. It now appears as a rectangle which is moving around the screen as you pan, until you release. I want the user to be able to pan and only ever see red. This is a contrived example, but it's the functionality I want.
What doesn't work: I have already tried running a layer.refresh() command on the map's pan event. That won't work until after you release the mouse.
Well, As I am understanding above requirement. you want to add a layer on the ESRI map; which will refresh every time you pan or zoom.
In this case no need to add the layer as ArcGISDynamicMapServiceLayer. Simply add the layer as a feature layer in ondemand mode.
To know about feature layer and its mode please click here...
As we know it request to update layer automatically whenever you change extent of the map.
Hoping I gave you the hint which you are looking for... :)
I need to select an rectangular area on a map and identify markers that fall within that area.
Ideally, rectangle should be draggable and resizeable.
I am not too particular about the mapping and Google or Mapbox or Leaflet would all work just fine.
I found location-filter for Leaflet (https://github.com/kajic/leaflet-locationfilter/), which does seem to do the job. However, I couldn't find simple example code that shows how to use it. It has been used on tripcode.com but it is hard to make anything out of what is going on.
Does anyone have any experience with location-filter? If so, can you please point me to simple example of how to use it?
Are there similar examples for other mapping services particularly google maps?
Thanks.
For my bbox page I've snatched two files: SimpleShape, Rectangle from Leaflet.draw plugin and fixed them for better usability. The code for the rectangle is simple:
var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();
rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });
For advanced things like centering the rectangle on screen, see source code for the page.
When you are drawing the markers onto the map you will need to add them to some kind of an array which will contain the lat/lng pair of each marker.
You can use Leaflet.draw to draw the rectangle and modify it to return top left and bottom right coordinates on mouse up. On mouse up you can go over the entire list and which elements fit inside that bounding box.
This solution is just an example, there are many ways you can do this.
I have a google map as page background and a few div layers above it. When I place markers on the map I would like to be placed in the visible part of the map, not below the divs. In other words.. I need to add padding to the map so the functions like fitBounds(), setCenter() and etc. to position the markers in the visible part of the map.
There are many examples around but none of them looks quite well or it is working at all. Most of them are similar to:
I have tried to calculate the bounds and to extend bounds with some padding but it is a two step process. At first.. the map is positioned at original bounds to get the correct projection and then it is animated to the extended bounds. It doesnt look professional, we have two fitBounds() and the second one is animated. http://jsfiddle.net/seddass/CuKTK/
I have tried to add custom control to my map but it seems that the custom controls doesnt add padding to the map as suggested on many places. http://jsfiddle.net/seddass/wtT3t/1/
Can anyone can provide a working example or a better solution for padding to for Google Map v3? Thanks in advance!
I have a marker of a rocket on one of my Google Maps apps. Not surprisingly, I need to rotate it depending on where it's headed. How can I do that? Rotating the image with a canvas/VML (like jquery-rotate does) appears to be not an option, because I need to specify a URL as the image source, not an <img> element.
The best cross browser way would be to create a sprite with the marker at different angles, and vary the Marker's size attribute depending on the angle.
The other non-cross browser way would be to use CSS3 transforms, and you'd probably want to create a custom Overlay in order to do this. Alternatively, draw onto the map with canvas. Though, you won't get a dom element to capture click events.
You can make more versions of that image (for the rotations) and use the url of the image you want.
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 :(