Smart M.App discussions

Looking for answers in regards to M.Apps, M.App Exchange or M.App Studio? Smart M.App Tech Discussion board is where you can search, ask your questions and assist others by sharing your knowledge. Join the conversation, connect, contribute and share.
Showing results for 
Search instead for 
Do you mean 
Reply
Highlighted
Technical Evangelist
Posts: 1,322
Registered: ‎09-11-2015

Re: Choropleth registered but NOT displayed

[ Edited ]

Hi Vincet,

 

You're correct that's exactly an URL that you have to use + https://mapp.hexagongeospatial.com/. I've hashed the APIKey in your post since writing this key in public is a security risk.

 

Regards,

Jan

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Highlighted
Contributor
Posts: 34
Registered: ‎10-21-2016

Re: Choropleth registered but NOT displayed

Hi Jan, 

 

Thanks a lot for your quick reactions and hashing the APIKey. Now we know it's the right one, so that's nice.  

However, after implementing your advice, I still get the error:

message: "InvalidArgument: ids array shouldn't be empty"
success: false

Excuse me for asking so many questions, but having tried so many things sort of got me out of inspiration for finding possible causes or new solutions. This is my code at the moment.

var stageModel = {
    "id": "3dVolume",
    "features": [{
        "id": "feature_geom",
        "key": "PrimaryKey",
        "name": "features"
    }],
    "fields": [],
    "totals": [],
	"values": [
	{
		"id": 'Volume',
		"value": 'Volume',
		"name": 'Volume'
	}
	],
    "colors": {
        "paletteMap": {
            "range": ["#A50026", "#D73027", "#F46D43", "#FDAE61", "#FEE08B", "#D9EF8B", "#A6D96A", "#66BD63", "#1A9850", "#662263", "#22E08B", "#FE228B", "#FEE022"]
        }
    },
};
 
var stage = $GP.bi.stage;
            
function updateStage(gjson, geometryUrl) {
	var choroplethModel1 = {
		chart: "choropleth",
		name: "3d Volume",
		target: "map",
		layer: "feature_geom",
		key: "PrimaryKey",
		values: "Volume",
		colors: "paletteMap",
		id: "3d_Volume"
	};
	
	var chartDescriptors = {
        chartM: {
            id: "3d Volume",
            name: "3d Volume",
            title: "3d Volume",
            key: "PrimaryKey",
            values: ["Volume"],
            tooltips: "{Volume}",
            colors: ['#ffbf00', '#a50026', '#d73027', '#f46d43', '#fdae61'],
            chart: "choropleth"
        }
    };
	
	var legendModel = {
		definitionName: "MAppPlatformGeoJson",
		url: "https://mapp.hexagongeospatial.com/api/v1/items/f8027fa7-66bf-4ce9-a9c3-6294c1c03c56_2c918082579a7fab01580664c4cf59a4/attachments/Output.geojson.attachment?apiKey=", //+ apiKey
		name: "3d Volume",
		id: "3d_Volume",
		bbox: [0, 0, 0, 0],
		bboxCrs: "EPSG:4326",
		supportedCrses: ["EPSG:4326"],
		style: {
			display: "thematicLayer"
		}
	};
 
    stage.registerStageModel({
        stageModel: stageModel
    }, function registerStageModelSuccess () {
        stage.registerDataTable({
            tableSource: gjson
        }, 
        function registerDataTableSuccess(){
			stage.addWidgets({
                descriptors: chartDescriptors
            }, function addWidgetsSuccess() {	
				stage.registerChoropleth({
					model: choroplethModel1,
					mapTitleEnabled: false,
					mapLegendEnabled: false,
					mapLegendPlacement: "map",
					tooltipAttributes: ["Volume"]
				}, 
				function registerChoroplethSuccess(legendModel) {
					gsp.legend.add(legendModel, function() {
						console.log("Registered layer");
					}, function registerChoroplethError(e) {
						onError('registerChoropleth ', e);
					}, function registerDataTableError(e) {
    					onError('registerDataTable ', e);
    				});
				}, function registerStageModelError(e) {
					onError('registerStageModel ', e);
				});  
			}, function addWidgetsError(e) {
				onError('addWidgetsError ', e);
			}); 
        }, function registerDataTableError(e) {
			onError('registerDataTableError ', e);
        });
    }, function registerStageModelError(e) {
		onError('registerStageModelError ', e);
    });	
}

