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
Related
I recently set up a non geographical map with leaflet using an image layer. This obviously is a stupid decision working with 'bigger' maps due to high memory usage and the need to load the big image file so I decided to use a tile layer instead.
Working mostly as expected aside from one thing: I can't seem to be able to drag outside of the map, it just jumps back so the map covers the screen. I'm not sure what causes that as I read that this behaviour usually needs to be set manually using maxBounds. Tried setting that to null, doesn't change. The only new thing introduced is Leaflet Rastercoords (https://github.com/commenthol/leaflet-rastercoords) which I'm unsure if that's causing the problems.
Any way to resolve that? Not sure where to look next.Thank you!
I achieved the behaviour you want using the following work around:
map.setMaxBounds(null); //map being the leaflet map.
This need to be called after the initialization of the map and of the raster coords layer.
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.
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