Develop Reference

JavaScript Polymaps library: Get mouse coordinates

I use the polymaps library to display a custom tiled map. Whenever the user clicks on it, I need to know the coordinates of that point. Not the lat/lon values that map.mouse(e) gives, but pixel coordinates.
var po = org.polymaps;
var div = document.getElementById("map");
var map = po.map()
.container(div.appendChild(po.svg("svg")))
.zoomRange([0,8])
.zoom(1)
.add(po.image()
.url(getTile));
map.add(po.interact())
.add(po.hash());
$(div).mousemove(function(e) {
???
})
Does this library provide a function to do this?

To obtain the mouse position on the original image from which the tilemap was created, use the following code:
$(div).mousemove(function(e) {
// Get column, row and zoom level of mouse position
var crz = map.locationCoordinate(map.pointLocation(map.mouse(e)));
// Normalize the column and row values to the 0..1 range
var zoomMultiplier = Math.pow(2, crz.zoom-1);
var x01 = crz.column/zoomMultiplier;
var y01 = crz.row/zoomMultiplier;
// Multiply with the original image width and height
var originalWidth = 32768;
var originalHeight = 32768;
var mx = x01*originalWidth;
var my = y01*originalHeight;
// Now we have the mouse coordinates on the original image!
console.log(mx, my);
})

Google maps zoom in on marker

I'm using the Google Maps API. When I click on a map marker, I want the map to zoom in one step, but maintain the marker's position relative to the window.
This is similar to when you use the mouse wheel to zoom: the zooming is towards the current cursor position.
The map.setZoom() function zooms relative to the center of the map. This is not what I want.
Can't find any simple solution to this, anyone has a clue?

Hy please try this. Automatically zooming marker.
float zoomLevel = 16.0; //This goes up to 21
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng, zoomLevel));

This kind of works, not an elegant solution:
function zoomInAtMarker(marker)
{
var pos = marker.getPosition();
var bounds = map.getBounds();
map.setZoom(map.getZoom() + 1);
var span = map.getBounds().toSpan();
var s = pos.lat() - span.lat() * (pos.lat() - bounds.getSouthWest().lat()) / bounds.toSpan().lat();
var w = pos.lng() - span.lng() * (pos.lng() - bounds.getSouthWest().lng()) / bounds.toSpan().lng();
map.panToBounds({ south:s, north:s + span.lat(), west:w, east:w + span.lng()});
}

How to do hit detection of mouse in Three.js using PointerLockControls?

I made an open source project. It is a data visualizer for your books in 3D using Three.js. (https://github.com/AlinCiocan/BooksIn3D). And now I want to do detect if a user is in front of a book if pressed a key. Something like this:
For example, in the above image, the cursor hand it is not hitting any books.
I tried my best to actually make a function to work, but I am stuck. I searched if there any question on SO on how to do hit detection using PointerLockControls, but I found nothing. I must say that my cursor hand it is not moving, it is always on the center of the screen.
function hitDetection(targets, callback) {
var projector = new THREE.Projector();
var raycaster = new THREE.Raycaster();
var mouse = {};
// it is always the center of the screen
mouse.x = 0;
mouse.y = 0;
var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
var cameraDirection = controls.getDirection(vector).clone();
projector.unprojectVector(cameraDirection,camera );
var ray = new THREE.Raycaster(controls.getObject().position, cameraDirection.sub(controls.getObject().position).normalize());
var intersects = ray.intersectObjects(targets);
// if there is one (or more) intersections
if (intersects.length > 0) {
var hitObject = intersects[0].object;
console.log("hit object: ", hitObject);
callback(hitObject);
}
}

Move OpenLayers.Popup up to 10 pixel and left 15 pixel?

Good afternoon, I have a popup that is in the map and I want only move 10 pixels high and 15 pixels to the left, the problem is that when you change its position in latitude and longitude, is in another position completely and when I zoom away from the marker, what I want is just to move to the new position regardless of the zoom, always remains above the marker.
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('/openlayers/img/marker.png',size,offset);
var lonlat = new OpenLayers.LonLat(long,lat);
var proj_1 = new OpenLayers.Projection("EPSG:4326");
var proj_2 = new OpenLayers.Projection("EPSG:900913");
var EPSG = lonlat.transform(proj_1,proj_2);
var marker = new OpenLayers.Marker(EPSG, icon);
markers.addMarker(marker);
marker.events.register("click", marker, function(e){ // on click popup
var popup = new OpenLayers.Popup.FramedCloud(id,
marker.lonlat,
new OpenLayers.Size(200,200),
'<div class="popup">info example</div>',
null,true);
map.addPopup(popup);
});
var labelepopup = new OpenLayers.Popup(null,
EPSG,
new OpenLayers.Size(37,13),
'<p style="font-size: 8.5px;">always info</p>'
);
map.addPopup(labelepopup);
The popup on the marker as labelepopup appear, all I want is to accommodate the labelepopup above the marker.

You can use getPixelFromLonLat map function to get the exact pixel from a latitude and a longitude and then use the Pixel object returned to add or remove the desired pixels. Then you can change popup position using moveTo popup function that requires a Pixel object.
Something like this:
var pixel = map.getPixelFromLonLat(popup.lonlat); //or use another OpenLayers.LonLat object
pixel.x += DESIRED_X_AMOUNT;
pixel.y += DESIRED_Y_AMOUNT;
popup.moveTo(pixel);

Drawing line (freeform) on Google maps?

Hi I want to draw a line (free-form, Photoshop pencil / paintbrush style) over Google maps.
What would be the best way to do it?
How complicated would it be to do this AND keep the zoom option (so that line scales / disappears when the map is scaled)?
Which would be the best library to use for that (canvas? svg? something else)?

You could use the built indrawing tools, but if I recall correctly, you would need to click quite a bit to get a free form line.
Here's another pretty rough idea. Capture the mouse coordinates of the map container, grab the latLng from a google.maps.MapCanvasProjection and push the coordinates to a polyline path.
var map;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var markers = [];
var isDrawing = false;
var overlay = new google.maps.OverlayView();
overlay.draw = function () {};
overlay.setMap(map);
// Add a listener for idle event and call getElevation on a random set of marker in the bound
google.maps.event.addListener(map, 'click', function () {
var polyLine = new google.maps.Polyline({
map: map
});
$("#map").mousemove(function (e) {
var pageX = e.pageX;
var pageY = e.pageY;
var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));
var latLng = overlay.getProjection().fromDivPixelToLatLng(point);
polyLine.getPath().push(latLng);
});
});