Question

I have a nodejs app which takes the user’s ip address and trasposes it onto a raphael map based on the user’s lat/lon position.

you can see it here http://zmgc.net/;maps if you open a new tab and access the http://zmgc.net home page in the ;maps page you should get a red person svg which is centered.

the weird thing is that the City and ‘Users title’ are correctly displayed, but the person renders in the middle of the map!

here is the code that draws the person marker:

  this.drawMarker = function (message) {
    var latitude = message.latitude,
        longitude = message.longitude,
        text = message.title, //Fixme, this is the user's name
        city = message.city,
        x, y;

    var mapCoords = this.geoCoordsToMapCoords(latitude, longitude);
    x = mapCoords.x;
    y = mapCoords.y;

    var person = self.map.path(personPath);
    person.scale(0.06, 0.06);
    person.translate(-255, -255); // Reset location to 0,0
    person.translate(x, y);
    console.log(x, y);
    person.attr({
      fill: 'red',
      stroke: 'transparent'
    });

    var title = self.map.text(x, y + 11, text);
    title.attr({
      fill: 'red',
      "font-size": 12,
      "font-family": "'Helvetica Neue', 'Helvetica', sans-serif",
      'font-weight': 'bold'
    });
    var subtitle = self.map.text(x, y + 21, city);
    subtitle.attr({
      fill: '#999',
      "font-size": 7,
      "font-family": "'Helvetica Neue', 'Helvetica', sans-serif"
    });

the full code is https://github.com/nkhine/phoenix/blob/master/ui/core/js/node/public/client.js

any advice much appreciated.

Answer 1

first translate that then scale, because scale() will affect following translates()

so in the code would be:

var person = self.map.path(personPath);
person.translate(-255, -255); // Reset location to 0,0
person.translate(x, y);
console.log(x, y);
person.scale(0.06, 0.06);
person.attr({
  fill: 'red',
  stroke: 'transparent'
});

but the correct correct sollution should be moving the path itself, not transforming its coordinate system. This is explained with an example here:
http://cancerbero.vacau.com/raphaeltut/#sec-types-path-moving