Question

I have this code, that basically creates a D3.js map and creates a ‘circle’ when someone ‘hits’ the page based on their IP location, this was originally done in Raphael and i am trying to just use the D3.js library, but I am stuck on how to place the ‘circle’ directly on the map with the right co-ordinates:-

function ZmgcClient() {
    var personPath = "M255.968,166.154c34.206,0,61.936-27.727,61.936-61.934c0-34.208-27.729-61.936-61.936-61.936s-61.936,27.728-61.936,61.936 C194.032,138.428,221.762,166.154,255.968,166.154z M339.435,194.188c-13.082-13.088-28.625-20.924-84.83-20.924 c-56.214,0-71.38,8.505-83.796,20.924c-12.422,12.416-8.23,144.883-8.23,144.883l27.485-65.304l17.28,194.554l49.856-99.57 l46.521,99.57l16.456-194.554l27.487,65.304C347.664,339.07,352.521,207.271,339.435,194.188z";
    if (! (this instanceof arguments.callee)) {
        return new arguments.callee(arguments);
    }
    var self = this,
    width = $('#map').width(),
        mapCanvasHeight = (width * 0.45);

    this.init = function() {
        self.drawMap();
        self.setupBayeuxHandlers();
    };

    this.setupBayeuxHandlers = function() {
        $.getJSON("/config.json", function (config) {
            self.client = new Faye.Client("http://" + window.location.hostname + ':' + config.port + '/faye', {
                timeout: 120
            });

            self.client.subscribe('/stat', function (message) {
                // console.log("MESSAGE", message);
                self.drawMarker(message);
            });
        });
    };

    this.drawMap = function () {
        var data;
        // Most parts of D3 don't know anything about SVG—only DOM.
        self.map = d3.geo.equirectangular().scale(width);
        self.path = d3.geo.path().projection(self.map);
        self.svg = d3.select('#map').append('svg:svg')
            .attr("width", "100%")
            .attr("height", "100%")
            .attr("viewBox", "0 0 " + width + " " + mapCanvasHeight);

        self.countries = self.svg.append('svg:g').attr('id', 'countries');
        // Load data from .json file
        d3.json("/ui/data/world-countries.json", function(json) {
            self.countries.selectAll("path")    // select all the current path nodes
            .data(json.features)                // bind these to the features array in json
            .enter().append("path")             // if not enough elements create a new path
            .attr("d", self.path)               // transform the supplied jason geo path to svg
            .on("mouseover", function(d) {
                d3.select(this).style("fill","#6C0")
                    .append("svg:title")
                    .text(d.properties.name);})
            .on("mouseout", function(d) {
                d3.select(this).style("fill","#000000");})
        });
    }

    this.geoCoordsToMapCoords = function (latitude, longitude) {
        latitude = parseFloat(latitude);
        longitude = parseFloat(longitude);

        var mapWidth = width,
            mapHeight = mapCanvasHeight,
            x, y, mapOffsetX, mapOffsetY;

        x = (mapWidth * (180 + longitude) / 360) % mapWidth;

        latitude = latitude * Math.PI / 180;
        y = Math.log(Math.tan((latitude / 2) + (Math.PI / 4)));
        y = (mapHeight / 2) - (mapWidth * y / (2 * Math.PI));

        mapOffsetX = mapWidth * 0.026;
        mapOffsetY = mapHeight * 0.141;

        return {
            x: (x - mapOffsetX) * 0.97,
            y: (y + mapOffsetY + 15),
            xRaw: x,
            yRaw: y
        };
    }

    this.drawMarker = function (message) {
        var lon = message.longitude,
            lat = message.latitude,
            city = message.city;

        self.countries.append('svg:circle')
            .attr("cy", lon, lat) 
            .attr("cx", lon, lat)
            .attr('r', 5);
    }
    // Initialise
    this.init();
};

var ZmgcClient;

jQuery(function() {
  ZmgcClient = new ZmgcClient();
});

I am trying to pass lon/lat data and draw a circle at that point on the map, this code:

this.drawMarker = function (message) {
    var latitude = message.latitude,
        longitude = message.longitude,
        text = message.title,
        city = message.city,
        x, y;

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

    console.log(x,y);
    self.countries.append('svg:circle')
        .attr("r", 40.5)
        .attr("cx", longitude)
        .attr("cy", latitude);
        console.log(latitude, longitude);

The circle is created, but it is not in the correct position.

What am I missing?

Any advice much appreciated.

Answer 1

it must have been late, it should be

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

    self.countries.append('svg:circle')
        .attr("r", 5)
        .style("fill", "steelblue")
        .attr("cx", x)
        .attr("cy", y);

and not the latitude, longitude values.