Problems with points/projection?

1236
11
06-10-2011 08:02 AM
DanielYim
New Contributor II
I am having a difficult time with the placement of point data that I am retrieving from a service. The most absurd thing is that all three of the big-name browsers (IE, Firefox, Chrome) are rendering these points completely differently.

Here are some screenshots:
Internet Explorer 9
Firefox 4
Chrome 11

Although Chrome renders the points correctly, Firefox displays them offset to the right, and Internet Explorer doesn't even display the points within the user's view (you have to scroll to the right in IE to be able to see the points--in other words, the points are even farther displaced to the right than FF).

I've looked into this being a projection problem, but debugging in Firebug shows me that every extent and geometry is working in wkid 26915.

I attached the code in question below. Any input would be much appreciated.

N.fn.initMapIcons = function() {
    var qTask, query;
    
    qTask = new esri.tasks.QueryTask(N.fn.getLayerURL("Political", "Polling Places"));
    query = new esri.tasks.Query();
    query.returnGeometry = true;
    query.outFields = ["PRECINCT", "SITE", "SITE_ADDRESS", "SITE_ST", "SITE_ZIP"];
    // This is a trivial query because we want to grab all values in the table
    query.where = "1=1";
    qTask.execute(query, function(featureSet) {
        var iconsLayer, i, graphic;
        
        iconsLayer = N.myMap.getLayer("Political_Icons");
        
        // Place all our findings into the special graphics layer
        for (i = 0; i < featureSet.features.length; i++) {
            graphic = featureSet.features;
            graphic.setSymbol(new esri.symbol.PictureMarkerSymbol("images/mapIcon_pollingPlaces.png", 24, 24));
            iconsLayer.add(graphic);
        }
        
        // Enable events so that we can manipulate/customize them, as seen below
        N.myMap.graphics.enableMouseEvents();
        
        dojo.connect(iconsLayer, "onMouseOver", function(evt) {
            var content, geom;
            content = evt.graphic.attributes;
            geom = esri.geometry.toScreenGeometry(N.myMap.extent, N.myMap.width, N.myMap.height, evt.graphic.geometry);
            N.myMap.infoWindow.setTitle(content.SITE);
            N.myMap.infoWindow.setContent(content.PRECINCT);
            N.myMap.infoWindow.resize(355, 140);
            N.myMap.infoWindow.show(geom, N.myMap.getInfoWindowAnchor(geom));
            N.myMap.setMapCursor("pointer");
            content = geom = null;
        });
        
        dojo.connect(iconsLayer, "onMouseOut", function(evt) {
            N.myMap.setMapCursor("default");
            N.myMap.infoWindow.hide();
        });
        
        iconsLayer = graphic = null;
    }, function(error) {
        console.log("Error at initMapIcons: " + error);
    });
};
0 Kudos
11 Replies
DanielYim
New Contributor II
Thank you! That fixed the issue. It seems like the problem occurred due to the map's DOM node having the CSS style text-align: center. Maybe as a fix, you guys can add a CSS rule to force a text-align: left on the map node?

As for myself, I fixed the problem by adding text-align: center to the mapDiv's CSS selector.

Thanks again for the help. I appreciate it.
0 Kudos
derekswingley1
Frequent Contributor
Glad to help!
0 Kudos