Integration with ArcGIS

#1

Do we have any example or idea about using ArcGIS map service within Dundas the same way as Bing maps example ?

#2

I was able to implement this example in a Dundas BI dashboard using the following steps:


1. Add an HTML Label to your dashboard.


2. Fill in the HTML Label text with the following:

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
div.esri-view-surface > canvas:nth-child(1)
{
z-index:0;
}
</style>
<div id="viewDiv"></div>


3. Add a the following script to the dashboard's Loading event:

// load the arcgis esri stylesheet
$('head').append( $('<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">') );

// load the arcgis scripts
$.getScript("https://js.arcgis.com/4.3/",
function(){

// get the MapView, WebMap, and domReady modules
require([
"esri/views/MapView",
"esri/WebMap",
"dojo/domReady!"
], function(
MapView, WebMap
) {

/************************************************************
* Creates a new WebMap instance. A WebMap must reference
* a PortalItem ID that represents a WebMap saved to
* arcgis.com or an on-premise portal.
*
* To load a WebMap from an on-premise portal, set the portal
* url in esriConfig.portalUrl.
************************************************************/
var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "f2e9b762544945f390ca4ac3671cfa72"
}
});

/************************************************************
* Set the WebMap instance to the map property in a MapView.
************************************************************/
var view = new MapView({
map: webmap,
container: "viewDiv"
});
});
});


4. Click on Sandbox View

#3

Thanks Davide for the guidance.

We're you able to push data to the map and display symbols with actions?

#4

You can reproduce the exact behavior of the bing maps sample using arcgis with the following:


In the HTML Label:

<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#map_gc, .layerTile{
left: 0px;
}
</style>
<div id='map'></div>




In the Loading event script (don't forget to fill in appropriate values for the first three variables based on the metric set you want to use):

// the id of the metric set
var metricSetId = '18d88b85-7ba3-4847-909e-b4f7f2f69b24';
var latitudeIndex = 0; // The index of your latitude in the metric set
var longitudeIndex = 1; // The index of your longitude in the metric set

var _this = this;

// load the arcgis esri stylesheet
$('head').append( $('<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">') );

// load the arcgis scripts
$.getScript("https://js.arcgis.com/3.6/", function(){
var map;

require(["esri/map","dojo/on","esri/symbols/SimpleMarkerSymbol","dojo/domReady!"], function(Map,on,SimpleMarkerSymbol) {
map = new Map("map", {
basemap: "topo",
center: [-122.45,37.75], // long, lat
zoom: 13,
sliderStyle: "small"
});

var sms = new SimpleMarkerSymbol();

on(map,"load",function(evt){

// Request data from a metric set by its ID:
var request = new dundas.data.Request({ objectId: metricSetId });
// Do not limit the number of rows by paging:
request.pagingOptions.pagingKind = dundas.data.PagingKind.NONE;
// Get the data retrieval service
var dataRetrievalService = _this.getService("DataRetrievalService");
// Make this aysnc
var dataPromise = dataRetrievalService.getData(request);
// Used to show loading animation over the bing map during the data request
var viewService = _this.getService("ViewService");
//viewService.showLoadingRestCall(dataPromise, { "element": document.getElementById('map')});
// On data retrieval successful
dataPromise.done(function (results) {

var lat = results[0].cellset.cells[latitudeIndex];
var long = results[0].cellset.cells[longitudeIndex];

// clear and existing entities
//window.map.entities.clear();

// Create an array of locations (so that we can later calculate the center point)
var locations = [];
// Iterate the data that is returned

var locationSum = [0,0];

for (i = 0; i < lat.length; i++) {
// collect the points so that we can later calculate the center point
locations.push([long[i].value, lat[i].value]);

locationSum[0] += locations[i][0];
locationSum[1] += locations[i][1];

// add the pushpin to the map
var point = new esri.geometry.Point(locations[i]);
map.graphics.add(new esri.Graphic(point,sms,{"value":"Hello"}));
}
var centroid = new esri.geometry.Point(locationSum[0]/locations.length, locationSum[1]/locations.length);

map.centerAndZoom(centroid, 9);
//map.center(centroid);
//map.setZoom(9);
});
dataPromise.rejected(function(results){;});
});
});
});






#5

That sounds really good I will give a try.

Tell me about adding actions on symbols such navigation or pop-ups and also about the possibility to show donut pie chart like as symbol?let's say I want to display more details graphically on symbol on the map

#6

We have a sample showing how you can draw pies on a chart. While this example uses a Dundas BI map, most of the same logic can be applied to an ArcGIS map. The main difference will be that instead of iterating through the symbols on the Dundas BI map to get the x,y coordinates, you'll instead need to iterate through the ArcGIS map's esri.geometry.Point objects.


If you want some additional help to build something like this, I recommend engaging our professional services so that we can work with you to understand your use case and implement a solution that satisfies it.

#7

Thanks Davide I will contact you offline to discuss more about the details.

#8

Tell me Davide please one question that came to my mind. If I zoom in on the map do the pie charts follow the zoom and reposition themselves accordingly ?

#9

That would not happen by default. In order to get that functionality you'd need to set up an event handler to reposition the pies when the map is zoomed.