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
Solved! Go to Solution.
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);
}
});
});
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){
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
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);
}
});
});
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
Correct, must be an oversite.