Regards,

Vincent

 

Highlighted
Contributor
Posts: 34
Registered: ‎10-21-2016

Re: Choropleth registered but NOT displayed

[ Edited ]

Does anybody know if there is a place where I can read more about the "ids array" needed for registering a choropleth? Where it belongs to (legend, GeoJSON, or other?), where it should be, what it should be like?

I tried this as well (it's also in the GVC API description), but it doesn't resolve the problem:

 

var chartDescriptors = {
    id: "volumes", // does not resolve the error 'ids array shouldn't be empty', needed for registering a choropleth
    chartM: {
            id: "3d Volume",
            name: "3d Volume",
            title: "3d Volume",
            key: "PrimaryKey",
            values: ["Volume"],
            tooltips: "{Volume}",
            colors: ['#ffbf00', '#a50026', '#d73027', '#f46d43', '#fdae61'],
            chart: "choropleth"
    }
};

 

Highlighted
Technical Evangelist
Posts: 1,322
Registered: ‎09-11-2015

Re: Choropleth registered but NOT displayed

Here's a modification of the code that is floating around this forum. In this case it is customized to work only with a single ShapeFile instead of using combination of ShapeFile/GeoJSON + CSV.

 

It's not easy to check what's wrong in your code for me as non-JS developer. So I rather prepare something functional based on your data and leave the rest up to you ;-)

 

//Error handler
function onError(e) {
	console.log("Something went wrong");
	console.log(e);
}

var stageModel = {
	"id" : "zbyszek",
	"fields" : [// Dimensions
		{
			"id" : "dimension_zvu3",
			"name" : "PrimaryKeyDim",
			"value" : "PrimaryKey"
		}, {
			"id" : "dimension_1xis",
			"name" : "VolumeDim",
			"value" : "Volume"
		}, {
			"id" : "featureId",
			"name" : "feature_id",
			"value" : "+PrimaryKey"
		}
	],
	"totals" : [],
	"features" : [// Geometry Descriptors
		{
			"id" : "OGRGeoJSON",
			"key" : "PrimaryKey",
			"name" : "Adminstrative Zones"
		}
	],
	"colors" : { // Colors
		"color_6t1k" : {
			"range" : [
				"#A50026",
				"#D73027",
				"#F46D43",
				"#FDAE61",
				"#FEE08B",
				"#D9EF8B",
				"#A6D96A",
				"#66BD63",
				"#1A9850",
				"#006837"
			]
		}
	},
	"values" : [// measures
		{
			"id" : "measure_pw11",
			"name" : "PrimaryKey",
			"value" : "$sum(PrimaryKey)"
		}, {
			"id" : "measure_mbjp",
			"name" : "Volume",
			"value" : "$sum(Volume)"
		}
	]
}

// charts
var barChart1 = {
     "chartM": {
         "id": "chart_gh2p",
         "name": "Chart0",
         "title": "Chart0",
         "placement": "left",
         "key": [
             "dimension_1xis"
         ],
         "values": [
             "measure_pw11"
         ],
         "tooltips": "{measure_pw11}",
         "colors": "color_6t1k",
         "axis": {
             "x": {
                 "ticks": 2,
                 "units": 70
             },
             "y": {
                 "ticks": 2,
                 "units": 70,
                 "elastic": true
             },
             "grid": {
                 "horizontal": true
             }
         },
         "chart": "bar",
         "margins": {
             "top": 35,
             "right": 15,
             "bottom": 40,
             "left": 45
         },
         "isTitleBarVisible": true
     }
}
	

var charts = [
	barChart1
]

$GP.bi.config.overwriteConfiguration(function (configuration) {
	var ret = configuration || {};
	ret.mapConfig = {
		"tooltipAttributes" : ["STATUS_COD"],
		"mapLegendPlacement" : "map",
		"mapLegendEnabled" : true,
		"mapTitleEnabled" : false
	};
	return ret;
});

