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.
Related
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/
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've created a page that shows a map of my complex. The idea is to put icons on the map representing where computers are located, and the user will be able to click on the icon to remote into the machine.
But I also want the icons to be moveable. Everyone should be able to open the page and drag the computer icon around. Is this possible using only ASP.NET?
you can use following options but not limited :)
Google Maps
Bing Maps
bing map sdk
You could use the html <map> and <area> tags along with an image of your complex to create a map that has points on it.
You can see an example of this here, however this is probably overkill for your requirements. All you need to do is set the coord and shape attributes for each area, this will give you an element that would represent the computers.
I'm not sure if you can manipulate these in javascript or jQuery though, as I have never tried, but hopefully this will give you a starting point.
I have been working with the Google Maps API V3 on a project for some time. I am using the polygon shapes to represent buildings on the map of my campus and now I'm looking for a solution to the issue of the shapes being underneath the text for the map. This includes building games in specific for my campus. I was wondering if there was a way to move the order in which they are displayed so that polygons go under the built in text layer for google maps, and if so, how I would achieve that.
Thanks in advanced,
Mike
I don't think this is possible. Unless the map names are turned off via map options they appear to be a part of the tile image.
Edit: You could possibly do something like turn off the labels and use a library like infobox to make your own.
KmlScreenOverlay Buttons!!? real? how?
Any other way to put anything flash or html over GEPlugin?
A little unclear what you're after.
If you're trying to make KML Screen Overlays, may I suggest you check out the tutorial and utility at http://freegeographytools.com/2007/the-kml-screen-overlay-maker-utility.
If you're asking whether you can put, say, a Form Submit button on top of a map in a browser, then sure. You can use divs to layer all sorts of stuff in a browser.
A really good example of this is the Beer Mapping Project. Check out their New Zealand page and see the various items placed on top of it, including buttons, text and lists.
Hope that helps!
KmlScreenOverlay Buttons!!? real?
Yes they're real. But they're not as easy to use as HTML buttons... e.g. you can't just give them a text label. You have to use an image.
how?
How to use them - see the tutorial that #Mark linked to.
Any other way to put anything flash or
html over GEPlugin?
See also How can I place a html div over the Google Earth plugin? Involves wmode, I imagine