'use strict'; var BuoyAnalysisMap = { /** * */ reticle: { stations: [], x: 400, y: 300 }, /** * */ projection: d3.geo.mercator() .center([-122, 37.8]) .scale(2600) .translate([BuoyAnalysisData.mapW / 2, BuoyAnalysisData.mapH / 2]), /** * */ drawMap: function() { var path = d3.geo.path().projection(BuoyAnalysisMap.projection); d3.select("svg#map").selectAll('path') .data(BuoyAnalysisData.mapJson.features) .enter().append('path') .attr('d', path) .attr('class', function(d) { return 'feature-' + d.properties.iso_3166_2; }) .classed('feature', true) }, /** * */ drawStations: function() { var tmp; var station; var stations = []; for (var prop in BuoyAnalysisData.stationJson) { station = BuoyAnalysisData.stationJson[prop]; tmp = BuoyAnalysisMap.projection([station.lon, station.lat]); station.x = tmp[0]; station.y = tmp[1]; stations.push(station); } d3.select("svg#map").selectAll('circle') .data(stations) .enter().append('circle') .attr('cx', function(d) { return d.x; }) .attr('cy', function(d) { return d.y; }) .attr('r', 3) .attr('id', function(d) { return 's' + d.id; }) .attr('fill', '#f00') .attr('stroke', '#f00') .attr('stroke-width', 5) }, /** * */ drawReticle: function() { d3.select("svg#map").append('circle') .attr('r', 50) .attr('fill', 'rgba(200, 200, 200, 0.5)') // .attr('stroke', '#f00') .attr("transform", "translate(" + BuoyAnalysisMap.reticle.x + "," + BuoyAnalysisMap.reticle.y + ")") .data([ {"x": BuoyAnalysisMap.reticle.x, "y": BuoyAnalysisMap.reticle.y } ]) .classed('reticle', true); }, /** * */ findStationsUnderReticle: function() { var reticle = d3.select('.reticle').data()[0]; var dX, dY, squares, distance, station; var stations = []; for (var s in BuoyAnalysisData.stationJson) { station = BuoyAnalysisData.stationJson[s]; dX = reticle.x - station.x; dY = reticle.y - station.y; squares = Math.pow(dX, 2) + Math.pow(dY, 2) distance = Math.pow(squares, 0.5); if (distance < 50) { stations.push(s); } }; BuoyAnalysisMap.reticle.stations = stations; } };