Is there a built in way to make libgdx map renderer repeat the map at the edges?
I.e., at the very far edge, start drawing the leftmostpart all over again, and so on.
thanks in advance
Related
The question posted below
how to rotate a google map in a web application
can be use to rotate the map by rotating the div which contains the map
but if i do scroll or drag on the map the map is working in unpredictably way is there a way to retain those functionalities as it is
Note: i am rotating the map using div because the aerial tiles are not available at that location.
Please say whether this can be done with some other map api are how to go about it in google map API
It is difficult to answer with certainty unless you post a more complete answer, but I believe your issue is with the corrodinate system.
You are rotating the display of the map, but the x,y coordinates of your mouse are not. When you drag the mouse, the javascript is capturing the mouse movement relative to the screen and then you are rotating the output by 45 degrees. In other words, google maps has no idea that you have rotated it. It would be the same output if you just turned your monitor 90degrees, the mouse is still going to send the same x,y coordinates.
In order to do what I think you want you would need to take over the code handling the movement or accomplish it another way. You will notice that the dragging is disabled on the example you referenced.
This might be a place to start looking for getting the center of the map on mouse events:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MouseEvent
You might be able to get the current coordinates and "transform" the new coordiantes by looking at this example of getting pixels:
https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
Here is a page explaining some things about transforming coordinate systems:
http://www.continuummechanics.org/cm/coordxforms.html
If this is something that you really have to do, it can probably be done, but it is likely a lot more trouble to get right than it is worth for an average map embed. It might also add a lot of processing that will make the interaction pretty laggy.
After saying all that, I'd still love to see an example of this working so if you do make it work please post some code.
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 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
I'm new to html5 and am having a problem with drawing custom markers. I tried using the code from this tutorial. I'm trying to use circles instead of rounded rectangles but my circles are getting cut off on the right side. Here is a screenshot. I tried replacing the rectangle drawing code with
context.arc(radius,radius,radius,0,2*Math.PI, true);
Can anyone tell me what I am doing wrong?
never mind I was setting the canvas height and width incorrectly.
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 :(