I use OpenLayers v2.8 mapping library and I have multiple base layers and one overlay. That overlay is available with all the base layers, how do I put this overlay only to a specific base layer? I imagine it this way: when the right base layer is selected, overlay is shown, otherwise overlay is unavailable in the LayerSwitcher pannel.
Found a workaround for this: I use changebaselayer event on the OpenLayers.Map object to check if specific layer is displayed and the, enabling the specific overlays for it. Not enabling, actually when overlay is selected it triggers an event which checks if needed base layer is displayed, in this case, overlay is permitted to show himself.
Related
With openlayers I would like to make the current location visible and follow it with the view. The problem is that the current location updates from the device come in roughly every second and the resulting experience is not nice as the view jumps. This can be smoothed a little bit with a view animation, but then still the current location marker "jumps" on the map, like in this example.
I created an example where I put the current location in an animation (I used this example as base) and update the view directly in the animation. (btw: how can I avoid adding the helperMarker?)
This works but calling map.getView().setCenter while the animation seems wrong and I think this is the reason that sometimes the animation is not smooth and it slows down and stutters (reproducible in Chrome and Firefox).
I then implemented another way where I move the current location marker outside of the map into a div element and overlay the map at a fixed location and then I only need to animate the view and center it to the location of this div element. This seems to work but feels like a hack as the current location marker is no longer part of openlayers with potential problems regarding synchronization.
So, what is the proper way with Openlayers for a smooth "synchronizated" of the view and a current location marker?
(So probably something like this or this but for openlayers)
If you already have a view animation that follows the path you can simply draw the marker in the view center in a postrender handler.
vectorContext.drawGeometry(new Point(getCenter(map.getView().calculateExtent()))
I updated the example to keep the point in the view center during the animation (checkbox 'Smooth'):
https://codesandbox.io/s/track-position-vfdrx?file=/main.js
A postrender event on the vector layer only fires when at least one feature is drawn.
You can add the postrender event handler to the tile layer to avoid having a helper marker. (See my updated example above)
Currently I'm using drawing functionality of mapbox, but the button of start drawing is like other controls (like gps) are mapbox built in control buttons on the corner of the map.
Is there anyway that I can put the functionality to my cusomized button outside of the map component?
inspect the button and check the class name of them.
then put your map box in a div with {position: relative}, with your desired width and height
then give absolute position to your buttons..
I have one question. In past we just used open layers 2 and it used svg and we had some GIF markups on map (fire animations etc). Now we have open layers 3 map which use canvas to render the map. Is it now possible to still add GIF markups to the new map?
Now when I add a GIF, I just get only one "slide" from the GIF - it doesn't have animations.
What is the best way to do it? Render some SVG in canvas (how) or "refresh" the GIF element?
Thanks!
OK, I have completed this task :-) YES - it's possible to add a GIF with motion as icon to the point on map, but it requires some JS code.
I've done it with Overlays. And the hint is precompose event, which is fired on every time when something on map has been changed (very very often).
On this event we check which Feature has an icon with .gif extension (we can flag features before when we create Features).
If has, we check that overlay with this id exist:
if YES - just only change position of this overlay (coordinates of
feature)
if NOT - create new overlay with parameters like
coordinates, id of feature. Of course also create element on map
And remember to remove redundant overlays (when points are not visible in extent, or when we change the map or hide the layer).
I want to draw a dot each time the user clicks/touches a point on any web page. Ideally this would be some kind of transparent pane that draws these dots but also allows the clicks/touches to pass through the pane so that original page doesn't lose functionality.
I think you have to do two things. First of all create a click event listener on your body, that way you will catch all clicks. When clicked, place an dom element, for example a div on that position and format it as you wish.
Secondly look at this: Click through a DIV to underlying elements
Hope it helps!
I replaced marker shadow for background image of icon, so it will look like a frame of the image. And it looks fine. The problem is that somehow shadows has the same z-index so if two markers are together we can't see the frame (other image covers it). Because every icon has grater value of z-index than shadow. How can I change this?
The marker-shadows are always placed inside a different overlay(overlayShadow) , so you will not have any chance to move a shadow in front of any marker.
There may be different options, for example you can ommit the shadow and create a second marker using the shadow-image.