CODEWITHSUNDEEP
javascriptasp.net-mvcdojoarcgis-js-api
Behseini
Behseini

Reputation: 6330

Issue on using Dojo with ASP.Net MVC

I am trying to utilize and use Dojo on an ASP.Net MVC platform. in Index() view I have

@{
   ViewBag.Title = "Home Page";
}
<link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/nihilo/nihilo.css">
<link rel='stylesheet' href='http://js.arcgis.com/3.18/esri/css/esri.css' />
<script src="http://js.arcgis.com/3.18"></script>
<script src="~/Map/config.js"></script>
<div class="container">
   <a role="button" id="lib" class="btn btn-default">Add Libraries</a>
   <a role="button" id="sch" class="btn btn-default">Add Schools</a>
   <div class="col-md-12" id="map-div"></div>
</div>

in the config.js I have

(function () {
 'use strict';
 var pathRX = new RegExp(/\/[^\/]+$/), locationPath = location.pathname.replace(pathRX, '');
 require({
    async: true,
    aliases: [ ['text', 'dojo/text']],
    packages: [{
       name: 'MapCoctent',
       location: locationPath + '../Map/MapCoctent'
    }, {
       name: 'MapServices',
       location: locationPath + '../Map/MapServices'
    }, {
       name: 'Map',
       location: locationPath + '../Map',
       main: 'map'
    }]
 }, ['Map']);
})();

and in the map.js I have

require([
 'MapCoctent/appcontroller',
 'MapServices/mapservices',
 'dojo/domReady!'
], function (AppCtrl, mapServices) {
    'use strict';
    var appCtrl = new AppCtrl({
    elem: 'map-div',
    mapOptions: {
    basemap: 'streets',
    center: [-123.141608, 49.245291],
    zoom: 12,
    autoResize: false
 }
 });
    appCtrl.load();
});

and finally in mapservices.js I have

define(["esri/geometry/Geometry",
    "esri/geometry/Point",
    "esri/graphic",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/Color",
    "dojo/on",
    "dojo/dom"
], function (Geometry, Point, Graphic, SimpleMarkerSymbol,    SimpleFillSymbol, Color, on, dom) {
      on(dom.byId("sch"), "click", function () {
       var point = new Point(-123.141608, 49.245291);
       var markerSymbol = new SimpleMarkerSymbol();
       markerSymbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
       markerSymbol.setSize(12);
       markerSymbol.setColor(new Color([255, 0, 0]));
       var pointGraphic = new Graphic(point, markerSymbol);
       map.graphics.add(pointGraphic);
    });
});

in appcontroller.js I have

define([
 'dojo/_base/declare',
 'esri/map'
], function ( declare, Map) {
return declare(null, {
    map: null,
    options: {},
    constructor: function (options) {
       this.options = options;
    },
   load: function () {
       this.map = new Map(this.options.elem, this.options.mapOptions);
    }
});
});

but when I click on Add Schools button I am getting this error

Error

TypeError: map.graphics is undefined

What am I doing wrong and why is the map still undefined while it is already instantiated on the page?

Upvotes: 0

Views: 526

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

Your map object isn't a Global variable, so it's not accessible form the other module ( accessible only from appcontroller.js )

Try to make it a golbal variable , then it would be accessible on the other modules ( js file )

var map ; // declare global var here 
define([
 'dojo/_base/declare',
 'esri/map'
], function ( declare, Map) {
return declare(null, {
   //map: null, useless !
   options: {},
   constructor: function (options) {
       this.options = options;
   },
   load: function () {
       map = new Map(this.options.elem, this.options.mapOptions);
   }
 });
});

Upvotes: 0

Related Questions