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)
Related
I'm making a web application for a touch screen that requires a 'rotate screen' functionality. It's easy to rotate everything using CSS transform, and it works on most pages. The problem is when there's a plugin like Mapbox that uses mouse events, the events' position are still relative to the view port. For example, after I rotate <body> 180 degrees, and click top left of the map, which is bottom right of the browser, mapbox would think I clicked bottom right of the map. Same with dragging, it just moved the map the opposite direction.
Is there a better way to rotate a whole page, including all the mouse events? Or is there a way to work around it like automatically replacing mouse event coordinates based on rotation?
I would recommend rotating web view itself, as suggested by Pamblam above. GL JS (like most Javascript libraries) is not designed to map inputs to account for CSS transforms.
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).
For example, I want to set a leaflet marker always pin to the bottom-right corner of the leaflet map.
Does anyone have ideas about this?
There are a couple of ways to approach this, depending on what you want to accomplish.
This request for a centered "floating" crosshairs icon sounds very similar to your request. You essentially use getCenter() to create a fixed reference point, then use setLatLng() to update your marker's location relative to the map's center each time the user pans.
If the point you'd like to pin is purely cosmetic, you could just use HTML and CSS to position it on the page. This example, which is also referenced in the previous example, uses CSS to position an icon within a span as a visual reference point, then takes advantage of getCenter() to add lat/lon values to the form on the left of the page.
You can make use of getCenter(), getSize(), and L.marker() to pin to the bottom-right.
Reference: http://leafletjs.com/reference.html
I'm trying to build an interactive map and I'm looking for information on how to have a click and drag in one window, affect an image in its parent window.
As this is hard to explain if you visit http://liamg.co.uk/map/map.html you will see a small window/map in the top left, Id like to be able to drag a small window around the map and have that move the larger/zoomed in image, does this make sense?
Any information/help is greatly appreciated!
jquery supports drag n drop elements, see here: http://jqueryui.com/demos/draggable/
you have to set the right boundaries, and then add an event that performs on drop in which you will read the position of the dropped element and can then apply it to the map however you want to.
The right example you want is this: http://jqueryui.com/demos/draggable/constrain-movement.html
The first one in the box has the boundaries of the box.
And here you see how to react on the drop: http://jqueryui.com/demos/draggable/events.html
I think what you need is not exactly a drag event, you want a element moving only inside the little map, yeah?
Let me explain:
1- Add a listener to mouse down, up and move to that little map;
2- When flag mousedown is true, mousemove works changing a position of a square div around the little map (showing what portion of image the user is seeing). Use pageX and Y (coordinates);
3- Make the math by size of the portion div and size of the big overflowed with the full map to show the exactly zoomed portion of the map.
I belive drag is really implemented when your move a think around all the document, or using the drop event. But it's what I think.
I have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.
It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.