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).
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)
I'm using mapbox GL js to display linestrings.
Those linestrings are clickable in order to display various information about the linstring in a popup using :
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(popup)
.addTo(map);
But I have the feeling that the clickable area where the popup is displayed is very narrow. It can even manage to display the popup everytime on the first clic...
Is there a way to enlarge this zone ?
Thanks
A common work around I use is to create a second line layer underneath, with a line-opacity of 0.01 and a line-width of 10. Add the click handler onto that line instead.
I have an image of a map area. I also have a second image which is a zoomed in area of the same map. I want to click a button and have the second image replace the first one, but I want some kind of an animation zoom effect to take place, also it would be nice to have a reverse animation effect for when the user clicks to see the entire map. I have no idea what approach to take on this. Any help would be much appreciated. Thank you guys!
The map image I use is a very stylized and minimalistic version of an actual map so I really rather just due some simple image manipulation and not use a real map api.
If there's a way to use a larger image and be able to click on a mapped area inside the image and have it zoom in and out, that I think would be the best way to handle this.
In Google maps API v3 I add a marker and a shadow. I'm using this as a bit of a hack because I have 2 elements to my marker (type and status) so I use the shadow option to display my second image. When the user highlights a marker, I bounce it for one second. All that works fine except that the clever Google programmers have made made the marker bounce upwards and the shadow bounce at 45 degrees (approx 1.30 on the clock face).
The question: is it possible to make both images bounce upwards, so they are together?
I think using custom icons where the shadow is "glued" into the same image is the easiest solution:
http://jsfiddle.net/jRkFp/ (click on the marker)
http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html (see the Pins section)
I think I have seen the image files for the default marker somewhere if you must use those.
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.