Select to view content in your preferred language

Adding Graphic with different WKID than map?

1021
4
07-01-2010 02:19 PM
AdamPfister
Esri Contributor
Maybe it's just been a long day but I can't seem to figure out why this code puts my graphic at 0,0 instead of the specified x,y.  It's got to be something I'm overlooking.

Any help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>World Street Map</title>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css">
        <style>
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="text/javascript">
            var djConfig = {
                parseOnLoad: true
            };
        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0">
        </script>
        <script type="text/javascript">
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("esri.map");
            var map;
            function init(){
                map = new esri.Map("map");
                //Add the world street map layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
                map.addLayer(basemap);
                //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
                //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
                var resizeTimer;
                dojo.connect(map, 'onLoad', function(theMap){
                    addGraphic();
                    dojo.connect(dijit.byId('map'), 'resize', function(){ //resize the map if the div is resized
                        clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function(){
                            map.resize();
                            map.reposition();
                        }, 500);
                    });
                });
            }
            
            function addGraphic(){
                var gJson = {
                    "geometry": {
                        "x": 44.995833,
                        "y": -98.480556,
                        "spatialReference": {
                            "wkid": 4326
                        }
                    },
                    "attributes": {
                        "description": "Here is a description",
                        "name": "Name"
                    },
                    "symbol": {
                        "color": [255, 0, 0, 128],
                        "size": 6,
                        "angle": 0,
                        "xoffset": 0,
                        "yoffset": 0,
                        "type": "esriSMS",
                        "style": "esriSMSSquare",
                        "outline": {
                            "color": [0, 0, 0, 255],
                            "width": 1,
                            "type": "esriSLS",
                            "style": "esriSLSSolid"
                        }
                    },
                    "infoTemplate": {
                        "title": "Some Title",
                        "content": "Some Description"
                    }
                };
                
                var graphic = new esri.Graphic(gJson);
                map.graphics.add(graphic);
            }
            
            dojo.addOnLoad(init);
        </script>
    </head>
    <body class="tundra">
        <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
            <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
            </div>
        </div>
    </body>
</html>
0 Kudos
4 Replies
HallbjornViktorsson
Emerging Contributor
upps  sorry don't think my awnser will help you 😛 since I didn't read that you has different wkid
0 Kudos
derekswingley1
Deactivated User
I've always made sure the spatial reference of my graphics matches that of my basemap. I'm not sure if you can actually mismatch the two. Why not use esri.geometry.geographicToWebMercator(geometry) to transform your graphic's geometry to match your base map?

Also, I think your x,y coordinates are flipped if that point is supposed to be in the US. I'm sure you already know this but "lat, long" is actually "y, x."
0 Kudos
AdamPfister
Esri Contributor
i eventually did use the helper geometry method to convert to the basemap WKID.  i guess i was just hopeful that since DynamicServiceLayers can be reprojected on the fly, GraphicsLayers could be as well.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/map_customextent_and_sr.html

ah well.  thanks for the reply.
0 Kudos
derekswingley1
Deactivated User
Ah, OK. I think dynamic service layers can be reprojected on the fly because the the reprojection is done on the server (by the SOC process I assume). The JS API isn't actually doing the reprojecting...it's just sending the request to the map service with a specific SRID for the output image.
0 Kudos