AnsweredAssumed Answered

Add current location point to map and zoom on page load

Question asked by gopre400 on Dec 31, 2013
Latest reply on Jan 5, 2014 by TimSparq
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>

Outcomes