Add current location point to map and zoom on page load

[JohnPreston]

Hi I would like identify the current location and zoom to that point when the page loads. I am able to zoom to the current location when clicking a button but I want to do it automatically when the page loads. When I just call the function (used in onclick) when loading the page I get this error: "Unable to get value of the property 'clear': object is null or undefined" on  myMap.graphics.clear();

I have tried moving pieces of code to define the map with no luck. Anyone have ideas?

Here is the code

<script type="text/javascript">
        dojo.require("esri.map");
        // dojo.require("esri.graphic");
        // dojo.require("esri.geometry.Point");
        // dojo.require("esri.symbol");
        dojo.require("dijit.form.NumberTextBox");
        dojo.require("esri.tasks.geometry");
        var myMap, myTiledMapServiceLayer, gsvc;
        var projX, projY;
       
        function init() {
            myMap = new esri.Map("mapDiv");
            myTiledMapServiceLayer = new
            esri.layers.ArcGISTiledMapServiceLayer
            ("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
            myMap.addLayer(myTiledMapServiceLayer);
        }

        // geometry Service
        gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            }
            else { x.innerHTML = "Geolocation is not supported by this browser."; }
        }

        function showPosition(position) {
            alert(position.coords.latitude + " " + position.coords.longitude);
            var y = position.coords.latitude;
            var x = position.coords.longitude;
            myMap.graphics.clear();
            var pt = new esri.geometry.Point(x, y, new esri.SpatialReference({ wkid: 4326 }));
            var wm = esri.geometry.geographicToWebMercator(pt);
            var graphic = new esri.Graphic(wm, // geometry
            new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1),
            new dojo.Color([0, 255, 0, 0.25])), // symbol
            {'title': 'Test Point Location', 'content': 'Your point feature' }, // attributess
            new esri.InfoTemplate('${title}', '${content}')
            );
            myMap.graphics.add(graphic);
            var outSR = new esri.SpatialReference({ wkid: 102113 });
            gsvc.project([pt], outSR, function (result) {
//                dojo.byId('results').innerHTML = "X:" + ' ' + result[0].x.toFixed() + ',' + "Y:" + ' ' + result[0].y.toFixed();
//                projX = result[0].x.toFixed();
//                projY = result[0].y.toFixed();
//                alert(projX + "," + projY);
            });
            var gp = new esri.Graphic(pt, new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1),
                new dojo.Color([0, 255, 0, 0.25])));
            myMap.graphics.add(gp);
            myMap.centerAndZoom(pt, 15);
        }
        dojo.addOnLoad(init);
        getLocation();
    </script>

[KenBuja · Accepted solution]

It could be that the map isn't ready by the time the code gets to the line "myMap.graphics.clear();". Have you tried putting that in the onLoad or onLayersAddResult event?

[JohnPreston]

Thanks Ken,

That got me headed in the right direction...I used dojo.connect to add the MapReady handler then called my locate function from the handler.

function init() {
            var popup = new esri.dijit.Popup({ fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])) }, dojo.create("div"));

            myMap = new esri.Map("mapDiv", {
                infoWindow: popup
            });
            myTiledMapServiceLayer =
            new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
            myMap.addLayer(myTiledMapServiceLayer);
            myDynamicServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisappserv/ArcGIS/rest/services/Engineering/Pits/MapServer");
            myMap.addLayer(myDynamicServiceLayer);
            dojo.connect(myMap, "onLoad", mapReady);
        }

        function mapReady(map) {
            getLocation();
            dojo.connect(map, "onClick", executeIdentifyTask);
            identifyTask = new esri.tasks.IdentifyTask("http://gisappserv/ArcGIS/rest/services/Engineering/Pits/MapServer");
            identifyParams = new esri.tasks.IdentifyParameters();
            identifyParams.tolerance = 50;
            identifyParams.returnGeometry = true;
            identifyParams.layerIds = [0];
            identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
            identifyParams.width = map.width;
            identifyParams.height = map.height;
        }

[TimCollyer]

Consider using "onLayersAddResult" instead of "onLoad".

The documentation for onLayersAddResult states:

Fires after all layers are added to the map using the map.addLayers method

As opposed to "onLoad" which fires after the first layer is added to the map.

In your case I don't think it will cause an issue, but if for example in your "mapReady" function you attempt to call any methods on your "myDynamicServiceLayer", you might get some errors if that layer has not finished loading.