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/
Related
I have a website http://xi-spain.com/. It is responsive too. But I have got some problems while putting a world map with country links in it. The map looks good at my computer resolution but when i re-size the browser, the links goes besides the country locations. I have put all the links by absolute positioning using percentage values but it is not working responsive properly. Do you have any idea to solve this?
I would look at reapproaching the way you're looking at executing this.
On smaller screens it doesn't make sense to have the map showing with a bunch of labels, the room just won't be there.
By default, from a mobile first perspective, I would list all of the country/locations in an alphabetical list. Then once the viewport is large enough to allow a world map with labels to appear then load in the map and position the labels. An example can be seen here http://www.imiplc.com/graduates
I'm trying to create a page with Google Maps frame that occupies whole screen, but I also need a sticky footer at the bottom (where I can place button/icons).
I would like to have my layout based on Bootstrap 3, it should be responsive.
Can you point me to the right direction?
I do not post any code because the one I am working on is useless.
If you look on googles website they have a wonderful API for drop-in google maps. I've used it with bootstrap and it works fine (you can still edit it's height/width, border, ect.) Check it out here...
https://developers.google.com/maps/
As for the bottom footer did you try playing with the css for layering already?
I have created a most basic example for you: http://jsbin.com/fazah/3/
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.
I need to create an image gallery where the main image is centered, when you click down on it and "swipe" it to the left or right, the next/prev image will be center.
It should kind of imitate the feel of the iphone page swipe motion.
Here is an image link.
Does anyone know any good tutorials or how I can get started with AS3?
Although this isn't exactly the same, it will give you a fantastic starting point
http://active.tutsplus.com/tutorials/effects/iphone-page-transition-flash/
What you need is to create could be called "touch (kinetic) scrolling with a snapping". Take a look at Scroller class source from Flex 4.5 SDK (Hero) and make it better. You will need to spend time on it to make it work good enough. If you're doing this for a mouse-based input — just forget about it since this is a good idea for touch-based input only.
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