// map
var choroplethMap = {
	"id" : "map_3jxn",
	"chart" : "choropleth",
	"name" : "OGRGeoJSON",
	"layer" : "OGRGeoJSON",
	"key" : "dimension_zvu3",
	"values" : "measure_pw11",
	"colors" : "color_6t1k",
	"valueTransformations" : [
		"extrusion"
	],
	"labels" : {
		"enabled" : false
	},
	"axesOrder" : [
		"lon",
		"lat"
	],
	"features" : "OGRGeoJSON"
}

var baseUrl = "https://mapp.hexagongeospatial.com/";
// ShapeFile ID
var shpData = "e18b0308-47c3-42ef-a9a9-fabf56ceda19_2c918082579a7fab01581b2ed54251b1";
// GeoJSON Attachment
var attachmentName = "OGRGeoJSON.geojson.attachment";

var APIkey = "ABCDEF"; // !!!
/*
// need to get API key for direct download URL
gsp.m_app.utils.connection('uaa/apikey').then(function (res) {
if (!res.entity[0]) {
console.log("Could not retrieve API key!");
return;
}
APIkey = res.entity[0].APIKey;
}
 */

var geometryUrl = baseUrl + "api/v1/items/" + shpData + "/attachments/" + attachmentName + "?apiKey=" + APIkey;

var layer1 = {
	definitionName : "MAppPlatformGeoJson",
	url : geometryUrl,
	name : "OGRGeoJSON",
	id : "OGRGeoJSON",
	bbox : [0, 0, 0, 0],
	bboxCrs : "EPSG:4326",
	supportedCrses : ["EPSG:4326", "EPSG:3857"],
	style : {
		display : "thematicLayer"
	}
};

// function for extracting tabular data from GeoJSON function createArrayFromGeoJson(json, callback) { var array = []; console.log("Translating GeoJSON into array of rows..."); for (var i = 0; i < json.features.length; i++) { var row = "{"; for (var property in json.features[i].properties) { if (json.features[i].properties.hasOwnProperty(property)) { row += "\"" + property + "\":" + JSON.stringify(json.features[i].properties[property]) + ","; } } array.push(JSON.parse(row.substring(0, row.length - 1) + "}")); } console.log("Done. Total array size: " + array.length); callback(array); } $.getJSON(geometryUrl, function (data) { createArrayFromGeoJson(data, function (array) { //Registering stage model and adding choropleth map var s = $GP.bi.stage; s.registerStageModel({ stageModel: stageModel }, function() { s.registerDataTable({ tableSource: array }, function() { s.addWidgets({ descriptors: charts }, function() { s.registerChoropleth({ model: choroplethMap, mapTitleEnabled: true, mapLegendEnabled: true, mapLegendPlacement: "map" }, function(layerName) { gsp.legend.add(layer1, function() { console.log("Registered layer"); }, onError); }, onError); }); }, onError); }, onError); }); });

Regards,

Jan

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Highlighted
Contributor
Posts: 34
Registered: ‎10-21-2016

Re: Choropleth registered but NOT displayed

Great! It helped! Some of the changes you made in the configuration and the method to create usable arrays from the GeoJSON made the code serve its purpose. 

I still have to make sure the barchart will display with the right measures and content, but for now: the choropleth is there (see screenshot)! 

Thanks you so much for all of your help. I am sure this will also help others in the future.

A BIG Hexpoint for you!

 

Screenshot:

Screenshot map.jpg

 

Regards,

Vincent

 

 

Highlighted
Frequent Contributor
Posts: 83
Registered: ‎07-17-2017

Re: Choropleth registered but NOT displayed

Hi Jan,

 

when I follow your code it says:

Add Field 'dimension_zvu3' failed. Detail: Evaluate error: undefined variable: MergeID.

Add Field 'featureId' failed. Detail: Evaluate error: undefined variable: MergeID.

MergeID is my PrimaryKey column.

But the chart is displayed properly with values matching the expected values of my MergeID column, only the choropleth is missing

Is this maybe a known issue and you have an idea what I missed?

 

Thanks

Marisa