Display map using java script and rest all coding in vb.net

JulieBiju — Sun, 12 Dec 2021 07:45:11 GMT

Dear all,

Here I am very much forced to change silverlight API to javascript API in our web application. I am very new in Java and just trying to develop the web application in javascript. I need to write all coding in vb.net except map display. For that I wrote the code below.

Here init() function calling from page load.My problem is when I am trying to add some graphics it is giving me error "map is undefined".

How can I solve that?Please note If I will call addgraphics function from input button click then it is not showing any error

1.Is it possible to add graphic from code behind using vb.net?If S how can I access map variable from code behind

Protected Sub Page_LoadComplete(sender As Object, e As EventArgs) Handles Me.LoadComplete

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "init", "init();", True)

End Sub

 <title>Google Maps Layer in ArcGIS JS API</title>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css"/>
        
    <style>
        html, body, #mapDiv{
        padding: 0;
        margin: 0;
        height: 100%;
            z-index: -1;
        }
        .auto-style1 {
        }
        .auto-style2 {
           height: 20px;
        }
        .auto-style3 {
            height: 20px;
        }
        .auto-style4 {
            text-align: left;
        }
        .auto-style5 {
            width: 137px;
        }
        .auto-style6 {
            height: 2%;
            width: 279px;
        }
        .auto-style7 {
            width: 279px;
        }
        #TxtAltareeqEng {
            width: 55px;
        }
        #TxtAltareeqEng0 {
            width: 55px;
        }
    </style>
     <script type="text/javascript">
         var djConfig = {
             parseOnLoad: true,
             baseUrl: './',
             modulePaths: {
                 // if use local copy, make sure the path reference is relative to 'baseUrl', e.g.:
                 //'agsjs': '../build/agsjs'
                 // use absolute path for online version. Note sometimes googlecode.com can be slow.
                 'agsjs': 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/1.05/build/agsjs'
             }
         };
        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4">
        </script>
        
        <script type="text/javascript">
            dojo.require("esri.map");
            dojo.require("dijit.form.Button");
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("agsjs.layers.GoogleMapsLayer");
            dojo.require("esri.layers.graphics");
         
            var map;
            var streetMap, esriTopo, gMap;
            var AltareeqArb, AltareeqEng;

            function init() {
                var initExtent = new esri.geometry.Extent({
                    "xmin": -14628212,
                    "ymin": 714227,
                    "xmax": 7718305,
                    "ymax": 9832858,
                    "spatialReference": {
                        "wkid": 102100
                    }
                });
                map = new esri.Map("mapDiv", {
                    extent: initExtent,
                    logo: true
                });

                AltareeqEng = document.getElementById('TxtAltareeqEng').value;
                AltareeqArb = document.getElementById('TxtAltareeqArb').value;
               
                AltareeqEng = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
                AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer";
                streetMap = new esri.layers.ArcGISDynamicMapServiceLayer(AltareeqEng, {
                    id: "streetMap"
                });
                map.addLayer(streetMap);

                esriTopo = initLayer(AltareeqArb, "esriTopo");

             

                gMap = new agsjs.layers.GoogleMapsLayer({
                    id: 'googlemaps',
                    visible: false,
                 
                });
                map.addLayer(gMap);



                //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) {
                    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 infoTemplate = new esri.InfoTemplate();
                var symbol = new esri.symbol.SimpleMarkerSymbol();
                symbol.setColor(new dojo.Color([0, 0, 255]));

                
                var cityLayer = new esri.layers.GraphicsLayer();
               
                map.addLayer(cityLayer);

                var geomPoint = new esri.geometry.Point(2022981.06, 13591805.53, new esri.SpatialReference({ wkid: 2278 }));
                var pointGraphic = new esri.Graphic(geomPoint, symbol);
                infoTemplate.content = 'dfdsfs'
                pointGraphic.setInfoTemplate(infoTemplate);
                           cityLayer.add(pointGraphic);
             
            }


            function initLayer(url, id) {
                var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, {
                    id: id,
                    visible: false
                });
                map.addLayer(layer);
                return layer;
            }

            function changeMap(layers) {
                hideImageTiledLayers(layers);
                for (var i = 0; i < layers.length; i++) {
                    layers.show();
                }
            }

            function hideImageTiledLayers(layers) {
                for (var j = 0, jl = map.layerIds.length; j < jl; j++) {
                    var layer = map.getLayer(map.layerIds);
                    if (dojo.indexOf(layers, layer) == -1) {
                        layer.hide();
                    }
                }
            }
            
        </script>

Re: Display map using java script and rest all coding in vb.net

JoshHevenor — Fri, 11 Sep 2015 14:28:58 GMT

The biggest newbie problem in JavaScript is scope. There are lots of articles, for instance:

Scope and this in JavaScript

The "dojo/base/lang" library has a function called hitch() that gets used for this often.

As for .NET, I would suggest doing whatever you can in JavaScript with stock ArcGIS services. When you run across cases that don't fit nicely then consider writing services in .net (our org. has a few c# services for these cases).

Re: Display map using java script and rest all coding in vb.net

MichaelVolz — Fri, 11 Sep 2015 14:39:42 GMT

Did you use the Silverlight builder for your Silverlight apps? I ask because ESRI has the WebAppBuilder which you can at least use as a starting point in the javascript environment. There are also many sample on the ESRI website for the javascript api. There is a learning curve, but these samples are a great start.

topic Re: Display map using java script and rest all coding in vb.net in ArcGIS JavaScript Maps SDK Questions

Display map using java script and rest all coding in vb.net

Re: Display map using java script and rest all coding in vb.net

Re: Display map using java script and rest all coding in vb.net