0

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?

2080
  • 1,223
  • 1
  • 14
  • 37

1 Answers1

1

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);
})
2080
  • 1,223
  • 1
  • 14
  • 37
mwilson
  • 12,295
  • 7
  • 55
  • 95
  • The polymap may be panned and zoomed in, so this only gets me part of the way – 2080 Mar 11 '20 at 00:43
  • Although your question states that you don't want `map.mouse(e)`, that is your only option from what I can tell. Based on their docs, it's exactly what you want (sounds like it handled zoom state). Can you create a calculator function to fill your gap? – mwilson Mar 11 '20 at 00:49
  • ... *"Returns the position of the mouse, as determined from the given mouse event e, in the map’s coordinate space. The returned position is an object with x and y number attributes. Typically, this method returns the pageX and pageY attributes of the event e, minus the top-left position of the map container; however, this method takes into consideration any custom transforms that have been applied to the map container through SVG."* – mwilson Mar 11 '20 at 00:49
  • I'll try. It's possible to calculate the zoom level with Math.pow(map.zoom(), 2), but I'm not sure how to access the pan values. – 2080 Mar 11 '20 at 00:50
  • 1
    If you can create a small repro of the issue it might be better so I can provide a more accurate answer. Can you spin up a JSFiddle or do it within the SOF Code Snippet? – mwilson Mar 11 '20 at 00:53
  • 1
    I may have it: `map.locationCoordinate(map.pointLocation(map.mouse(e)))`. Will reply soon – 2080 Mar 11 '20 at 01:01