So, i have a really big canvas (width can be exceed 10000px).
I'm looking for a way to navigate into this canvas, like we navigate into google maps.
I should be able to navigate the canvas by clicking the mouse and dragging the canvas with maybe a zoom option.
Do you know an easy way to do that ?
I can create this system but if i can gain some times... Thanks !
Related
I know how to enable zooming and panning with the mouse in vega-embed.
I would like to zoom out one step programatically after pushing data into vega-embed. Is this somehow possible?
I have developed an iOS application that allows the user to drag a GMSOverlay subclass around in the Google Maps SDK. The overlay scales with the map as the user zooms in and out.
I want to replicate this in the browser but can't find examples of how to do it. Today I happened to see a web page where this was done.
Draggable overlay example
If anyone has any ideas about how this is achieved (generally speaking - I will research from there) it would be appreciated!
The Google Maps API zoom_changed event and getZoom() method will let you track changes in zoom, which can be used to scale DOM elements.
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.
On of the drawbacks of google maps infowindows is that map will move to make room for the infowindow to display. ebubble( http://econym.org.uk/gmap/ebubble.html) overcomes this limitation, it doesn't move the map. However. it has its own limitations (you can't leave it on, like the infowindow, due to the way it works (it immediately hides). Also, the bubble, being absolutely positioned, might get cropped)
Are there more alternatives to the infowindow that doesn't move the map, besides ebubble?
Depending on your needs (which aren't totally clear from your description), you might consider MapTooltip, which lets you put arbitrary HTML into a tooltip. I haven't used it, but it's mentioned in this excellent presentation on Google Maps.
Alternatively, you might be able to make the InfoWindow do what you want with some event handling code. movestart and the InfoWindow's onOpenFn might let you do this - try catching movestart and remembering the map's position, then in your onOpenFn restore the position. This might look ugly, though.
Did you see the EWindow?
If you are willing to use the Google Maps Flash API, there is a way of opening info windows without the map panning. The info window stays open until the user closes it. The user can move the map while the window remains open.
Link to example here.
Right click map to view source.
Have you tried using InfoBubble? I like this implementation better than the default InfoWindow.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
I have a web application that needs to display 30,000 markers on a map at the same time. I don't want to use any kind of clustering. I need them to all be displayed.
I also need them to be clickable. The user can click on each point and a popup will come up with information about that point. Even at a low zoom level when there are thousands of markers in a single 256x256 square, the user needs to be able to click on them. It may be cumbersome for the user to click on a point thats bunched up with hundreds of other points, but if there happens to be one marker in the middle of nowhere, I want the user to be able to click on it right there instead of having to zoom in.
How do I do this? I know it's possible because I watched a video on google video where this guy creates a GTileLayerOverlay app that had clickable markers. He didn't explain how it was done though.
Is my only option to just remove the GTileLayerOverlay at high zoom levels and replace it with a true GMarker layer? I really don't want to do that. It seems over engineering to me.
If you were me, how would you go about this?
I found this example is in the Google Maps API Demo Gallery:
Clickable Tile Layer
This example creates a custom map type (GMapType) that shows regional borders and squares for county centers. When the squares are clicked, an info window opens with information about that county. The clickability is accomplished by passing in information about clickable pixel bounds in the cookies attached to the tiles, and doing a client-side check on mouseover for whether the mouse position was within the pixel bounds.
Here's some commentary on his method.
I don't have any experience with GTileLayOverlays, but I believe it is possible to accomplish what you're trying to do without using GMarkers.
Would it be possible to utilize clustering if each cluster could bring up a list of the markers it represents? It seems like having 30,000 markers visible at once would be visually confusing and difficult to navigate .