position lat / lon sur une carte D3.js

J’ai ce code, qui crée essentiellement une carte D3.js et crée un “cercle” lorsque quelqu’un “frappe” la page en fonction de son emplacement IP, cela a été fait à l’origine à Raphael et j’essaie simplement d’utiliser la bibliothèque D3.js , mais je suis coincé sur la manière de placer le “cercle” directement sur la carte avec les bonnes coordonnées: –

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.counsortinges = self.svg.append('svg:g').attr('id', 'counsortinges'); // Load data from .json file d3.json("/ui/data/world-counsortinges.json", function(json) { self.counsortinges.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.counsortinges.append('svg:circle') .attr("cy", lon, lat) .attr("cx", lon, lat) .attr('r', 5); } // Initialise this.init(); }; var ZmgcClient; jQuery(function() { ZmgcClient = new ZmgcClient(); }); 

J’essaie de transmettre des données lon / lat et de dessiner un cercle à cet endroit de la carte, ce 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.counsortinges.append('svg:circle') .attr("r", 40.5) .attr("cx", longitude) .attr("cy", latitude); console.log(latitude, longitude); 

Le cercle est créé, mais il n’est pas dans la bonne position.

Qu’est-ce que je rate?

Tout conseil très apprécié.

il devait être en retard, il devrait être

  var mapCoords = this.geoCoordsToMapCoords(latitude, longitude); x = mapCoords.x; y = mapCoords.y; self.counsortinges.append('svg:circle') .attr("r", 5) .style("fill", "steelblue") .attr("cx", x) .attr("cy", y); 

et non la latitude, les valeurs de longitude.