I want to create a simple "interactive" map, where there would be an image (the map) and some elements on it.
I'd like my elements to glow/open a pop-up when hover or click on it, or even open a new page.
My process would be to create a new div, add new elements on it with a position:absolute and place them with top/left/right/bottom... and add CSS hover proprieties to the elements.
But, I know this might not be the appropriate way to do it.
My questions are :
Can I do that using only HTML/CSS ? Or should I start learning new
programing languages ?
Is there any plugins or sites available for what I want to do ?
I would recommend you use JavaScript with this for interactivity.
Check out the Google maps api. It can do what you are trying to do.
We have a helper plugin for maps api and jQuery for setting the markers on the map.
http://github.com/Lucien-Consulting/Google-Map-Marker.git
Those two suggestions will get you started. Just jump in and try it!
Related
I know it is possible with Google Map API v3 (MapTypeStyler option) but do you think it is with Leaflet API ?
Thing is that I have text that cover a map I need to make more visible by adjusting brightness or - even better - by applying blur effect like in this example : http://www.hongkiat.com/blog/css-filter/
CSS shader looks very promising but supported only with latest Chrome browser.
The text over the map is modal (user must interact with button) and I could add overlay with a PNG image file. I don't like to much this solution that need unnecessary file to be transfered to the client.
Thank you,
Leaflet is very lightweight and simply puts references to tile images on your html page. So I see two options to change the look of the tiles:
CSS
Which indeed depends on the browser.
Custom tiles
Leaflet will display tiles from any server. You can for example pick one of the many styles served by cloudmade or make one of your own there.
Or use a tool like TileMill to create (and perhaps even host) them yourself.
I would like to know how to create effects / animations over Google Maps markers. Specifically, I would like to zoom-in/out or "fade" a marker after a given amount of time. Could it be possible with HTML5 ? Is there any jquery effect library for doing this?
(I could use a map tile server for creating map tile overlays and re-generate tile overlays every second, but I guess it is very processing-intensive...)
Thanks in advance
I haven't seen any library to do this, and there isn't functionality in the API to fade Markers per say.
Instead, what you can do is simulate markers by creating your own Custom Overlay that looks like a marker. A custom overlay usually contains a div, which you can easily control the opacity of using JavaScript / jQuery based on a class or id you assign during the custom overlay construction.
As an example, if you look at this page you can see the is a button used to toggle the visibility, you could just as easily change that JavaScript to control the opacity of something.
I am looking at doing something similar.
If you set the marker option 'optimized: false' for all markers, each will have its own element, you can then use jQuery to select all the markers on your map using something along the lines of $('#map_canvas img[src*="filename"]'), assuming that you're using custom images for the markers.
What this doesn't address is relating each element in the array returned to a specific marker.
I think that you could add the markers to the map one at a time, re-run the jquery selector, and compare the elements returned vs. the previous run, to see which element was new. I haven't tested this part (I have what I say in the first paragraph), as I'm working towards something slightly different.
You should then be able to adjust the opacity/size of the image directly.
This might get clunky for large numbers of markers.
Paragraph two above is stupid.
Add a marker to the map, making sure to set the optimized:false option. then
var freshlyAddedMarkerImage = $('#map_canvas img[src*="your_marker_icon"][class!="adjustMe"]');
The newly added marker won't have the class, so will be the only element selected. Before setting the className, you could set an ID, add the element to an array in the same index position as the corresponding marker object is held in another array, etc.
This should be a lot less clunky to implement than what I proposed previously. I'll try and come back with a working example soon.
I suppose if you knew that there were groups of markers that would share the same transform (zoom/fade), due to being the same age or whatever, then you could add all of them and only do the jQuery select at the end, before looping through the returned elements setting a class that would allow you to adjust them en-masse.
I have lots of slices of (non-geographical) data that I'm trying to
view via google maps. It basically breaks down into N 'maps', each
containing M 'layers'.
This sample shows basically what I want to do:
http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html
I can get it to switch between two different maps by providing two
custom MapTypes (much like the Map/Sattelite toggle in the sample),
but I can't figure out how to make it so I can toggle on and off an
additional overlay layer (like the 'terrain' checkbox).
The official docs vaguely mention this (
http://code.google.com/apis/maps/documentation/javascript/maptypes.html#MapTypeInterface
) but unfortunately the bit I'm after ('See Adding MapType Controls
below') is a dead link, and I can't find this bit of the
documentation.
Does anyone know where the documentation on how to control the drop-
down toggle boxes exists?
Thanks
If you are looking to have a particular overlay appear or disappear based on a checkbox, you can check out http://geojason.info/2010/overlay-map-management-with-google-maps-api-v3/.
However, that involves checkboxes that are not actually on the map. They need to go in a sidebar or above the map or whatever. If you are hoping to be able to add things to the control where the "terrain" and the "layer" checkbox appear, I don't think there's any hooks in Google Maps API v3 to do that. I'd be happy to be wrong, but I don't think it's simple and I would expect any solution that managed to accomplish it would be brittle.
I am working on a HTML5 application designed to run a Google map which takes up the entire screen on a mobile phone. For the sake of simple debugging, and perhaps later for legitimate informational purposes, I would like to position some text in the bottom right hand corner of the map, which reports some information, such as the current lat/lng of the user. I have looked through the v3 API, and to the best of my knowledge there's nothing in there to do this. Is there any kind of workaround that would permit this to be done?
Pretty easy really. Add a div as a control. Define an empty div anywhere in your html. Add it as a control, and Maps sucks it into the map display. Then write to it with any DOM functions you wish.
<div id="debug"></div>
-- code goes here --
var x = document.getElementById("debug");
mapName.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(x);
-- code goes here --
$("#debug").html("debugging info")
Hope that is enough to get the idea across.
In my example I put it in RIGHT_BOTTOM. Other options are here.
Skip
It might be too much work to implement an overlay. For debugging purposes, you're better off using the console logging options from FireBug (or a similar tool). As for the legitimate information, if it's geo-specific, you could use the InfoWindow.
If the data isn't geo-specific, it's probably best displayed outside of the map (You could resize it to be < 100%). Hope that helps.
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