Qlik Sense ESRI ReactJs integration

sreekantamanuru — Mon, 12 Jun 2023 15:54:13 GMT

Hi All, i am trying to create a application Qlik Sense with ESRI using React JS application. Application showing Powered By ESRI message and maps are not loading. i tried with Rest Api/ @ArcGIS Core/ Esri-loaders also. but same issue. Application is creating many bundles with related assets in folder. Can you please suggest me to get direction to resolve Map issue. Currently i am using Qlik Sense Desktop - 14.54.15 (with custom objects).

Sample Map load Code:

1) index.js - simple ReactJs

import React, { useState,useRef, useEffect } from "react";

import ArcGISMap from "@arcgis/core/Map";

import MapView from "@arcgis/core/views/MapView";

import '../../index';

//import "./style.css";

//import "../../../node_modules/@arcgis/core/assets/esri/css/main.css";

import esriConfig from "@arcgis/core/config";

//import '@arcgis/core/assets/css/map.css';

//import "../../../node_modules/@arcgis/core/assets/esri/themes/light/main.css";

//import { loadModules } from "esri-loader";

esriConfig.assetsPath = "./assets";

//esriConfig.apiKey = "JyLU9y3QUHvrGg2tXwJ4di-bEE8tyrMUk68xGnzI2byEliOorHa3ZYr1cYPDy9Q1cZNOAZ2JlY3LcjEzWsBzjlTEuT6-9WNT06q_wlN6nUmOMRwpgLwFVvmuByb6OmEnRhitq6q83v0xqRJ9d9oiHg..";

//console.log(main);

export const Map = () => {

const mapDiv = useRef(null);

console.log("Map instance");

//const view = useRef(null);

useEffect(() => {

if (mapDiv.current) {

const map = new ArcGISMap({

basemap: "streets-vector",

});

const view = new MapView({

map: map,

container: mapDiv.current,

center: [-95.7129, 37.0902],

zoom: 3

});

console.log( "props--" + map.basemap.title + view.zoom);

}

}, []);

return <div id="mapDiv" style={{ padding: 0, margin: 0, height: "1000px", width: "1000px" }} ref={mapDiv} />;

}

2) index.js - - second ReactJs added qlik.openApp

export const Map = () => {

const mapDiv = useRef(null);

console.log("Map instance");

//const view = useRef(null);

useEffect(() => {

const loadQlikObj = async() => {

const config = {

host:"localhost",

prefix:'/',

port:443,

isSecure:true,

//webIntegrationId: 'web-integration-id-here' //only needed for SaaS editions

}

//appid

//const app = await qlik.openApp('C:/Users/smanuru/Documents/Qlik/Sense/Apps/SreeTest.qvf', config);

//var app = qlik.openApp('2abac31e-3b46-4b78-8bxf-c5cea1d2514d', config);