topic Re: Javascript Template without ArcGIS.com Map Services? in ArcGIS JavaScript Maps SDK Questions

Javascript Template without ArcGIS.com Map Services?

ChrisPyle — Thu, 17 Nov 2011 21:46:21 GMT

Is it possible to use the ArcGIS.com javascript templates w/out ArcGIS.com hosted maps?

We're trying to edit a feature service that's on our intranet, and so it is not accessible via ArcGIS.com. I've seen how to add a map definition using JSON instead of just a mapID.
I've been able to load a map hosted on Arcgis.com via the JSON definitition, but when I try to point to our internal services, the map fails to initialize. When initializing, the layer objects under each map layer are all undefined.

So, using the Editor_Chrome template, this works to define the ConfigOptions.webmap:

        var webmap = {}; webmap.item = { "title": "Soil Survey Map of USA", "snippet": "Detailed description of data", "extent": [[-139.4916, 10.7191], [-52.392, 59.5199]] };
        webmap.itemData = { "operationalLayers": [{
        "url": "http://server.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer",
        "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"    };

But this does not:

        var webmap = {}; webmap.item = { 
        "title": "San Diego Special Events", 
        "snippet": "Special Events Locations", 
        "extent": [[6171671, 1760860], [6621931, 2102353]] };
 
        webmap.itemData = { "operationalLayers": [{
        "url": "http://vmgisprod3/ArcGIS/rest/services/SEPS_Edit/FeatureServer",
        "visibility": true,
        "opacity": 1,
        "title": "Special Events Map",
        "itemId": "204d94c9b1374de9a21574c9efa31164"
        }],
        "baseMap": {
        "baseMapLayers": [{
        "opacity": 1,
        "visibility": true,
        "url": "http://citymaps.sannet.gov/ArcGIS/rest/services/SanGIS_Basemap/MapServer"
        }, {
        "isReference": true,
        "opacity": 1,
        "visibility": true,
        "url": "http://citymaps.sannet.gov/ArcGIS/rest/services/SanGIS_Basemap/MapServer"
        }],
        "title": "San Diego Basemap"
        },
        "version": "1.1"
        };

Is there a definition of the JSON webmap syntax somewhere that might give me a clue?

Thanks,
-Chris

Re: Javascript Template without ArcGIS.com Map Services?

SamLarsen — Wed, 11 Jan 2012 11:07:07 GMT

I too am attempting to create an application using webmap JSON which is failing.
I am using version 2.6 of the JavaScript API and the JSON sample from:
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/intro_webmap.html
Which is clearly an older version of the webmap JSON specification than what is currently being used on ArcGIS.com.
It would really help with development if this specification was published somewhere. Currently the only way i can get it to work is to look at the JSON responses of the ArcGIS.com webmaps, save the files and then edit them with my own content.

Re: Javascript Template without ArcGIS.com Map Services?

KellyHutchins — Sat, 11 Dec 2021 15:18:36 GMT

Chris,

In your second example you are trying to add a layer from a feature service without specify the index of the layer to display. Here's an example that shows how to add a feature service layer:

 "operationalLayers": [{
    "url": "http://sampleserver3.arcgisonline.com/arcgis/rest/services/HomelandSecurity/operations/FeatureServer/2",
    "id": "operations_9184",
    "visibility": true,
    "opacity": 1,
    "mode": 1,
    "title": "operations - Incident Areas",
    "popupInfo": {
      "title": "Incident Areas: {ftype}",
      "fieldInfos": [{
        "fieldName": "objectid",
        "label": "Object ID",
        "isEditable": false,
        "tooltip": "",
        "visible": false,
        "stringFieldOption": "textbox"
      }, {

Re: Javascript Template without ArcGIS.com Map Services?

MatthewPilgrim — Tue, 29 May 2012 14:25:39 GMT

Hi,

Can anyone provide step-by-step instructions (based on the basic viewer template) on how to replace the webmap id with code that will load map services from an independent server?

The templates are a good start for learning the javascript api but I could do with some help understanding how to modify them to use a internal map server.

Thanks,

Matt

Re: Javascript Template without ArcGIS.com Map Services?

TracySchloss — Sat, 11 Dec 2021 15:18:39 GMT

I haven't been able to figure this out, but I do know from looking at the API reference that map and webmap are two different things. So it's going to take more than just a few changes in URL etc to get this to work.

I have been successful so far with just adding some lines in the layout.js in the function unitUI. It still relies on the webmap from arcgis.com, but at least I have been add an additional feature layer over the top. It's a start anyway.

I inserted these lines after the line map.graphics.add(maxExtentGraphic);

I'm having problems with the title of the infoTemplate, basically I'm defining it, but it's not showing up as a title. I think I'm getting infoWindows and popUps confused.

 var title = "${FACILITY}";
 var content = "<b>${FACILITY}</b>" + "<br>${ADDRESS}" + "<br>${CITY}" ;
   
   var template = new esri.InfoTemplate(title,content); 
   //var template = new esri.InfoTemplate();
   //template.setTitle("hospital");
   //template.setContent(content);
  
        var featureLayer = new esri.layers.FeatureLayer("http://myserver/arcgis/rest/services/myserviceName/MapServer/1",{ 
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, 
         outFields: ["*"],
         infoTemplate:template 
        }); 
        var pictureSymbol = new esri.symbol.PictureMarkerSymbol('images/hospital_square.png', 12, 12);    

   
 var featureRenderer = new esri.renderer.SimpleRenderer(pictureSymbol);
 featureLayer.renderer = featureRenderer;
 
 map.addLayer(featureLayer);

Re: Javascript Template without ArcGIS.com Map Services?

NilsBabel — Tue, 04 Dec 2012 20:22:14 GMT

Hey there, any more info on converting the map templates to use map services instead of webMaps? I'm trying to do the same thing. and am hacking my around layout.js with no success. Step by step instructions would be great. Sounds like an idea for an ESRI blog!

Thanks.

Re: Javascript Template without ArcGIS.com Map Services?

MatthewPilgrim — Wed, 05 Dec 2012 06:51:29 GMT

I have not focused on this recently. However at the London Development Conference it was mentioned that a specification for WebMap will be released. After a bit of digging I found the following which might be useful:

Initialise a map using an ArcGIS map id.

As above but pass the id as a URL parameter.

Initialise a map using JSON.

In the last example I can�??t find documentation for ItemData �?? I assume this is what will be published. The flex documents describe ItemData as �??The item data returned by getItem(), createMapById() and createMapByItem() in WebMapUtil. This includes the layer information.�?� They also give another example.

I figure we can probably sniff out enough of the ItemData syntax to store it in a local config file (with services directed to the local server) and then use it to initialise a map.

Hope that helps, Matt

Re: Javascript Template without ArcGIS.com Map Services?

JohnGravois — Wed, 05 Dec 2012 15:35:28 GMT

its a bit of a hack, but until the web map specification documentation is released, you can always snoop the itemData JSON for published web maps to get a look at syntax using the following Url format

http://www.arcgis.com/sharing/content/items/[webmapid]/data?f=pjson

for example
http://www.arcgis.com/sharing/content/items/a96ce92a485f4ab4b609cd2f1a7e6e40/data?f=pjson

Re: Javascript Template without ArcGIS.com Map Services?

KevinMacLeod1 — Fri, 14 Dec 2012 15:45:07 GMT

Thanks all for the info and this question. I am also looking to do this exact same thing: use Basic Viewer template but get rid of dependency on ArcGIS.com, except to call basemap layers on their own.

I'm an extreme beginner with it all (HTML, CSS, JavaScript, ESRI JS API, Dojo etc). But I am making our local web mapping applications and Javascript has been selected for its write-once, run on all platforms capabilities.

I am using Vis. Studio 2012 from Microsoft with all this. I figured out Code Assist.

The Basic Viewer template at first seems simple enough but upon digging in to it not so "basic", for my very humble skills.

What I've done so far is get rid of the ESRI logo (replaced with link to transparent image, I couldn't get any code snippets to work that told it to "turn off") and put a custom logo up at the top of the page via an img src= HTML tag. I added layers via ArcGIS.com and set the initial extent this way. Will these settings hold if I remove dependencies on ArcGIS.com with the webmap ID?

I like that Basic Viewer "just works". But, it's actually a big stack of code and more step-by-step documentation on how to remove ArcGIS.com dependency would be great.

The other thing that first threw me for a loop is the naming convention ESRI has established in Basic Viewer using things like "map" that are easy to confuse with operators or whatever they are called, methods(?), the things you call from Dojo.

Also all this with JSON, sounds intimidating. ESRI can you consider releasing a "local" version of Basic Viewer that is all set up to accept links to our own servers? So we just drop in the URLs to our Services we are publishing with Arc Server? Similar to how it works now only without ArcGIS.com. Kelly or anyone else from ESRI what are your thoughts here?

I hope someone figures an answer out, and much thanks if anyone can post it or a link to it here! Looking at this thread...is it the consensus that we're stuck waiting for web map "specification" documentation from ESRI?

Re: Javascript Template without ArcGIS.com Map Services?

JohnGravois — Fri, 14 Dec 2012 16:27:48 GMT

documentation on the web map spec was released the other day.

it is my understanding that the JavaScript team has no plans to develop and maintain a single configurable "Viewer" which will include a full pallete of widgets and allow you to plug and play with your own services.

Re: Javascript Template without ArcGIS.com Map Services?

NewUser — Tue, 02 Apr 2013 12:37:33 GMT

I'm trying to figure how I'd go about removing the webmap in the basic viewer template too.

Would I basically comment out the webmap id in the index.html and build a webmap in the layout.js? Maybe using Create web map using JSON as an example, using my own services?

Re: Javascript Template without ArcGIS.com Map Services?

NewUser — Sat, 11 Dec 2021 15:18:42 GMT

I created this function based on the Create web map using and JSON sample and placed it in the basic viewer index.html.

 function add() {
        var webmap = {};
        webmap.item = {
          "title":"Soil Survey Map of USA",
          "snippet": "This map shows the Soil Survey Geographic (SSURGO) by the United States Department of Agriculture's Natural Resources Conservation Service.",
          "extent": [[-139.4916, 10.7191],[-52.392, 59.5199]]
        };

        webmap.itemData = {
          "operationalLayers": [{
            "url": "http://server.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer",
            "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"
        };

       return webmap;
}

In the index.html, I then changed

webmap: "dbd1c6d52f4e447f8c01d14a691a70fe",

webmap: add(),

It seems to work fine and when I click on a soil polygon the popup works as expected. The trouble I'm having is when I switch to an operational layer on my server, it's added to the map and displays in the legend just fine, but the identify popup doesn't work. Any thoughts on what I can troubleshoot?

Re: Javascript Template without ArcGIS.com Map Services?

NewUser — Tue, 02 Apr 2013 21:40:55 GMT

I was able to configure the popup by configuring the "popupInfo": in my operationallayer.

One thing I noticed is that my ability to zoom in seems to be limited to about 1" = 1 mile....the same behavior as the Create web map from JSON sample. Where is this controlled?

Re: Javascript Template without ArcGIS.com Map Services?

NewUser — Wed, 03 Apr 2013 15:32:14 GMT

It looks like this is determined by maybe a scale range set in the basemap? I changed the basemap to OpenStreetMap and I can zoom in as far as I want. I added Bing and can also zoom in as far as I want, but I noticed that the x,y coordinates I have displayed below the map disappear if I use Bing, but not if I use OpenStreetMap. I've added Bing to the basemapgallery and if I use OpenStreetMap as the Basemap in the webmap and then switch to Bing from the basemapgallery, the x,y coordinates are also fine. Thoughts as to what the issue might be?

Re: Javascript Template without ArcGIS.com Map Services?

ryanreise — Thu, 07 Nov 2013 18:33:11 GMT

It looks like this is determined by maybe a scale range set in the basemap? I changed the basemap to OpenStreetMap and I can zoom in as far as I want. I added Bing and can also zoom in as far as I want, but I noticed that the x,y coordinates I have displayed below the map disappear if I use Bing, but not if I use OpenStreetMap. I've added Bing to the basemapgallery and if I use OpenStreetMap as the Basemap in the webmap and then switch to Bing from the basemapgallery, the x,y coordinates are also fine. Thoughts as to what the issue might be?

Thanks for documenting your workflows. This thread has been very usefull for me. Did you ever figure out how to disable this zoom restriction on the esri basemap layers?

Re: Javascript Template without ArcGIS.com Map Services?

Mtclimber03 — Mon, 14 Apr 2014 16:47:31 GMT

new2jsapi could you tell me where exactly in the index.html you inserted the code snippet from https://developers.arcgis.com/javascript/jssamples/ags_createwebmapitem.html ? I'm having trouble getting this to work. I'm familiar with digging through this code but not an expert by any means. I've already replaced the webmap ID with "webmap: add(),"

Re: Javascript Template without ArcGIS.com Map Services?

EzequiasRodrigues_da_Rocha1 — Wed, 05 Nov 2014 16:09:11 GMT

How is your progress?

I would also like to know how to point to a ArcGIS Server ID instead of an AGOL.

Regards

Ezequias

Re: Javascript Template without ArcGIS.com Map Services?

DanielSmith — Wed, 05 Nov 2014 17:09:20 GMT

... how to point to a ArcGIS Server ...

Add Function to use our ArcGIS server services · Issue #16 · Esri/Viewer · GitHub

this should help

Re: Javascript Template without ArcGIS.com Map Services?

Asgharkhan — Mon, 15 Dec 2014 06:10:21 GMT

i am stuck on "webmap": "204d94c9b1374de9a21574c9efa31164", on defaults.js

how i use ur codes in this situation?

Please Guide me

Regards

Re: Javascript Template without ArcGIS.com Map Services?

AdamJoseph1 — Tue, 16 Jun 2015 21:10:33 GMT

an alternative way to provide your webmap is from cartoview which is free. Cartoview