How to Create a Map from a JSON String?

8673
8
01-14-2013 08:11 PM
AlejandroVargas
New Contributor
My ArcGIS Javascript application is run within a widget framework where widgets communicate using an event bus.  We have a widget which needs to perform certain tasks for a map viewer, but it cannot be contained in or shared code with the map viewer.  So the map viewer will use the widget framework's event bus to provide its map in JSON string format.

I need to create a Map instance based on this JSON string passed into my application.  How do I accomplish this?

Thanks!
0 Kudos
8 Replies
KellyHutchins
Esri Frequent Contributor
Alejandro,

You can use the esri.arcgis.utils.createMap method to build a map using input JSON. This JSON has to be in a particular format, see the doc here for details:

http://resources.arcgis.com/en/help/arcgis-web-map-json/

And see the help for a sample that shows this:

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/ags_createwebmapitem
0 Kudos
AlejandroVargas
New Contributor
Thank you very much, Kelly!  I will test that and let you know how it turns out.

Much appreciated!
0 Kudos
AlejandroVargas
New Contributor
Alejandro,

You can use the esri.arcgis.utils.createMap method to build a map using input JSON. This JSON has to be in a particular format, see the doc here for details:

http://resources.arcgis.com/en/help/arcgis-web-map-json/

And see the help for a sample that shows this:

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/ags_createwebmapitem



Kelly,

Does the map have to be hosted on ArcGIS Online or Portal for ArcGIS?  I was hoping to have this work for a map whose services are hosted on a non-ArcGIS Online/Portal 10.1 ArcGIS Server, so the parameters described at http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/#namespace_esri.arcgis.utils/esri.arcgis.ut... wouldn't apply to what I need.

If this won't work, is there another way?
0 Kudos
KellyHutchins
Esri Frequent Contributor
No the map doesn't have to be hosted on arcgis online. If you look at the sample I linked you'll see that we define the web map as follows - note that the urls to the map layers could point to your services.


webmap.itemData = {
"operationalLayers": [{
"url":layerURL,
"visibility": true,
"opacity": 0.75,
"title": "Soil Survey Map",
"itemId": "204d94c9b1374de9a21574c9efa31164"
}],
"baseMap": {
"baseMapLayers": [{
"opacity": 1,
"visibility": true,
"url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
},{
"isReference": true,
"opacity": 1,
"visibility": true,
"url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
}],
"title": "World_Terrain_Base"
},
"version": "1.1"
};


0 Kudos
AlejandroVargas
New Contributor
Kelly,

Perhaps I should have mentioned this before, but I plan on printing the map after receiving its JSON representation.  A Flex map viewer will pass a JSON map to a javascript widget, which will use a PrintTask to submit a print job to the backend print server.

Will the webmaps you previously described work with 10.1 printing using javascript?

From http://resources.arcgis.com/en/help/arcgis-web-map-json/, there is a tidbit that reads,

"The web map and its specification should not be confused with the ExportWebMap specification, which is used by ArcGIS Server when printing maps. Although you may notice similarities in properties, they are two different specifications."


In short, if what we discussed previously won't work for printing a map from javascript, how can I accomplish this?

Thanks again!
0 Kudos
AlejandroVargas
New Contributor
No the map doesn't have to be hosted on arcgis online. If you look at the sample I linked you'll see that we define the web map as follows - note that the urls to the map layers could point to your services.


webmap.itemData = {
"operationalLayers": [{
"url":layerURL,
"visibility": true,
"opacity": 0.75,
"title": "Soil Survey Map",
"itemId": "204d94c9b1374de9a21574c9efa31164"
}],
"baseMap": {
"baseMapLayers": [{
"opacity": 1,
"visibility": true,
"url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
},{
"isReference": true,
"opacity": 1,
"visibility": true,
"url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
}],
"title": "World_Terrain_Base"
},
"version": "1.1"
};




Kelly,

I have tried this code, but the Promise returned from
esri.arcgis.utils.createMap(webmap, "map");
never invokes the success or failure events.  Below I have listed my code used.  Also, I have listed below my code a sample of the JSON provided to this print widget.

Could you offer any insight as to why
esri.arcgis.utils.createMap(webmap, "map");
is not working?  I appreciate your prompt reply.

Thanks!

/**
*
* Invoked when Flex viewer sends JSON map via event bus.
*
* @param data - JSON map
*/
function mapDataReceived(data) {

    var webmap = {};
    webmap.item = {
        "title":"Soil Survey Map of USA",
        "snippet": "Detailed description of data",
        "extent": data.mapOptions.extent
    };

    webmap.itemData = data;
    mapPromise = esri.arcgis.utils.createMap(webmap, "map");
    var map;
    mapPromise.then(mapCreationSuccess, mapCreationFailed);
}

function mapCreationSuccess(response) {
    var map = response.map;

    var printTask = new esri.tasks.PrintTask(config.EXPORT_WEBMAP_URL);


    //TODO Change template to user options.
    var template = new esri.tasks.PrintTemplate();
    template.exportOptions = {
        width: 500,
        height: 400,
        dpi: 96
    };
    template.format = "PDF";
    template.layout = "MAP_ONLY";
    template.preserveScale = false;


    var params = new esri.tasks.PrintParameters();
    params.map = map;
    params.template = template;

    printTask.execute(params, printResult, printError);
}

function mapCreationFailed(error) {
    console.error("Unable to create map.");

}


JSON provided to mapDataReceived(..)
{
"exportOptions": {
"outputSize":[892,550]},
"mapOptions": {
"scale":141344140.17757848,
"extent": {
"ymin":-92.48878923766816,
"ymax":92.48878923766816,
"xmax":150,
"spatialReference": {
"wkid":4326
},
"xmin":-150}
},
"operationalLayers": [{
"url":"https://IPAddressToArcGISServer/arcgis/rest/services/ServiceName/MapServer",
"title":"BaseMap",
"id":"BaseMap"
}],
"layoutOptions": {
"legendOptions": {
"operationalLayers": [{
"id":"BaseMap"
}]}}}
0 Kudos
KellyHutchins
Esri Frequent Contributor
I ran a quick test using a simple map with just a basemap. Here's the jsfiddle showing the code:

http://jsfiddle.net/gppby/

The web map doc has several examples of valid json that you can also use to test with :

http://resources.arcgis.com/en/help/arcgis-web-map-json/#/Web_map_format_overview/02qt00000007000000...
0 Kudos
AlejandroVargas
New Contributor
Thanks for including your jsFiddle code.  I noticed there is a significant difference between your JSON format and mine.

It looks like your JSON format follows the guidelines listed at http://resources.arcgis.com/en/help/arcgis-web-map-json/#/Web_map_data/02qt0000000q000000/ while mine follows the ExportWebMapSpecification JSON format http://resources.arcgis.com/en/help/main/10.1/index.html#//0154000004w8000000.

As my Flex viewer is providing its map in ExportWebMap specification format, is there an easy way for ArcGIS API for Flex to get the 'web map data' JSON format of a map rather than its ExportWebMap specification?
0 Kudos