topic Re: Load custom modules constructor error in ArcGIS JavaScript Maps SDK Questions

Load custom modules constructor error

ClémentLaskar — Sat, 11 Dec 2021 16:48:40 GMT

Hello,

I was following this tutorial on Creating a Class and loading the module in the main JS with dojo. I followed it the best I could but I still get the error "SeatGeekSearch is not a constructor", and I cannot use my module.

I read the dojo doc on Creating Classes and I saw this GeonetPost on loading custom modules but it didn't solved my problem. Here is my code : the module

define(['dojo/_base/declare', 'dojo/_base/lang', 'esri/request'],
		function(declare, land, esriRequest){
	declare(null, {
		distance: null,
		lastSearchResult: null,
		perPage: null,
		queryParams: null,
		seatGeekUrl: null,
		
		constructor: function(options){
			this.distance = options.distance || "20mi";
			this.perPage = options.perPage || 50;
			this.seatGeekUrl = "http://api.seatgeek.com/2/events";
			
			this.returEvents = lang.hitch(this, this.returnEvents);
		},
		
		searchByLoc: function(geopoint){
			let eventResponse;
			
			let queryParam = {
					"lat": geopoint.y,
					"long": geopoint.x,
					"page": 1,
					"per-page": this.perPage,
					"range": this.distance
			}
			
			eventsResponse = esriRequest({
				"url": this.seatGeekUrl,
				"callbackParamName": "callback",
				"content": this.queryParams
			});
			
			return eventsResponse.then(this.returnEvents, this.err)
		},
		
		returnEvents: function(response){
			console.log(response);
		},
		
		err: function(error){
			console.log(error);
		}
	});
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The HTML file :

<DOCTYPE html>
<html>
	<head>
		<META charset="utf-8">
		<title>Ma carte</title>
		<link rel="stylesheet" href="Arcgis_css.css">
		<style>
			.map{
				height: 500px;
				width: 500px;
				}
		</style>
	</head>
	<body>
		<h2>Ma carte</h2>
		<div id="map"></div>
		<script type="text/javascript">
		var dojoConfig = {
				  paths: { extras: location.pathname.replace(/\/[^/]+$/, "") + "extras" }
				};

		</script>
		<script src="js/JS-api-3.27.js"></script>
		<script>
		
		
      require(["esri/map", "extras/SeatGeekSearch", "dojo/domReady!"], function(Map, SeatGeekSearch) {
        let map = new Map("map", {
          basemap: "national-geographic",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
        });
        
        let search = new SeatGeekSearch({
        	distance: "20mi",
        	perPage: 10
        });
        
        map.on("click", function(e){
        	console.log('click');
        	var geographic = webMercatorUtils.webMercatorToGeographic(e.mapPoint);
        	search.searchByLoc(geographic);
        })
      });
		</script>
	</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'm using 3.27 JS API on a Tomcat server.

Thanks a lot

Re: Load custom modules constructor error

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:48:42 GMT

Clément,

You have a mis-type in your code. Notice line 6 lang not land

define(['dojo/_base/declare', 'dojo/_base/lang', 'esri/request'],
          function(declare, land, esriRequest){

//Should be
define(['dojo/_base/declare', 'dojo/_base/lang', 'esri/request'],
          function(declare, lang, esriRequest){‍‍‍‍‍‍

Re: Load custom modules constructor error

ClémentLaskar — Mon, 11 Mar 2019 13:43:52 GMT

Hi Robert,

Thanks for your answer, I corrected it and relaunched the script clearing cache but it sadly didn't solved my problem 😕

Furthermore, here is my file structure

Re: Load custom modules constructor error

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:48:45 GMT

OK. I see the main error now. Here is the fix: (line 3 your did not return the module).

define(['dojo/_base/declare', 'dojo/_base/lang', 'esri/request'],
  function (declare, lang, esriRequest) {
    return declare(null, {
      distance: null,
      lastSearchResult: null,
      perPage: null,
      queryParams: null,
      seatGeekUrl: null,

      constructor: function (options) {
        this.distance = options.distance || "20mi";
        this.perPage = options.perPage || 50;
        this.seatGeekUrl = "http://api.seatgeek.com/2/events";

        this.returEvents = lang.hitch(this, this.returnEvents);
      },

      searchByLoc: function (geopoint) {
        let eventResponse;

        let queryParam = {
          "lat": geopoint.y,
          "long": geopoint.x,
          "page": 1,
          "per-page": this.perPage,
          "range": this.distance
        }

        eventsResponse = esriRequest({
          "url": this.seatGeekUrl,
          "callbackParamName": "callback",
          "content": this.queryParams
        });

        return eventsResponse.then(this.returnEvents, this.err)
      },

      returnEvents: function (response) {
        console.log(response);
      },

      err: function (error) {
        console.log(error);
      }
    });
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Load custom modules constructor error

ClémentLaskar — Mon, 11 Mar 2019 14:55:08 GMT

Yes thanks that was it, now the import is OK !

Could you confirm you don't see this return statement in the tutorial ? Is it an oversight ?

Thanks Again

Re: Load custom modules constructor error

RobertScheitlin__GISP — Mon, 11 Mar 2019 16:02:05 GMT

Correct, must be an oversite.