(function () { "use strict"; var ZOOM_OUT_SCALE = 10000; var ZOOM_IN_SCALE = 40000; var ZOOM_OUT_CENTER_Y = 40.6; var defaultScreenWidth = 1450; // At this window width, this centerX value causes the map to be centered. var ZOOM_OUT_CENTER_X_WINDOW_WIDTH_BASE = 1055; var ZOOM_OUT_CENTER_X_BASE = 3.7; angular.module("enrMapModule") .factory("mapSvgPathBuilder", ["d3Service", "topoJsonService", "officeJsonRegionFilter", function (d3Service, topoJsonService, officeJsonRegionFilter) { var calculateCenterX = function (windowWidth) { return ZOOM_OUT_CENTER_X_BASE + (ZOOM_OUT_CENTER_X_WINDOW_WIDTH_BASE - windowWidth) / 1000; }; var calculateZoomedInCenterPoint = function (zoomInMouseCoords, svgLayerCoords, windowWidth) { var mouseX = zoomInMouseCoords[0]; var mouseY = zoomInMouseCoords[1]; var svgWidth = svgLayerCoords[0]; var svgHeight = svgLayerCoords[1]; //TODO: Polish and Refactor //var centerX = 0.5 + (mouseX / 130); //centerX += (svgHeight - svgWidth) / 1000; //var centerY = 42.0 - (mouseY / 185); console.log("windowWidth", windowWidth); var xdefault = getXDefault(mouseX, windowWidth); var ydefault = getYDefault(mouseY, windowWidth, svgHeight); var centerX = 0.5 + (mouseX / xdefault); centerX += (500 - 800) / 1000; var centerY = 42.0 - (mouseY / ydefault); return [centerX, centerY]; }; var getXDefault = function (mouseX, windowWidth) { var xdefault = 160; var browser = navigator.userAgent; if (browser.indexOf('Chrome') > -1 || (browser.indexOf("Mozilla") > -1 && browser.indexOf("Firefox") > -1)) { if (windowWidth > defaultScreenWidth) { xdefault = 240; if (mouseX > 300 && mouseX <= 400) { xdefault = 300; } if (mouseX >= 450) { xdefault = 220; } } else { if (mouseX > 300) xdefault = 120; } } else { if (windowWidth > defaultScreenWidth) { xdefault = 160; } else { xdefault = 80; } } return xdefault; } var getYDefault = function (mouseY, windowWidth, svgHeight) { var ydefault = 160 if (svgHeight > 700 && windowWidth > defaultScreenWidth) { if (mouseY <= 200) { ydefault = 220; } else if (mouseY > 200) { ydefault = 180; } } else { if (mouseY > 100 && mouseY <= 200) ydefault = 140; else if (mouseY > 200) ydefault = 110; } return ydefault; } var injectNewPathInfoIntoMapGeoData = function (mapGeoData, windowWidth, zoomInMouseCoords, svgLayerCoords) { // Geo Data by itself has no concept of how that data is presented as a map. Our projection determines how we interpret and draw our geo data. var isZoomedIn = zoomInMouseCoords !== undefined && zoomInMouseCoords !== null; var centerPoint = isZoomedIn ? calculateZoomedInCenterPoint(zoomInMouseCoords, svgLayerCoords, windowWidth) : [calculateCenterX(windowWidth), ZOOM_OUT_CENTER_Y]; var scale = isZoomedIn ? ZOOM_IN_SCALE : ZOOM_OUT_SCALE; var projection = d3Service.geo.albers() .rotate([88.3, 0, 0]) .center(centerPoint) .scale(scale); // Convert our geoData into SVG path data and inject that data into the mapGeoData var topoJsonFeatures = topoJsonService.feature(mapGeoData, mapGeoData.objects.collection).features; var mapGeometries = mapGeoData.objects.collection.geometries; for (var i = 0; i < topoJsonFeatures.length; i++) { mapGeometries[i].pathData = d3Service.geo.path().projection(projection)(topoJsonFeatures[i]); var regionName = mapGeometries[i].properties.NAME; if (regionName == null) { // Get US Representative District Name from CD114FP property regionName = mapGeometries[i].properties.CD114FP; } if (regionName != null) { var isCounty = isNaN(regionName); if (isCounty) mapGeometries[i].properties.AREALABEL = regionName.toUpperCase() + " COUNTY"; else mapGeometries[i].properties.AREALABEL = "DISTRICT " + regionName; } else { mapGeometries[i].properties.AREALABEL = "INDIANA STATE"; } } }; return { injectNewPathInfoIntoMapGeoDataWithAreaLabel: function (mapGeoData, windowWidth, zoomInMouseCoords, svgLayerCoords) { injectNewPathInfoIntoMapGeoData(mapGeoData, windowWidth, zoomInMouseCoords, svgLayerCoords); } }; }]); }());