I have image map that can I move, but this map will be so big, so I would like to load it dynamically like google maps or maps in browser games.
But i dont know how does it work, can you help me?
I need just word solution not code
Thanks
Edit: i have 1 idea, maybe try to make div with width and heigth about 20000px and while moving the map add there new divs, but if is it this good idea how can i control loading new divs?
Divide your image in tiles. Then add them to your scrolling area as they come into the viewable area, and remove them as they go outside it. This scrolling area could be as simple as a div with a certain size and overflow:scroll;, with a child div much larger.
Related
I am working on my first full-page map screen. I am adding a couple custom controls on the map. One being a legend, the other a way to query our system and place pins on the map. I have been able to place the controls on map and it works well. I have one in the TOP_RIGHT and one in the TOP_LEFT. I would like to make this responsive now. I would like the legend to take up the entire bottom of the map, and the inquiry control to go to the top. I can't find anything on how to make this responsive. How do I go about accomplishing this? Online resources would be great.
Update: I realized I didn't make this clear. On PC/tablet, I want the legend in the upper right and on the phone, I want this to be all the way across. Similar to how this page works.
It's quite simple, set the width of the HTML-elements to 100%.
Be sure that these controls dont overlap with the default-controls.
Demo: http://jsfiddle.net/doktormolle/16r1777q/
I am reading this tutorial about making draggable and resizable rectangles
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape
It is a good one and I want to create a similar one using images and this is what I had done
http://jsfiddle.net/LUhsK/2/
all i had done is to change the script that instead of drawing a square I draw an image given the image source, initial X, initial Y, width and height but as you can see it doesn't work. I really can't find what seems to be the problem
If I clearly understood what you are searching for I guess it can be easily resolved with
droppedElement = ui.helper.clone();
droppedElement.resizable();
I'm trying to implement a zoom to component option where the user presses the 'e' key and it zooms right onto the component. I only want there to be one zoom level for this, since I am doing a zoom slider for when the user wants to zoom the entire svg at an incremental pace.
Here are some screenshots of examples
http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom.png
http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom2.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom2.png
For each of the above examples, I'm selecting the component with the text "testing" and zooming in on it.
Here is the jsfiddle of what I have so far
http://jsfiddle.net/6Jg2A/3/
By component, I mean a within the svg. Which contains an image, text, and rect.
It isn't fully working yet. For example, if you select the pink component and press e to zoom you can see that it doesn't really zoom to it correctly.
I think that I need to translate the components as well, I'm just trying to wrap my head around how to do that.
Wondering if anyone could help. Thanks.
Edit: Also, the zoom factor should be dynamic based on component size I think. In other words, when zooming in on a component the end result should be a zoomed component that isn't dependent on the actual size of itself. (I hope this makes sense)
It will be easier to zoom the entire svg canvas, not each element separately. You'll also want to grab the transform from the element you're zooming to and adjust the translate property of the canvas as well.
I've updated your JSFiddle to show a quick and dirty alternative that works: http://jsfiddle.net/6Jg2A/5/
I want my marker to appear not in the center of the screen, but 25% of the way up to give extra room for the popup box. Although sticking an offset in is easy, the offset depends on the zoom level as if you're zoomed far out, you'll want to center the map quite far up (such as 50km). If you're really zoomed in, then you'll want to center it just a tiny amount like 10 meters.
I'm not sure how to accomplish this. Any ideas?
Try this:
Take the height of the plugin and get 25% of that.
Then you need to multiply that by the degrees or kilometres per pixel scale at that height (if you can't get it straight from the plugin then I guess do the math), then centre the screen at that point on the globe.
I am not sure as it has been a while since I messed around with the API, but I think you can create a custom marker object with its own pixel based offset, and display that instead of the default marker.
EDIT: Whoops read it again and realized you probably just wanted to move the whole map and not the marker.
I'm using GAE Java and GWT together on a website which is primarily a large map with basic infowindows. I want to customize my info windows and I know how I want them to look-- but making this become a reality proving itself be tricky. Here's what I want it to look like:
Whenever a marker is click, a new info window will appear a few pixels to the right of the marker. The overlay will animate onto the screen, growing from nothing to about 300px by 300px. This overlay will contain information injected from the GWT portion of the code and will have a button to close the div in the top right corner.
Writing this in plain JS or jQuery would be no problem for me, but what I'm having trouble deciding is how and where I should inject the div into the proper position ON THE MAP CANVAS? Once i understand how I ought to do this, I believe i can finish the rest of the work myself.
Thanks so much!
probably too late for an answer but for anyone else who'll end up here,
the following link should get you going
http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html