AnsweredAssumed Answered

How do I add bookmarks via code to bookmark widget in web app builder application?

Question asked by bkeinath on Feb 26, 2015
Latest reply on Feb 28, 2015 by bkeinath

Like • Show 0 Likes0
Comment • 10

I’m trying to add a number of new bookmarks into an existing web app builder application we have on our arcgis server. I believe that I’ve followed the correct syntax but the main issue is that I’m not seeing any changes when I edit the config.json file in the bookmark widget folder. I’ve tried clearing my cache, creating a new application with the new file, yelling, etc.

Can someone help me with the correct workflow or with tricks for adding new bookmarks to an existing web app builder application bookmark
config.json?

Thanks,

Brandon

rastrauch

Feb 26, 2015 10:51 AM

Correct Answer

I'm assuming Developers version and not AGOL.

I have added my bookmarks to my \server\apps\##\configs\Bookmark\confi_BookMark.json and my images to a (a subfolder in my case) \server\apps\##\images\<my folder> and have got them to show up. However, if you have any of the brackets { } or a comma out of place, or too many, I have issue, so check that. Sample from my .json is below. BTW, I'm using the Spatial Reference of my basemap (3338), and I have not removed the "bookmarks3D" yes, but I bet I can.

{
  "bookmarks2D": [
    {
      "name": "Alaska",
      "extent": {
        "xmin": -2198425.951556916,
        "ymin": -571799.0103886893,
        "xmax": 2161916.1024605264,
        "ymax": 3191641.8498263652,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/state.gif"
    },
    {
      "name": "GMU 1",
      "extent": {
        "xmin": 904970.132301448,
        "ymin": 709069.0643382578,
        "xmax": 1513301.348963881,
        "ymax": 1245433.4704004033,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/gmu1.gif"
    },
    {
      "name": "Subunit 1A",
      "extent": {
        "xmin": 1325182.2227256289,
        "ymin": 748518.518237165,
        "xmax": 1500865.9074263317,
        "ymax": 960661.8591905136,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/gmu1A.gif"
    }
  ],
  "bookmarks3D": [
    {
      "name": "China",
      "camera": [
        116.38,
        39.9,
        100000,
        0,
        1
      ],
      "thumbnail": "images/thumbnail_beijing.png"
    },
    {
      "name": "SF",
      "camera": [
        -122.3956840179302,
        37.78329055435611,
        235.5668830918148,
        327.4062957304337,
        66.71004825534648
      ],
      "thumbnail": "images/thumbnail_sf.png"
    },
    {
      "name": "USA",
      "camera": [
        -108.919,
        34.2259,
        4126880,
        340.71,
        5.91655
      ],
      "thumbnail": "images/thumbnail_us.png"
    }
  ],
  "flyTime": 3000
}

See the reply in context

No one else had this question

Outcomes

rastrauch

Feb 26, 2015 10:51 AM

I'm assuming Developers version and not AGOL.

{
  "bookmarks2D": [
    {
      "name": "Alaska",
      "extent": {
        "xmin": -2198425.951556916,
        "ymin": -571799.0103886893,
        "xmax": 2161916.1024605264,
        "ymax": 3191641.8498263652,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/state.gif"
    },
    {
      "name": "GMU 1",
      "extent": {
        "xmin": 904970.132301448,
        "ymin": 709069.0643382578,
        "xmax": 1513301.348963881,
        "ymax": 1245433.4704004033,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/gmu1.gif"
    },
    {
      "name": "Subunit 1A",
      "extent": {
        "xmin": 1325182.2227256289,
        "ymin": 748518.518237165,
        "xmax": 1500865.9074263317,
        "ymax": 960661.8591905136,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/gmu1A.gif"
    }
  ],
  "bookmarks3D": [
    {
      "name": "China",
      "camera": [
        116.38,
        39.9,
        100000,
        0,
        1
      ],
      "thumbnail": "images/thumbnail_beijing.png"
    },
    {
      "name": "SF",
      "camera": [
        -122.3956840179302,
        37.78329055435611,
        235.5668830918148,
        327.4062957304337,
        66.71004825534648
      ],
      "thumbnail": "images/thumbnail_sf.png"
    },
    {
      "name": "USA",
      "camera": [
        -108.919,
        34.2259,
        4126880,
        340.71,
        5.91655
      ],
      "thumbnail": "images/thumbnail_us.png"
    }
  ],
  "flyTime": 3000
}

1 person found this helpful

Actions

bkeinath @ rastrauch on Feb 27, 2015 6:25 AM

Hi Rebecca,

A good assumption. Yes, I am using the developer's edition and I'm sorry I didn't make that clear from the start. I've been able to successfully modify the code, as in save the changes in notepad ++, but the changes don't show up when I look at the app again. I have certainly made bracket and other syntax errors but I can't even make a change like swapping "Alaksa" for "ALASKA_FOREVER!!!". The only change I seem able to make it by removing the images folder the same bookmarks show up without images. Other than that I seem to be helpless.

Thanks,

Brandon

Actions

rscheitlin

@ bkeinath on Feb 27, 2015 6:38 AM

Brandon,

In the bookmark widget code there is this comment:

if user add/delete a bookmark, we will save all of the bookmarks into the local storage.

Clearing the local storage is very dependent on what browser and if that browser supports HTML5 local storage or not. So I use Fire Fox 33 and If I deleted a bookmark for a WAB site, I can restore what bookmarks that site had originally configured by clearing the local storage for my WAB sites URL by going to my WAB site and clicking F12 or Ctrl + Shift + I (to bring up fire fox developer tools) and then in the web console command line I enter "localStorage.clear();" and click enter. That is all there is to it in Firefox.

The reason I mention this is that the bookmark widget stores bookmarks in the browsers local storage. So if you deleted or added a bookmark using the bookmark widgets UI then these change are stored in your browsers local storage. this could be causing you some issues. So I would clear your local storage and see if your bookmarks added to the config show up.

Actions

bkeinath @ rscheitlin on Feb 27, 2015 1:31 PM

Hi Robert,

I'd like to try your firefox workflow but I'm unable to connect to our internal applications using firefox. If you've done some troubleshooting with different browsers and ADFS and web-tier security I can elaborate otherwise we can leave it be.

The only thing I've been able to modify is the images, but only when I change the name of the physical file and not when I change the name in the config.json file. For instance, when I rename a png image I made to thumbnail_great_wall.png then China comes up like this in the bookmarks

But when I change the name of the China "thumbnail" value to images/Askov.png I get the same image I physically renamed to thumbnail_great_wall.png

Any chance it's the program I'm using (Notepad ++)? I've tried everything I can find on google from clearing cache in IE and Chrome.

Thanks,

Brandon

Actions

rscheitlin

@ bkeinath on Feb 27, 2015 1:37 PM

Brandon,

Both IE and Chrome have ways to clear their local storage as well I am just not immediately familiar with those. I would just Google it.

Actions

bkeinath @ rscheitlin on Feb 27, 2015 1:42 PM

Thanks Robert,

The googling I've done doesn't appear to be working and rather than spend too much more time on it I'm going to submit an esri incident. I'll post back when the incident is resolved with my final solution. I appreciate your thoughts and effort, yours too Rebecca Strauch, GISP

Best,

Brandon

Actions

rscheitlin

@ bkeinath on Feb 27, 2015 1:49 PM

Brandon,

Here is what works in both IE, Chrome and FF

javascript - How to clear localStorage in IE10 & IE11 from developer tool? - Stack Overflow

1 person found this helpful

Actions

bkeinath @ rscheitlin on Feb 27, 2015 1:54 PM

Robert,

When I run the code referenced in the link I get “undefined” returned in the console.

Brandon

Actions

rscheitlin

@ bkeinath on Feb 27, 2015 2:15 PM

That's perfect as it returns undefined because clear does not return anything, hence undefined

1 person found this helpful

Actions

bkeinath @ rscheitlin on Feb 28, 2015 12:28 PM

Ok, well that does make sense. Unfortunately nothing is different following the command and resulting "undefined". I'll report back on the eventual solution.

Thanks,

Brandon

Actions

10 Replies

rastrauch Feb 26, 2015 10:51 AM
Unmark Correct
Correct Answer
I'm assuming Developers version and not AGOL.

I have added my bookmarks to my \server\apps\##\configs\Bookmark\confi_BookMark.json and my images to a (a subfolder in my case) \server\apps\##\images\<my folder> and have got them to show up. However, if you have any of the brackets { } or a comma out of place, or too many, I have issue, so check that. Sample from my .json is below. BTW, I'm using the Spatial Reference of my basemap (3338), and I have not removed the "bookmarks3D" yes, but I bet I can.
```
{
  "bookmarks2D": [
    {
      "name": "Alaska",
      "extent": {
        "xmin": -2198425.951556916,
        "ymin": -571799.0103886893,
        "xmax": 2161916.1024605264,
        "ymax": 3191641.8498263652,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/state.gif"
    },
    {
      "name": "GMU 1",
      "extent": {
        "xmin": 904970.132301448,
        "ymin": 709069.0643382578,
        "xmax": 1513301.348963881,
        "ymax": 1245433.4704004033,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/gmu1.gif"
    },
    {
      "name": "Subunit 1A",
      "extent": {
        "xmin": 1325182.2227256289,
        "ymin": 748518.518237165,
        "xmax": 1500865.9074263317,
        "ymax": 960661.8591905136,
        "spatialReference": {
          "wkid": 3338
        }
      },
      "thumbnail": "images/GMU/gmu1A.gif"
    }
  ],
  "bookmarks3D": [
    {
      "name": "China",
      "camera": [
        116.38,
        39.9,
        100000,
        0,
        1
      ],
      "thumbnail": "images/thumbnail_beijing.png"
    },
    {
      "name": "SF",
      "camera": [
        -122.3956840179302,
        37.78329055435611,
        235.5668830918148,
        327.4062957304337,
        66.71004825534648
      ],
      "thumbnail": "images/thumbnail_sf.png"
    },
    {
      "name": "USA",
      "camera": [
        -108.919,
        34.2259,
        4126880,
        340.71,
        5.91655
      ],
      "thumbnail": "images/thumbnail_us.png"
    }
  ],
  "flyTime": 3000
}
```
1 person found this helpful
Like • Show 0 Likes0
Actions
- bkeinath @ rastrauch on Feb 27, 2015 6:25 AM
  Mark Correct
  Correct Answer
  Hi Rebecca,
  
  A good assumption. Yes, I am using the developer's edition and I'm sorry I didn't make that clear from the start. I've been able to successfully modify the code, as in save the changes in notepad ++, but the changes don't show up when I look at the app again. I have certainly made bracket and other syntax errors but I can't even make a change like swapping "Alaksa" for "ALASKA_FOREVER!!!". The only change I seem able to make it by removing the images folder the same bookmarks show up without images. Other than that I seem to be helpless.
  
  Thanks,
  
  Brandon
  Like • Show 0 Likes0
  Actions
  - rscheitlin @ bkeinath on Feb 27, 2015 6:38 AM
    Mark Correct
    Correct Answer
    Brandon,
    
    In the bookmark widget code there is this comment:
    if user add/delete a bookmark, we will save all of the bookmarks into the local storage.
    
    Clearing the local storage is very dependent on what browser and if that browser supports HTML5 local storage or not. So I use Fire Fox 33 and If I deleted a bookmark for a WAB site, I can restore what bookmarks that site had originally configured by clearing the local storage for my WAB sites URL by going to my WAB site and clicking F12 or Ctrl + Shift + I (to bring up fire fox developer tools) and then in the web console command line I enter "localStorage.clear();" and click enter. That is all there is to it in Firefox.
    
    The reason I mention this is that the bookmark widget stores bookmarks in the browsers local storage. So if you deleted or added a bookmark using the bookmark widgets UI then these change are stored in your browsers local storage. this could be causing you some issues. So I would clear your local storage and see if your bookmarks added to the config show up.
    Like • Show 0 Likes0
    Actions
    - bkeinath @ rscheitlin on Feb 27, 2015 1:31 PM
      Mark Correct
      Correct Answer
      Hi Robert,
      
      I'd like to try your firefox workflow but I'm unable to connect to our internal applications using firefox. If you've done some troubleshooting with different browsers and ADFS and web-tier security I can elaborate otherwise we can leave it be.
      
      The only thing I've been able to modify is the images, but only when I change the name of the physical file and not when I change the name in the config.json file. For instance, when I rename a png image I made to thumbnail_great_wall.png then China comes up like this in the bookmarks
      
      But when I change the name of the China "thumbnail" value to images/Askov.png I get the same image I physically renamed to thumbnail_great_wall.png
      
      Any chance it's the program I'm using (Notepad ++)? I've tried everything I can find on google from clearing cache in IE and Chrome.
      
      Thanks,
      
      Brandon
      Like • Show 0 Likes0
      Actions
      - rscheitlin @ bkeinath on Feb 27, 2015 1:37 PM
        Mark Correct
        Correct Answer
        Brandon,
        
        Both IE and Chrome have ways to clear their local storage as well I am just not immediately familiar with those. I would just Google it.
        Like • Show 0 Likes0
        Actions
        bkeinath @ rscheitlin on Feb 27, 2015 1:42 PM
        Mark Correct
        Correct Answer
        Thanks Robert,
        
        The googling I've done doesn't appear to be working and rather than spend too much more time on it I'm going to submit an esri incident. I'll post back when the incident is resolved with my final solution. I appreciate your thoughts and effort, yours too Rebecca Strauch, GISP
        
        Best,
        Brandon
        Like • Show 0 Likes0
        Actions
        rscheitlin @ bkeinath on Feb 27, 2015 1:49 PM
        Mark Correct
        Correct Answer
        Brandon,
        
        Here is what works in both IE, Chrome and FF
        
        javascript - How to clear localStorage in IE10 & IE11 from developer tool? - Stack Overflow
        1 person found this helpful
        Like • Show 0 Likes0
        Actions
        bkeinath @ rscheitlin on Feb 27, 2015 1:54 PM
        Mark Correct
        Correct Answer
        Robert,
        
        When I run the code referenced in the link I get “undefined” returned in the console.
        
        Brandon
        Like • Show 0 Likes0
        Actions
        rscheitlin @ bkeinath on Feb 27, 2015 2:15 PM
        Mark Correct
        Correct Answer
        That's perfect as it returns undefined because clear does not return anything, hence undefined
        1 person found this helpful
        Like • Show 0 Likes0
        Actions
        bkeinath @ rscheitlin on Feb 28, 2015 12:28 PM
        Mark Correct
        Correct Answer
        Ok, well that does make sense. Unfortunately nothing is different following the command and resulting "undefined". I'll report back on the eventual solution.
        
        Thanks,
        
        Brandon
        Like • Show 0 Likes0
        Actions

GeoNet

The Esri Community

How do I add bookmarks via code to bookmark widget in web app builder application?

Outcomes

Related Content

Recommended Content

Incoming Links