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.
Related
In Leaflet there is an option for icons to be div's instead of images. Which meant you could make a marker which is just text, essentially a label which could be moved by the user. Which is what I am trying to reproduce using OL3 with no success.
Is there anything available in OL3 to have text on the map which behaves like a Point feature? As in, can be moved in edit mode and attached to the map in a vector layer.
Yes it is possible if you set correctly the style for markers (without using an image):
new ol.style.Style({
text: new ol.style.Text({......
Look at the following working example:
http://jsfiddle.net/pfavero/yabta24t/13/
I think Overlay is what you need: see http://openlayers.org/en/master/examples/overlay.html
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.
Please see the following image. I want to be able to specify polygon/polyline so that the only area covered by it is visible. So far I have found methods to specify overlay so that specific portion on google maps is overlayed. I want the exactly opposite.
I tried adding a rectangle overlay over the current visible area to get the greyed out effect. Then I added the polygon overlay. My idea was if I add transparent polygon, it should reveal the map below it. It didn't work though. Any idea on how this can be done?
Solution to this problem could be similar to I want to create a Donut with Javascript API V3(Empty space inside like a hole).
See also example at jsbin.
You have to define two paths "in different directions". Outer path could be defined using coordinates from map.getBounds(). Inner path is your polygon.
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