Hexagon Geospatial
MENU

Smart M.App

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
Occasional Contributor
Posts: 12
Registered: ‎01-28-2016
Accepted Solution

Displaying a shapefile in a smart M.App

2 questions:  I can add shapefiles to my Map and they appear in the legend but I cant get them to be visible in the mapview.

2.  I made a smart M.App that creates a subsetted feature layer (shapefile) if Q1 above is possible, how can I make the result of running my smart M.app show up in the view or at least join the legend.

 

 

Technical Evangelist
Posts: 527
Registered: ‎09-11-2015

Re: Displaying a shapefile in a smart M.App

Hello Steve,

 

you can only add shapefile as a BI map. If you do it this way, then make sure you upload the shapefile along with the prj file, so that Smart M.Apps can guess the projection of the file. Also make sure that your conditions for displaying the BI map layer are fullfilled.

 

Pavel

Occasional Contributor
Posts: 12
Registered: ‎01-28-2016

Re: Displaying a shapefile in a smart M.App

Thanks Pavel, so if my recipe creates a shapefile output, there is no way to see my result in the Smart M.App?

Technical Evangelist
Posts: 527
Registered: ‎09-11-2015

Re: Displaying a shapefile in a smart M.App

He Steve,

 

there is probably no simple way, but you should be able to create custom script. You can for exmaple use events to notify BI map that the recipe has finished and reload the map.

 

Pavel

Occasional Contributor
Posts: 12
Registered: ‎01-28-2016

Re: Displaying a shapefile in a smart M.App

thanks, what about displaying the output from a raster recipe. the result goes to Map chest but i want it to display in the map view.

 

 

Also i have seen very strange behavior when uploading models from IMAGINE connect.  When the model opens in the web editor the input ports are all mislabelled compared to the original in IMAGINE and if I correct them I cannot validate.  It gives me a server error but the original model (with the wrong ports) does validate.

Technical Evangelist
Posts: 527
Registered: ‎09-11-2015

Re: Displaying a shapefile in a smart M.App

I have an example to display raster from recipe. It contains two panels, one with recipe, the second with map. The JavaScript for recipe is:

$GP.m_app.events.processes.processExecutionFinish(function (ev, args) {
    var status = args.status,
        jobId = args.jobId;
    if (status === "FAILED")
        return;
        
    // put here action after process execution finished
    $GP.m_app.processes.getProcessOutputs({
            jobId: jobId
        }, function (processOutputs) {
            var firstOutput = processOutputs[0],
                firstOutputId = firstOutput.CatalogItemID,
                catalogItemTitle = "SampleOutput.img";
    
            $GP.m_app.platform.publications.publish({
                id: firstOutputId,
                title: catalogItemTitle
            }, function (publishInfo) {
                if (publishInfo.success === false)
                    return;
    
                $GP.m_app.platform.publications.get(firstOutputId, function (publicationProperties) {
                    $GP.m_app.platform.catalog.get(firstOutputId, function (catalogItemProperties) {
                        $GP.m_app.messages.send("displayOnMap", {
                            mapComponentId: "map1",
                            publicationProperties: publicationProperties,
                            catalogItemProperties: catalogItemProperties
                        });
                    });
                });
            });
        });
});

and the JavaScript for map panel is:

$GP.m_app.messages.subscribe("displayOnMap", function (messageParams) {
    if (messageParams.mapComponentId !== "map1")
        return;

    var wmsUrl = "/api/v1/services/ogc/wms/" + messageParams.publicationProperties.serviceName,
        legendDefinition = {
            definitionName: "MAppPlatformWms",
            url: wmsUrl,
            id: messageParams.publicationProperties.catalogItemId,
            name: messageParams.publicationProperties.capabilitiesTitle,
            bbox:  messageParams.catalogItemProperties.footprint.envelope.slice(0, 4),
            bboxCrs: messageParams.catalogItemProperties.footprint.envelope[4],
            supportedCrses: messageParams.publicationProperties.outputCSList
        };

    $GP.legend.add(legendDefinition, function () {
        var bottomLeftCorner = { x: legendDefinition.bbox[0], y: legendDefinition.bbox[1] },
            topRightCorner = { x: legendDefinition.bbox[2], y: legendDefinition.bbox[3] };

        $GP.crs.transform({
            points: [bottomLeftCorner, topRightCorner],
            sourceCrsId: legendDefinition.bboxCrs,
            targetCrsId: $GP.crs.getCurrent()
        }, function (transformationResult) {
            var points = transformationResult.points,
                bbox = [points[0].x, points[0].y, points[1].x, points[1].y];

            $GP.map.zoom({
                bbox: bbox
            });
        });
    });
});

 

Regarding the problem with recipe itself, you should perhaps create a new thread, although I think there are few similar already here.

 

Pavel

