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
2.
<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/MapServ..."; 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>
The biggest newbie problem in JavaScript is scope. There are lots of articles, for instance:
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).
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.