Enhanced Bookmark Widget Version 2.5 - 08/17/17

[#1]

Live Preview Site

Web AppBuilder for ArcGIS | Help - eBookmark Widget

Latest enhancements/fixes:

1. Updated for WAB 2.5
2. Added the ability to add folders at widget runtime.
3. Added optional thumbnails to the widget. The thumbnail is only visible after clicking on the preview icon.
4. Added the ability to capture the map image as the thumbnail.
5. Added the ability to save your bookmarks as a json file to the client.
6. Added the ability to load a saved bookmark json file.
7. Added the ability to export the selected bookmark extent as an app url to be shared with others.

Older enhancements or changes

1. Fix dart theme visibility issue

The Enhanced Bookmark widget stores a collection of map view extents (that is, spatial bookmarks) displayed in the application. It also allows you to create and add your spatial bookmarks through configuration or at run time after the application starts. In addition, if there are any existing bookmarks defined for the web map used in the application, they are automatically used. What the enhanced bookmark widget adds is a hierarchical tree list for organizing your bookmarks in logical folders/groupings. The enhanced bookmark widget also does away with the thumbnails that the standard bookmark widget uses and adds UI enhancements and busy indicator when the map is zooming to the clicked bookmark.

[RebeccaStrauch__GISP]

Thanks as always Robert.  I added it to the list.....first new thing I've added for a while (pretty exciting.....cheap thrill I know).  

[BarnabyRockwell]

Good job, Robert.  Already added to an internal app.

Thanks,

Barnaby

PS:  You may want to add a way in the editing GUI to drag-n-drop an existing bookmark folder above or below another one in the list.  Or add little up and down arrows for each folder (and even bookmark) along the right side.

[RobertScheitlin__GISP]

Barnaby,

   Yep I knew that was going to be one of the first comments/suggestions someone would make. All good things come in time. I spent far longer on this widgets development, more than I expected to. Though I wanted to add that feature already, I really did not want to delay the initial release of the widget to add it.

[BarnabyRockwell]

Robert,

I agree with you 100% on all counts.  It's not much of a hassle to edit the json code to reorder folders.  Here's the widget in operation.  It's looking good.

http://cmerwebmap.cr.usgs.gov/usminmap/

Thanks,

Barnaby

[DAVIDDAS1]

Hi Robert,

Thanks a million for your new Enhanced Bookmark Widget version 1.2.

This is a brilliant solution for categorizing and managing a long list of Bookmarks.

I have tested your eBookmark Widget, and it works perfectly.

http://www.tapasdas.com/Maps/Phones/app65

I like how the bookmarks can be grouped under folders.

I like how the user can add their own bookmarks under a specific folder to keep them organized.

For example, if I wanted to add Sedona under the folder Arizona Cities, I would first click to highlight Arizona Cities.

Then I would search for Sedona.

Next, I would zoom to Sedona, enter the Bookmark Name and press the Add icon.

The new bookmark appears under the Arizona Cities folder.

The user has the option to delete their own bookmarks.

This is all very intuitive and works like a charm.

I was wondering if you would consider the capability of adding and deleting user bookmarks in the future?

In the Flex Version there was a way to Save bookmarks to your local device and subsequently Load these bookmarks.

There was also a way to email bookmarks, which gave us an easy way to capture the bounding coordinates.

http://www.tapasdas.com/Maps/Desktops/web9

I like how the Bookmark Header color honors the Style Color of the Theme being used.

I see that you have already implemented Barnaby's enhancement request to promote/demote bookmarks from the GUI.

This will make it far more elegant and simpler compared to doctoring the config_Enhanced Bookmark 1.2.json file.

There is yet one more enhancement request I would like add.

Could we have an option to include a thumbnail image with the bookmarks?

For example, in the standard Bookmark Widget, I can include thumbnails like this:

When the user adds their own bookmarks, it may be useful to associate a thumbnail of the current map extent with the Bookmark Text.

You are already capturing the current bounding coordinates with each new bookmark.

What if there is an option to take a screenshot of the current map extent and include that as a thumbnail alongside the Bookmark listing?

Here I am searching for PAGE CITY with your eSearch Widget.

When I open your eBookmark Widget, and Add this new Bookmark, it would be nice if I could also get a thumbnail showing the highlighted city.

Robert, your Enhanced Bookmark Widget 1.2 is another wonderful addition to your collection of Custom Widgets for the Web AppBuilder Developer edition 1.2

With each new addition, you are making the WAB platform closer to the functionality available on the Flex platform that you had championed for the last 8 years.

I know a lot of hard work and patience goes into developing these widgets. The end result is a simple intuitive widget that helps thousands of end users get their work done efficiently.

[RobertScheitlin__GISP]

Tapas,

   User added bookmarks are already stored on the local storage and should automatically load the next time you use the app. Thumbnails is something I did not like about the OTB bookmark widget so I probably won't be adding that. The email part I have not thought about as that widget you are referring to is not one of mine, but I will consider. Thanks for the feedback.

[DAVIDDAS1]

Hi Robert,

I agree with your reasoning. I think it is a good idea not to include the thumbnails. It messes everything up when viewed through a smartphone.

I was hoping the user added bookmarks could be saved to a text file so that they can be shared with different browsers.

In this example, I am adding a new bookmark = Sedona using Chrome as my Browser:

http://www.tapasdas.com/Maps/Phones/app65

I can refresh the page. My new bookmark is still there.

I can close Chrome, and reopen Chrome and launch the same URL, and my new bookmark is still there.

This is good. The bookmark information is being stored locally in the browser cache as you indicated.

However, if I close Chrome, and launch Firefox, my new bookmark will not be visible as the information is stored in the browser cache for Chrome, which is not shared with Firefox.

If there was an option to download my user bookmarks to a file, I could reload this back into any browser.

Your Enhanced Bookmark widget works in every theme and takes the color of the selected Style Color.

I found one minor issue with the Dart Theme. The Bookmark Text is not visible.

http://www.tapasdas.com/Maps/Phones/app66

Yes, it would be nice to have the email feature to list the map extents of a user defined bookmark. However, there is a workaround available using your Share Widget 1.2.0.1

http://www.tapasdas.com/Maps/Phones/app67

The current map extents always shows up in the Embed Map text box.

The Email option within your Share Widget also lists the map extent.

Thanks again for all your prompt and helpful responses. You are working on a Sunday afternoon!

[BarnabyRockwell]

Robert,

Yes, if people want thumbnails, I suggest that they use the stock Esri Bookmark widget.  Hopefully Esri could implement the feature which TAPAS DAS suggested,

When the user adds their own bookmarks, it may be useful to associate a thumbnail of the current map extent with the Bookmark Text.

namely adding an option to automatically include a screenshot of the current map view as the thumbnail, which would save the user from having to get their own thumbnail image.

Cheers,

Barnaby

[RebeccaStrauch__GISP]

Hi Robert, possibly a silly question, but if I want to manually add my bookmarks (i.e. copy over from my 1.0 bookmarks ...without the thumb of course).  I thought this would be the

\arcgis-web-appbuilder-1.2\server\apps\#\widgets\eBookmark\config.json  but modifying this does not show manually modifications, nor does it seem to store the new bookmarks I did thru the widget config.

What am I missing?

[BarnabyRockwell]

Edit this file:

\arcgis-web-appbuilder-1.2\server\apps\#\configs\eBookmark\config_Enhanced Bookmark.json

[RebeccaStrauch__GISP]

Thanks Barnaby.  I forgot about that file.  It's actually been awhile since I actually dug into WAB....so totally spaced that location.  That is what I needed!

[FinbarGillen]

Hi Robert,

Again great widget! Do you have any plans to develop the widget so the final users can add a folder for themselves?

We would like to have that functionality so that users can edit the widget to their needs.

Finbar

[RebeccaStrauch__GISP]

Robert, great widget, and I'm getting all my older bookmarks copied over and organized. 

re: the thumbnail.  I like that this does not take up valuable space with the thumbs, but is it at all possible to add a pop-up image on hover?  I like the quick preview when setting up the bookmark, something looking like that would be nice for users to have a quick view before zooming (especially if the zoom will take a while on a slow connection).

Just a wishlist item.

[RobertScheitlin__GISP]

Finbar,

   It is something I am considering for a future release.

[RobertScheitlin__GISP]

Rebecca,

   That sounds like a possibility. Let me think about that one.

[RebeccaStrauch__GISP]

Maybe just a folder called "User bookmarks" or MyBookmarks" and have everything written to that would be good.  May not be totally on-demand, but if that can be controlled that would be nice (not sure where user bookmarks are written now)

[Anonymous User]

Hi Robert,

The design is perfect.  Our users were very interested, though they want to save Bookmarks to a file share between users, and were also concerned that the Bookmarks would disappear should the cache be cleared, which happens often.  I echo TAPAS DAS​ and others' thoughts- if we can save the Bookmarks to file this will be awesome!  Regarding your UI customizations: perfect. The loading indicator is a nice touch. This is a classic Robert widget right here.

[BarnabyRockwell]

While a pop-up image on hover sounds intriguing, it may present annoyances if not properly implemented, such as covering up bookmarks visually, making navigating and seeing the bookmarks more time-consuming and problematic.  What about a super-mini icon on the bookmark that one could click to see the image?  Or have all images display on hover outside of widget area so that the images never cover the text in the bookmarks themselves?

[Anonymous User]

Can users not add Folders?

[RobertScheitlin__GISP]

No, Currently folder can only be added at configuration of the widget

[Anonymous User]

That would be highly useful. A future update perhaps?

[RobertScheitlin__GISP]

Under consideration

[BarnabyRockwell]

Robert,

New version works great.  One easy potential enhancement would be to add the words "Add Bookmark" in small type near the data entry box at the top to inform users as to what the box is for.

New widget in action:

http://cmerwebmap.cr.usgs.gov/usminmap/

Cheers,

Barnaby

[GennadyMogilevich]

I agree with Kevin.  Our users want or really need the ability to save bookmarks that will be saved with their profile when they login with their AD credentials.  Maybe that requires additional customization after installing the widget, but since I have limited programming skills, I would have no idea where to begin.  As someone mentioned in a previous comment, I too have no idea how a user's bookmarks are stored, but based on user feedback, the functionality is very much desired.

Thanks,

Henry M.

[RobertScheitlin__GISP]

Henry,

   Saved bookmarks are stored on the browsers data store and will not be specific to a AD user. So the next time someone uses that browser on that machine then they will see the saved bookmarks.

[DavidAllen]

Works really well. Our fire department likes to have the bookmarks for apartments separated by district - and now I can do that.

One enhancement might be to add an option to have the box automatically close after the bookmark is chosen.

[RobertScheitlin__GISP]

David,

   By Box, do you mean close the widget?

[DavidAllen]

Yes - close the widget after the map has panned to the bookmark.

As an example, I might have a list of bookmarks that are the city parks. The user can choose a park where they might want to run the trails. After they click the bookmark, it zooms the map to the bookmarked location and the widget closes. If they want to see another park, they could activate the bookmark widget again.

[BarnabyRockwell]

That sounds like a good idea, but it should be a select-able option, not mandatory.

[DavidAllen]

Absolutely. Sometimes you want it and sometimes not.

[RobertScheitlin__GISP]

David,

   Hmm.. I see the use case and I do think this is a good idea to implement this (but configurable as Barnaby suggests).

[skcchan]

Is it possible to also save the current layer configuration (such as what layers are turned on or off in the layer list widget) as part of the bookmark?

[RobertScheitlin__GISP]

Stephen,

  Nope that is not a option, this is just a bookmark widget and will not remember or interact with app state.

[BarnabyRockwell]

The "Add Map Image" option is great, Robert!  Good job!

[DAVIDDAS1]

Hi Robert,

Thanks so much for releasing your Enhanced Bookmark Widget 2.5, Version 7.

I like all the new features in this release.

It is very helpful to have a thumbnail picture associated with the bookmarks.

I like how the user can now add their own bookmarks anywhere within the folder structure, or create their own folders and subfolders, and place their bookmarks anywhere they wish.

The ability to store the bookmarks.json file within your local machine and then recall the saved bookmarks is a powerful feature.

I like how the bookmarks stay persistent, until the browser cache is cleared.

I tried testing out all these features in all the themes.

Everything is working perfectly.

WAB 2.5 – Foldable Theme

http://www.tapasdas.com/Maps/Phones/app248/

The Bookmark Preview window pops up when you click on the thumbnail icon.

Highlight the folder where you would like to insert your new bookmark.

New bookmark appears under the highlighted folder.

Create your own folder and subfolders for adding your own bookmarks.

Save and Load your Bookmarks.

WAB 2.5 – Launchpad Theme

http://www.tapasdas.com/Maps/Phones/app249

WAB 2.5 – Dart Theme

http://www.tapasdas.com/Maps/Phones/app250

WAB 2.5 – Tab Theme

http://www.tapasdas.com/Maps/Phones/app251

WAB 2.5 – Jewelry Box Theme

http://www.tapasdas.com/Maps/Phones/app252

WAB 2.5 – Box Theme

http://www.tapasdas.com/Maps/Phones/app253

WAB 2.5 – Plateau Theme

http://www.tapasdas.com/Maps/Phones/app255

I like how easy you have made it to include the thumbnail pictures with a few simple steps.

Configure the Enhanced Bookmark Widget

Add Bookmarks

Add Map Image

Crop the Image

Enter the Bookmark Title, press OK

I wish everything in life was as simple as using your Custom Widgets!

Thanks again for all the hard work you put into this Widget.

You have pushed the JavaScript version of all your Custom Widgets to the point where I no longer miss the Flex API.

I never thought I will see this day, but you made it happen.

Cheers!

Tapas Das

[WhitneyNewcomb]

Hi!

This is such a great custom widget and I am storngly considering using it in my app. 

I have one question about functionality: 

I would like it so the users are not able to delete bookmarks. 

I found an application that has the functionality I want - is it using this widget?

Any help is greatly appreciated!

[RobertScheitlin__GISP]

Whitney,

   The eBookmark widget is a hierarchical list of bookmark and the bookmark that are adding when configuring the widget do not have the option to be deleted by the user. Only user created bookmarks or folders can be deleted by the user. The book mark widget you are showing there is the default OTB bookmark widget. 

[GeorgeKatsambas]

If I have created a WAB application and set up my bookmarks as I want can I transfer the bookmark folder in widget folder to another wab application bookmark folder? 

[RobertScheitlin__GISP]

George,

  Sure the apps need to be the same version preferably.

[GeorgeKatsambas]

So I just overwrite the Bookmark Widget Folder here C:\WAB\WebAppBuilderForArcGIS\server\apps\app #\widgets\Bookmark

[RobertScheitlin__GISP]

yes

[GeorgeKatsambas]

Not working? Both WAB are 2.5. I added the bookmark widget to a map with no bookmarks in it. I took the bookmark widget folder from an app where the bookmarks are set up as i wanted and overwrote the folder in the widget folder and the bookmarks are not there? What am I missing?

[RobertScheitlin__GISP]

George,

  Sorry for the confusion. If you want to transfer the bookmarks from one app to another you have to copy the apps configs\eBookmark folder as well.

[GeorgeKatsambas]

Thanks Robert, I have to add a bookmark widget first to an app, not just copy the folders over I assume right?

[RobertScheitlin__GISP]

Correct

[JamalWest2]

Robert,

I have found this widget to be very helpful, but am hoping to add something. I have added a parameter for description. It can be accessed using bookmark.description just as the bookmark.name is accessed. I want to add this as a new line under the bookmark name though in the listview rather than a continuation of the same line. Do you know how I could go about doing this? Any insight would be appreciated.

[RobertScheitlin__GISP]

Jamal,

   Here is what I think. In the BookmarkListView.js

      var bmLblTxt = bookmark.name;
      if(bookmark.desc){bmLblTxt += "<br>" + bookmark.desc}
      divLabel = domConstruct.create('div', {
        'innerHTML': bmLblTxt,
        'class': 'div-content jimu-float-leading'
      }, bookmarkTitleTdNode);‍‍‍‍‍‍

This is may what you were not wanting to do but unless you go this route there will have to be a lot of re-coding done by you.

If you have added any bookmark in your app at runtime then you will have to clear your browsers local storage to get this to show the description since the bookmarks will be coming from the local storage which does not have a description property yet.

[JamalWest2]

Robert,

That was what I needed, thanks!

[PhilippNagel]

Hopefully some can answer this - how does the bookmark widget or the e bookmark widget store the bookmarks? Are they stored in the AGO user account, or just in the browser? If in the browser, i would assume that if the user uses a different browser/ resets theirs, etc, they lose them all?

[RobertScheitlin__GISP]

Philipp,

   You are correct they are stored in the browser.Modern browsers have something called local storage and that is used by the widgets. It is not as simple as clearing the browser cache to clear the local storage though, but yes using a different browser means that the bookmarks from the other browser would not be available.