Frequent Contributor
Posts: 77
Registered: ‎10-12-2015

Re: Displaying a shapefile in a smart M.App

[ Edited ]

The display of a shapefile is actually quite complicated, because right now you can only use a choropleth widget to display it. However, It is achievable. The idea is that, after the shapefile is added to the catalog, you send a message to the bi map panel with the id, to establish a connection to that file. Then, you grab the geojson properties, attach them to a new choropleth widget, then register that widget to the map. Here's my code for this (it is used for a change detection app, where the FID is the id of the zone and the Zonal attribute is the change value) - it's quite long, I warn you:

 

gsp.m_app.messages.subscribe("displayFeatures", function (messageParams) {
    
    var featuresId = messageParams.id;
    
    console.log(featuresId);
        
    gsp.m_app.platform.catalog.get(featuresId, function(result) {
        
        console.log(result);
            
        var url = "api/v1/items/" + result.id + "/attachments/" + result.attachments[result.name + ".geojson.attachment"].name;
            
        gsp.m_app.utils.connection(url).then(function (response) {
            
            console.log(response);
            
            geojson = JSON.parse(response.entity);
            
            console.log(geojson);
            
            updateStage(geojson, url);
        });
             
    });
    
    function updateStage(gj, url) {
        
        console.log("Here goes the choropleth config");
        
        gsp.bi.stage.requireLibraries(function(gvc) {
            
            gsp.bi.stage.findStage(null, function (stage) {
        
                //var stageFeatures = stage.features();
                var stageId = stage.id();
                
                console.log(gj);
                
                var stageModel = {
                    id: "stgModel",
                    fields: [{
                        id: "changeId",
                        name: "ID",
                        value: "FID"
                    },{
                        id: "changeField",
                        name: "Change",
                        value: "Zonal"
                    }],
                    totals: [],
                    features: [{
                        id: "features",
                        key: "FID",
                        name: "Change"
                    }],
                    colors: {
                        paletteYellow: {
                            range: ["#A50026", "#D73027", "#F46D43", "#FDAE61", "#FEE08B", "#D9EF8B", "#A6D96A", "#66BD63", "#1A9850", "#662263", "#22E08B", "#FE228B", "#FEE022"]
                        },
                        paletteMap: {
                            range: ["#4f9e00", "#549400", "#5a8a00", "#5f8100", "#657700", "#706400", "#7c5100", "#814700", "#873e00", "#8d3400", "#922b00", "#982100", "#9e1800"]
                        }
                    },
                    values: [{
                        id: "changeId",
                        name: "ChangeNumber",
                        value: "FID"
                    },{
                        id: "change",
                        name: "Change",
                        value: "Zonal"
                    }]
                };
                
                gsp.bi.config.overwriteConfiguration(function (configuration){
                    var ret = configuration || {};
                    ret.mapConfig = {
                        "tooltipAttributes": ["Zonal"],
                        "mapLegendPlacement": "map",
                        "mapLegendEnabled": true,
                        "mapTitleEnabled": true
                    };
                    return ret;
                });

//the tooltip attributes should be what attribute of the geojson you want to be shown var choroplethModel = { chart: "choropleth", name: "Change", target: "map", layer: "features", key: "FID", values: ["change"], colors: "paletteMap", id: "changeChoropleth" };

//make sure that you specify the correct key for the choropleth display
var layerChoropleth = { definitionName: "MAppPlatformGeoJson", url: gj, name: "Change", id: "features", bbox: [0, 0, 0, 0], bboxCrs: "EPSG:4326", supportedCrses: ["EPSG:4326", "EPSG:3857"], style: { display: "thematicLayer", } }; var s = gsp.bi.stage; s.registerStageModel({ stageModel: stageModel }, function(stageModel) { s.registerChoropleth({ model: choroplethModel, mapTitleEnabled: true, mapLegendEnabled: true, mapLegendPlacement: "map", tooltipAttributes: ["Zonal"] }, function() { gsp.legend.add(layerChoropleth, function() { console.log("Registered choropleth layer."); }); }); }); }); }); } });

 

Also, keep in mind that the actual display of the geojson might be a bit bugged now, as I too have problems with it (look fior the "first polygon missing" thread, it's quite recent and it explains the issue quite well). And sorry for not explaining my code too well, but I think it might help you anyways.

 

There's another thread where this was solved, go to the "Send a sepefile to BI Map" thread for more details.

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

Re: Displaying a shapefile in a smart M.App

[ Edited ]

Hi guys,

 

this is a duplicate topic. The question was already solved as Radu and Pavel pointed out. The "main" topic is here:

http://community.hexagongeospatial.com/t5/Smart-M-App-Tech-Discussions/Send-a-shapefile-to-BI-Panel/...

 

Thanks,

Jan

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Do you need immediate support?
Please submit a Ticket through our
Development Ticket Portal.