I'm running into an issue. I'm trying to rewrite an old flash/xml map using CSS. I have a big jpg of the map, which is the background. I'm able to lay the icons out, where they need to be.
The problem I'm having is centering the whole thing on the page. Ideally, the map would be centered and the user would be able to click and drag the background image to look at the various sections, the way Google Maps or something works.
How can I do this, or what is this effect called, so I can google it more in depth. Searching "map" at all gives results about customizing Google Maps. Which isn't what I'm trying to do. I'm thinking it'll involve absolute positioning and and viewports, but I don't know exactly how to code it.
Should I just make a frame?
It looks like Leaflet will probably solve the problem. http://leafletjs.com/
Related
I’m new to wordpress therefore I’m not aware of all the capabilities of this tool, but I wanted to know how do I add buttons on top of an image, much like the waypoints you normally see in maps in museums or even video-games. It is something that I am having trouble recreating and I would need some help with that.
Here is an example but of course, with less buttons than what it is actually shown here.
Also, before I forget to mention, thank you to all those who try to help me.
(This is a repost from my original topic in the wordpress forums, you can find it here.)
I am looking for a tool or library that will allow me to generate a preview image for an equirectangular panoramic image. I am using the pannellum library [https://pannellum.org] to present panoramas, which works great. What I'd like to add, however, is a way to generate lightweight preview images to display on initial page load. I would like to have a small sized preview image that does not look warped. Does such a tool/library/script exist?
Thank you!
Dave
Some people like to convert panoramas to cube maps, which is a lot easier to google.
I've been looking at https://github.com/denivip/panorama, or also at https://stackoverflow.com/a/43469036/2471983 if you want a pure JavaScript approach (check out that entire question page for lots of info). Both of these will by default create all six cube faces; you can either edit them or just throw out the five extra faces.
Once you have this unprojected image, you can resize it using whatever utility you like.
I'm using the Google Maps API to browse my own maps. The problem is, I only have one rather small resolution file, that I wanna display fully at level 0, which means it's not gonna get any more accurate when zooming. I still wanna be able to zoom though, by just enlarging the image. This would be useful for the markers and polygons I intend to draw on it, as they could be viewed in larger detail.
I could just create dummy tiles, that show no higher resolution than the original, but that seems like a roundabout solution that would do nothing but create more unnecessary server requests for the map files, as well as more traffic.
The problem seems to be the getTileUrl() function, as it is required. I can't think of a clever way to abuse it either, to only show different sections of the same map.
I know it already supports image enlarging, as you can observe the effect when you zoom in. The question is, if you could make that effect permanent somehow, and not make the image disappear if no new image is provided.
Suggestion:
Use the ImageMapType only to hide tiles at all(therefore let getTileUrl() simply return null)
For your own map don't use tiles, create a GroundOverlay instead.
I need to customize a Google Maps InfoWindow.
In particular I want an image to "hang over the edge" of the InfoWindow. But when I place the image absolute within the InfoWindow-DIV it disappears behind the border of my InfoWindow.
Adding a z-index changes nothing.
Hope I made my point clear. Any ideas?
There are many custom window solution , see this one for example:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want something outside of the infoMarker border, you'd better use a custom solution.
The built in one is good for the simple stuff.
Based on the design below, is it possible to create the map just using CSS? If so, how?
So as you can see, when you hover over a state the name will appear and change the color of the state. On clicking it will info below the map per state.
UPDATE 1:
Can it be done using absolute positioning, z-index and hover states on a button?
UPDATE 2:
With a slight tweak to the design, would it be possible to have a flat image for the map and plotting dot's on it for each state that would include a hover (using the same tab style as the image example)? Each dot being an image. Am I right in saying that the complication of the design is to highlight the right area when hovered? Therefore, just having a dot would solve it right?
I was interested in this too and found this example (USA) MAP if you look into the source code there is area for each state that look like <area onmouseover="show(this)" onmouseout="hide()" onclick="fform.tg.checked=false;togl()" shape="poly" coords="179,33,174,66,230,67,225,35,179,33,179,33" href="us-nd.html">. You can read more about and tags in W3C link. I think its the only way how to do this without flash or something... But it cant be done without a little JS. To get the coords, I would asume you just open your image in some editor that shows coords(gimp or something) and manually find them out...
No. If it had rectangular shapes yes but with a lot of work.
You really need javascript on this one.
You might want to try a Javascript mapping library - www.openlayers.org is the market leader (and free and open source).
You get your US state map in the right format (GML for example) then you can pretty much cut n paste from one of the openlayers examples. Hovering and clicking are handled by event functions. They can then do things like updating your info box below the map.
Note that if you want Alaska and Hawaii as in the picture and all you can find is a geographic state map, you might have to use a GIS to shift the features around. Quantum GIS is a free and open-source GIS that can do this for you. Help for that can be found on gis.stackexchange.com!
If you're willing to use javascript, jQuery more specifically, here is a nice plug-in/tutorial on how to do what it seems like you'd like to. http://playground.mobily.pl/jquery/mobily-map.html. It won't do the states exactly, but it will allow you to drop pins and such.
Update: This seems to be exactly what you're looking for: http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html. It includes a rather indepth tutorial as well.
Here is another interactive US map I found myself: http://www.fla-shop.com/products/html5/united-states/us/ It is purely javascript with customizable popups.