nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to Create a Map from a JSON String?

AlejandroVargas

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!

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

AlejandroVargas

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?

khutchins

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/

AlejandroVargas

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"
}]}}}

AlejandroVargas

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!

khutchins

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"
};

AlejandroVargas

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.utils.createMap wouldn't apply to what I need.

If this won't work, is there another way?

AlejandroVargas

Thank you very much, Kelly! I will test that and let you know how it turns out.

Much appreciated!

khutchins

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.