Problems with points/projection?

1224
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
derekswingley1
Frequent Contributor
How are you setting up your page layout? In the past, I've seen some offset/graphic placement problems when using certain CSS rules. If possible, I'd recommend using dojo's dijit layout widgets to layout your page. There are samples for this, check out the "Layouts" section.
0 Kudos
DanielYim
New Contributor II
Derek, that may be the problem. I decided to stray from using the Dojo Layout manager for this application, and it looks like ESRI is punishing me for that.

With how my website works right now, it's very difficult to lay it out using Dojo as everything is CSS-driven and is animated accordingly. Do you happen to know any specifics of what's required to solve this issue? (Such as a BorderContainer/ContentPane wrapping the map div)

Also, shouldn't this be listed as an API bug?
0 Kudos
derekswingley1
Frequent Contributor
Hi Daniel,

Using a BorderContainer and nested ContentPanes is a pretty solid way of laying out a page. What are you doing with CSS that you couldn't apply to a content pane?

I would disagree that Esri is punishing you...Esri's role is to provide tools and components to make building geospatial web apps easier. You still need to deal with finer points of general web development and cross browser compatibility (dojo can help here).

What, specifically, would you log as a bug? We haven't even figured out what's causing your problem...

Full Disclosure:  I now work for Esri on the JS API team. Still sorting out the details of getting a globe under my names on the left.
0 Kudos
DanielYim
New Contributor II
My apologies for the ESRI quip.

I have some stacked elements and overlays that do not fare well with Dojo's Layout management system. Other than this issue, everything else should be cross-browser compatible.

The issue (I guess not yet a bug) is that the graphics layer's rendering frame begins at exactly 50% of my page's width, and thus shifts everything to the right.

Some proof:
In both of these images, I am drawing a zoom rectangle using shift-click and drag. When I make the box on only one half of the page, you can see that the grey shaded rectangle and its thick red border are there in its entirety: Screenshot. But when I drag the rectangle past the exact 50% mark of my page, you will see that the box loses its left border, meaning that I've reached the edge of the rendering "frame": screenshot.

So, the root of my problem is that this magic frame is starting from the middle of the page instead of being aligned to the left.
Any thoughts? Could this be a legitimate bug? I feel as if the user should not be confined to using Dojo's layout system, especially when the aforementioned rendering frame should just attach to the map's DOM node and not specifically a Dojo dijit.
0 Kudos
derekswingley1
Frequent Contributor
No worries. Thanks for elaborating and posting additional screen shots. You're definitely not locked into using any dojo dijits but they just make life easier.

Can you post your CSS for the page in question? For this to be a bug, we would need to be able to describe it as "Graphics are shifted 50% of the page width when ____ is ____". We still can't do that.
0 Kudos
DanielYim
New Contributor II
No worries. Thanks for elaborating and posting additional screen shots. You're definitely not locked into using any dojo dijits but they just make life easier.

Can you post your CSS for the page in question? For this to be a bug, we would need to be able to describe it as "Graphics are shifted 50% of the page width when ____ is ____". We still can't do that.


I hope this will help: http://arcgis03.crgsc.org/EODay/images/styles.css
It might be useful to note that I am also using YUI CSS Reset styles found here, but I don't think that's the problem as the issue still occurred when I didn't import that stylesheet.

I can give you the full HTML/JS/CSS source if required, but I'd have to make some temporary map services on our production server which will take some time. Let me know if you need that.
0 Kudos
derekswingley1
Frequent Contributor
Thanks again. Seeing your markup would be helpful. Can you link to (or post as an attachment) a copy of your HTML?
0 Kudos
DanielYim
New Contributor II
Thanks again. Seeing your markup would be helpful. Can you link to (or post as an attachment) a copy of your HTML?


Here you go.
0 Kudos
derekswingley1
Frequent Contributor
Try commenting out the YUI reset link and removing "text-align: center;" from your html, body style declaration in styles.css. Does that result in things lining up correctly?
0 Kudos