Qlik Sense - Esri Integration (Esri Extension)

Sundhar_RajT · ‎06-04-2018

I have integrated esri webmap with qlik sense using arcgis javascript api 3.8. I have downloaded the source code from github.

Now, i want to migrate it to arcgis javascript api 4.7. But, map is not loading. getting invalid visualisation error. Herewith i have attached my code.

require.config({
paths: {
"components": "https://rawgit.com/johsund/QlikESRIGit/master/bower_components", //"http://localhost:4848/extensions/QlikSenseESRI/bower_components",
"dojo": "https://rawgit.com/johsund/QlikESRIGit/master/bower_components/dojo", //"http://localhost:4848/extensions/QlikSenseESRI/bower_components/dojo",
"dijit": "https://rawgit.com/johsund/QlikESRIGit/master/bower_components/dijit", //"http://localhost:4848/extensions/QlikSenseESRI/bower_components/dijit",
"dojox": "https://rawgit.com/johsund/QlikESRIGit/master/bower_components/dojox", //"http://localhost:4848/extensions/QlikSenseESRI/bower_components/dojox",
//"esri": "https://js.arcgis.com/3.8/js/esri"
"esri": "https://js.arcgis.com/4.7/esri"
}
});

define( [
'jquery',
'text!./template.html',
'text!./css/esri.css',
'qvangular',
'js/qlik',
"esri/views/MapView",
"esri/WebMap",
"dojo/_base/Color",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function ( $, template, cssContent, qv, qlik, MapView, WebMap, Color, arrayUtils, dom, on) {

'use strict';

$("<style>").html(cssContent).appendTo("head");

//Legend widget
var legendDijit, position;

return {

paint: function ( $element, layout ) {

// GETTING THE DATA FROM Qlik

this.backendApi.cacheCube.enabled = false;
var _this = this;

var columns = layout.qHyperCube.qSize.qcx, totalheight = layout.qHyperCube.qSize.qcy;
var pageheight = Math.floor(10000 / columns);
var numberOfPages = Math.ceil(totalheight / pageheight);

var markers = [];
var selectedMarkers = [];

var dimensions = layout.qHyperCube.qDimensionInfo;

var columns = layout.qHyperCube.qSize.qcx;
var totalheight = layout.qHyperCube.qSize.qcy;

var pageheight = Math.floor(10000 / columns);
var numberOfPages = Math.ceil(totalheight / pageheight);

var Promise = qv.getService('$q');

var promises = Array.apply(null, Array(numberOfPages)).map(function(data, index) {
var page = {
qTop: (pageheight * index) + index,
qLeft: 0,
qWidth: columns,
qHeight: pageheight
};

return this.backendApi.getData([page]);

}, this)

$element.html(template);

Promise.all(promises).then(function(d) {
render(d);
});

function render(d) {
/*
var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: layout.webmapid
}
});

var view = new MapView({
map: webmap,
container: "mapDiv"
});
*/

var map = new Map({
basemap: "topo"
});

var view = new MapView({
container: "mapDiv",
map: map,
scale: 2400000
});

}; //render
} //paint
}
});

Please help me to migrate to arcgis javascript api 4.7

JorgeAmirola · ‎10-12-2018

Hi Raj, do you the the qlik sense esri entension for the new version qliksense? i downloaded the file from github and they said it's for version 2.1. I am wondering do you have the newest one?

sreekantamanuru · ‎05-30-2023

Hi,

With reference to above code, I used CDN network ESRI ArcGIS javascript 3.27, dojo and moment files, i am facing below error. While just adding Api - esri/map and Map alias, i got this error. In web browser, network all ESRI modules are downloading. Please help me to resolve this error. Currently i am using Qlik Sense Desktop - 14.54.15 (with custom objects)

Sample Code given below:

{/* <script src="/node_modules/requirejs.js"></script> */}

window.require.config({

baseUrl: "/node_modules",

async:true,

paths: {

//"esri": "https://js.arcgis.com/3.27/esri",

"esri": "https://js.arcgis.com/3.43compact/esri",

"dojo": "https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo",

"dijit": "https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit",

"dojox": "https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox",

"moment": "https://js.arcgis.com/3.27/moment",

},

parseOnLoad: false,

//waitSeconds: 15

});

define(["jquery", "text!./template.html", "text!./cssContent.css","qvangular", "qlik","esri/map"],

function($, template, cssContent, qv, qlik,Map) {

// define(["jquery", "text!./template.html", "text!./cssContent.css","qvangular", "qlik","esri/map","dojo/_base/array","dojo/dom","dojo/on","dojo/ready"],

// function($, template, cssContent, qv, qlik,Map, arrayUtils, dom, on) {

'use strict';

console.log("Map");

$("<style>").html(cssContent).appendTo("head");

var init = false;

return {

template : template,

initialProperties : {

qHyperCubeDef : {

qDimensions : [],

qMeasures : [],

qInitialDataFetch : [{

qWidth : 2,

qHeight : 50

}]

}

},

definition : {

/*

type: "items",

component: "accordion",

items: {

dimensions: {

uses: "dimensions",

min: 1,

max: 1

},

measures: {

uses: "measures",

min: 1,

max: 1

},

sorting: {

uses: "sorting"

},

settings: {

uses: "settings",

items : {

webmapid : {

ref : "webmapid",

type : "string",

label : "Web map ID",

defaultValue : "62e89135fcc8461bbe2ba6c7b152d14a"

//defaultValue : "891937e148e7482caef8671fdc22515b"

},

}

*/

},

support : {

snapshot: true,

export: true,

exportData : true

},

paint: function ($element,layout ) {

//paint: async function ($element,layout ) {

console.log( $element );

console.log( layout );

$element.empty();

//adding

this.backendApi.cacheCube.enabled = false;

var _this = this;

var columns = layout.qHyperCube.qSize.qcx, totalheight = layout.qHyperCube.qSize.qcy;

var pageheight = Math.floor(10000 / columns);

var numberOfPages = Math.ceil(totalheight / pageheight);

var columns = layout.qHyperCube.qSize.qcx;

var totalheight = layout.qHyperCube.qSize.qcy;

var pageheight = Math.floor(10000 / columns);

var numberOfPages = Math.ceil(totalheight / pageheight);

console.log("before promise");

var Promise = qv.getService('$q');

var promises = Array.apply(null, Array(numberOfPages)).map(function(data, index) {

var page = {

qTop: (pageheight * index) + index,

qLeft: 0,

qWidth: columns,

qHeight: pageheight

};

return this.backendApi.getData([page]);

}, this);

// Promise.all(promises).then(function(d) {

// //render(d);

// console.log("inside promises");

// });

//adding

// var app = qlik.currApp(this);

// app.clearAll();

// var map={};

//if ( !$element.html.empty ) {

//$element.empty();

$element.html( template );

//$element.appendTo( template );

//app.$element.html( app.esri.Map );

//qlik.Map($element.appendTo( template ));

//await qlik.$element.html( template );

console.log( "maploaded " );

//}

/*

Promise.resolve().then( function(d) {

map = new Map("mapDiv", {

basemap: "topo-vector",

center: [-122.45, 37.75],

zoom: 13

});

console.log( "zoom -- " + map.zoom );

});

*/

/*

console.log("before promises");

if (!init) {

return new Promise(function(resolve, reject) {

setTimeout(function() {

var map = new Map($element[0], {

basemap: "topo-vector",

center: [-122.45, 37.75],

zoom: 13

});

console.log( "zoom -- " + map.zoom );

resolve(); // Extension painted successfully

}, 1000);

});

// Mark initial setup complete

init = true;

}

*/

/*

function render(d) {

// var map;

var app = qlik.currApp();

// var map = new Map("mapDiv", {

// basemap: "topo-vector",

// center: [-122.45, 37.75],

// zoom: 13

// });

// console.log( map.zoom );

console.log( app );

}

*/

//return qlik.Promise.resolve();

},

controller : ['$scope',

function(/*$scope*/) {

}]

};

});