I'm currently working on a project that requires that I have a div stacked above a Google Map. However, I need to pass the mousemove event of the div to the Map. To do that, I need to find the LatLng co-ordinates from the map container pixel co-ordinate (since triggering the Maps mousemove event requires the LatLng co-ordinates).
Is there any other way to pass the mousemove event from the div to the map, and if not, how do I go from the Map container co-ordinates to LatLng. I read that doing so requires creating a dummy overlay, and then using the getProjection() on that to get a MapCanvasProjection, and finally calling the fromContainerPixelToLatLng(). Is there any simpler way or do I really have to create a dummy overlay first?
As far as I can tell, this is the way you have to do it. I was reluctant at first, too, since it seemed like such overkill, but once I did it everything worked great. Here's an example implementation with a convenient delayedInit() callback:
function Dummy(map) {
this.setMap(map);
}
Dummy.prototype = new google.maps.OverlayView();
Dummy.prototype.draw = function() {
if (!this.ready) {
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
}
Dummy.prototype.onAdd = function(){
// the Overlay dummy is ready and can be called upon
delayedInit();
}
var dum;
... and after you've instantiated your Google map:
dum = new Dummy(map);
Related
(I know it will be unstable but I still want to try it)
I want to move around in aframe scene using accelerometer
AFRAME.registerComponent('acccam',{
window.addEventListener('devicemotion', function(){
var acc = event.acceleration;
this.el.object3D.position.x += acc.x*9.8;
this.el.object3D.position.y += acc.y*9.8;
this.el.object3D.position.z += acc.z*9.8;
}, true);
})
I expect the camera to move or at least shake/something but nothing is happening could getelement by id, get attribute and set attribute be used to update the position by taking temporary values and then cloning them if yes then how?
Make sure the event is firing, and make sure you don't have like look-controls also enabled on the same entity or it will be overridden.
You can need to make sure this is the correct pointer. When you wrap in function (), this becomes window. You can use (evt) => { instead of function (evt) {
I am new in Openlayers 3. I have vector layer importing from geojson file. I would like to show information about my feature after click on vector layer.
Any idea how I can do it?
I used the library from here for this purpose. The sample code is
var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
//handling Onclick popup
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var coord = event.feature.getGeometry().getCoordinates();
popup.show(coord, '<div><h2>Tilte</h2><p>' +feature.get('<property_in_single_quotes>')+ '</p></div>');
}
});
Hope this helps
Take a look at these examples:
1) http://openlayers.org/en/v3.14.1/examples/vector-layer.html?q=overlay
2) http://openlayers.org/en/v3.14.1/examples/popup.html?q=overlay
Instead of putting the vector information next to the map, you put it in the popup <div> you created.
I am building an RIA application using Flex 4.6 that contains a main borderContainer (page) that can contain some other borderContainers (graphic or text elements).
I added an event listener on the page to listen to click events:
page.addEventListener(MouseEvent.CLICK, clickHandler, true);
clickHandler looks like this:
private function clickHandler(event:MouseEvent):void
{
// Remove event listeners
page.removeEventListener(MouseEvent.CLICK, clickHandler, true);
// Get click position
objX = event.localX;
objY = event.localY;
}
My problem is that although the event's currentTarget is always the page (normal), the target can either be the page or one of its children, and then localX doesn't give me the position on the page but on the child.
Is there a way to make sure the page is always the target of the event? Something like stopping the capturing phase on the page so it doesn't go deeper?
Thanks in advance for your help
Darrel
I think you may be asking the wrong question. As I understand it, you want the x/y position relative to 'page'. You can use the DisplayObject#globalToLocal() function to find this.
Just take the the global coordinates and convert them to local coordinates relative to 'page':
var coordinates:Point = new Point(event.stageX, event.stageY);
coordinates = page.globalToLocal(coordinates);
objX = coordinates.x;
objY = coordinates.y;
I understand how to get my current location with HTML5.
How do I add a click handler, so when a button is pressed it shows my current position on the map?
Google's example pretty much explains how it's done, but the button is set to predefined coordinates. How do I attach the "Home" button to current position coordinates instead?
Custom Control Example
From Google demo
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
As initialLocation is global you can use this to set the click event listeners: simply set the map to initialLocation
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(initialLocation)
});
I'm trying to enable a double click event on a flex control without disabling the default mouseup/mousedown behaviors.
I'm using the ESRI Flex API for arcgis server, and I have a map control with one background layer and a GraphicLayer. The graphics layer has several Graphic objects that respond to mouseover, and allow the user to pan the map if they click and hold. However, when I implement a double click event handler for the graphic objects, they no longer seem to bubble up their default behavior to the map.
Is there a way to implement a double click on a Graphic object while preserving the old behavior from clicking and holding?
I solved this by attaching the double click event to the map, rather than the graphic, and using the target attribute of the event to get the graphic I wanted to use.
Like this:
map.addEventListener(MouseEvent.DOUBLE_CLICK, function(event:MouseEvent):void
{
var graphic:Graphic = event.target as Graphic;
if(graphic)
{
...
}
});
If you set the "checkForMouseListeners" property to false on your Graphic objects, then the default map click/drag behavior will be preserved.
graphic.addEventListener(MouseEvent.DOUBLE_CLICK, function(event:MouseEvent):void {
var graphic:Graphic = event.target as Graphic;
if(graphic) {
...
}
});
//preserve the default click/drag behavior on the map
graphic.checkForMouseListeners = false;
http://resources.esri.com/help/9.3/ArcGISServer/apis/Flex/apiref/com/esri/ags/Graphic.html#checkForMouseListeners