Hey folks,
I was wondering, if it's possible to create marker-icons that can be updated/altered as soon as the AJAX-function pulls new data from the server. To give you an example:
I have several markers representing different people. Now if one of them posts a new message to the system, AJAX fetches it and passes is to the Map-Object. Now I'd like to pop this (event) into the map by either opening an InfoWindow next to that person, or - and this is the preferred way - to add a tiny red icon next to the marker-icon, just like you know it from the top-navigation in Facebook (e.g. you have 5 new messages and 3 friend requests).
And if the icon is clicked/the InfoWindow open, I'd want to remove that extra icon from it.
Is there any possibility to do this? And what would be the fastest (in terms of benchmarking) way to go with? Maybe with additional overlays? Or would I have to calculate the pixels within the viewport and add onto it?
Now it's your turn... :)
Thanks a lot!
The easy way would be using setIcon() function of the Marker class.
It is quite possible to use another overlay and the trick is to calculate the pixels within the viewport. You can avoid that by using a transparant 'red icon' and overlays it on top of the existing icon using the custom overlay classes (http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays) by using the position of the icon.
If you really want to calculate the pixels, you can search for 'google map contextmenu' and refer to how people do the calculation.
Related
Anyone know whether it is possible to add a label beside my markers on my react-leaflet map?
The link FrankerZ sent you to is pretty helpful, definitely check that out.
If you mean a little popup label that shows up when you hover over a marker (or Polyline, etc.) then as of Leaflet 1.0, you can use Tooltip. I've found that it works much more smoothly than making a Popup, and uses less code, especially if you're just opening the popup on hover. It might look like:
var Marker = L.marker...
Marker.bindTooltip('HI').openPopup();
And you can use the permanent boolean flag if you want to keep it open.
A less popup-y option is DivIcon, if you want a text label that stays at a certain position always. See this SO post. Basically you can add a div that is associated with a geographical position, then format the div to look as text-y or text box-y as you want.
Hi Pardon me if this is repeat question or obvious one as i am new to programming
I am trying to implement an angular google map using this api. it has a property called options boxClass,boxStyle,content,disableAutoPan,maxWidth,pixelOffset,alignBottom,position,zIndex,closeBoxMargin,closeBoxURL,infoBoxClearance,isHidden,visible,enableEventPropagation as different values(seen from the JS file.)
Now i want to know what each one of those will do as it is not specified in their documentation. and mostly i wanna know how i can make the info window to appear on rightside of marker like shown here I designied the html for the infobox and when i give boxClass as the option the infobox is rendered properly but is displaying below the marker. i want it to be to the side of marker.
EDIT: let me clarify on certain points. I mainly wanted to know
1.how to remove the default close button and replace with mine. (which function to call for it to work )
2.how to use pixelOffset or another property to help me display the infobox to the side of marker as in example above without using margin or padding. gmaps api v3 specify the pixelOffset to be of type size. i tried various ways to offset the infobox so that it will shift but it seems i am using it wrong as the box either wont change its position or will be displayed at the top of map irrespective of the marker.
A lot of them are CSS properties that changes appearance and not really maps term. You can google them or learn from here.
I am working on a website that uses OpenLayers to draw a map and add layers of information on top of it. Everything works fine but one thing.
When I add a new layer of information, I want it to be on top of the other layers, but when add a layer of information before, I want to other layers to be on top.
My point is: The last clicked should be on top.
Right now, when I want to set the visibility of the layer to yes, this is was is triggered:
myLayer.setVisibility(true);
map.setLayerIndex(myLayer, 700);
I tried replacing the 700 by a really high value and it changed nothing. I also tried this:
map.raiseLayer(myLayer, map.layers.length);
But nothing seems to work. The layer still appears under the other layers...
Please if you have an idea, tell me.
Thanks in advance for the help!
PS: This is the website (not sure if you can see it):
http://labqc.wul.qc.ec.gc.ca/MetViewer/
To test, you have to select a layer on the left (images will be shown) then you click the (+) icon at the top-right to select the layer, and you add, let's say BV - Canada. Polygons will appear under the image insteaf of on top, I want the reverse situation.
.
You need to explicitly request that the layer redraws itself, after you have used the raiseLayer or setLayerIndex functions, as these functions do not automatically trigger a redraw: see http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Map.js. A simple
this.redraw();
or
map.layers[layerIndex].redraw();
depending on where you are handling this from, should be enough.
I'm sure this isn't going to be straight forward, however..I have a custom vector map of the UK and it's an animated map. It shows different locations all over the country and I need to be able to allow the user to click on a certain location on the map. So the user will get a pop up about the location they've selected. Something like this - http://jqvmap.com/ However like i said the map has charactertures on it.
I'm wondering how simple it would be to change the co-ordinates in the Javascript to locate the positions on the map. Is there a tool I can get so it tells you your current co-ords on hover to help?
Any suggestions would be much appreciated! It needs to work on all major browsers including IE 8/9 (7 if possible).
Thanks,
Josh
I've found something that seems to have done the trick - http://www.outsharked.com/imagemapster/default.aspx?demos.html#frog
I've implemeted the code onto my page and it's worked. I've managed to get the co-ordinates from the web developer tool bar.
However, I'd like to implement a zoom in feature, where you can zoom and move around the image as if you were using google maps. So you can scroll with the house. My worry is will that lose the co-ordinates on the image? As I still want users to be able to click on the locations on the map.
I am searching for a script similar to mapper.js or Map Hilight which will allow me to control the colours of the map areas. I found found a few that work well but I also want to control the unactive state. This is where most fall flat. What I want to accomplish is on page load a map will appear and each map area will be a different shade of blue according to population density.
Please let me know if anyone knows of a good script I can use, cheers
UPDATED
Thanks guys, I managed to solve this using the map hilight script
what I did was actually really simple, just another case of RTFM or in this case, documentation. I used the Map Hilight script (http://davidlynch.org/js/maphilight/docs/).
In the js file there is an option: alwaysOn: true, I set this to false. Then I added this class to every area tag: class="{fillOpacity:'0.5'}"
I used the fill opacity to change the opcacity for each area based on the population density. Cheers