Skip to content

New guide series for arcgis.widgets module#1142

Merged
AtmaMani merged 9 commits into
masterfrom
chun7642/new_widgets_guide
Jan 24, 2022
Merged

New guide series for arcgis.widgets module#1142
AtmaMani merged 9 commits into
masterfrom
chun7642/new_widgets_guide

Conversation

@CMPeng

@CMPeng CMPeng commented Jan 14, 2022

Copy link
Copy Markdown
Contributor

All chapters required by https://github.com/ArcGIS/geosaurus/issues/6846 except for Part 6 are listed here. Part 6 (JupyterLab) does not render maps as expected and hence not to be come with this release.

Notebooks are placed inside 10-mapping-and-visualization-alt folder. Please feel free to specify a better name if needed. @AtmaMani

@BP-Ent Can you please do us a big favor by reviewing this guide series? Many thanks!!

@CMPeng CMPeng requested a review from BP-Ent January 14, 2022 05:15
@review-notebook-app

Copy link
Copy Markdown

Check out this pull request on  ReviewNB

See visual diffs & provide feedback on Jupyter Notebooks.


Powered by ReviewNB

@AtmaMani AtmaMani changed the title new widget guide except for part 6 New guide series for arcgis.widgets module Jan 14, 2022
@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:42:55Z
----------------------------------------------------------------

Show creating a map widget and talk about the buttons and features

The GIS object includes a map widget for displaying geographic locations, visualizing GIS content, and displaying the results of your analysis. To use the map widget, call gis.map() and assign it to a variable that you will then be able to query to bring up the widget in the notebook:


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:42:56Z
----------------------------------------------------------------

Buttons

Now that we have created a map view, let us explore the default buttons enabled on the widget:

1. Zoom in

Click the "+" sign shown on the top left corner of the widget (marked as button #1 in previous map output) to zoom into details of the map. Users can either manually zoom into a desired level of detail or set the zoom levels to an assigned number, which we will elaborate on in the next section.

2. Zoom out

Click the "-" sign shown on the top left corner of the widget (marked as button #2 in previous map output) to zoom out to a rough display of the map. Users can either manually zoom out to a desired level of details, or set the zoom levels to an assigned number, which we will elaborate on in the next section.

3. Reset the compass orientation

Click the compass sign (marked as button #3 in the previous map display) to switch the map's heading to 0.0 (north) in relation to the current device, and click again to switch back to the absolute 0.0 north.

4. 2D Map to 3D Scene

Click the "Map to Scene" button (marked as #4 in the previous map display) to switch the current view from a 2D Map to a 3D Scene. Click the button again to switch back.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:42:57Z
----------------------------------------------------------------

The map widget has several properties that you can query and set, such as its zoom level, basemap, height, extent, mode, heading, rotation, tilt, scale, etc.  (when discussing, start off by asking user to zoom and pan to some area of interest and show the values of these properties. Then show how you can drive the widget through code by assigning values to the properties)


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:42:58Z
----------------------------------------------------------------

You can also set the rotation property for the 2D mode. This can similarly be achieved by right-clicking and dragging on the map.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:42:58Z
----------------------------------------------------------------

Your notebook can have as many of these widgets as you wish. Let's create another map widget and modify some of its properties.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:42:59Z
----------------------------------------------------------------

You can use geocoding to get the coordinates of different places and use those coordinates to drive the extent property. Geocoding converts place names to coordinates and can be implemented by using the arcgis.geocoding.geocode() function.

Let's geocode "Disneyland, CA" and set the map's extent to the geocoded location's extent.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:43:00Z
----------------------------------------------------------------

ArcGIS Living Atlas of the World is an evolving collection of authoritative, curated, ready-to-use global geographic information from Esri and the GIS user community. One of the most used types of content from the Living Atlas is basemaps. Basemaps are layers on your map over which all other operational layers that you add are displayed. Basemaps typically span the full extent of the world and provide context to your GIS layers. It helps viewers understand where each feature is located as they pan and zoom to various extents.

When you create a new map or scene, you can choose which basemap you want from the basemap gallery in the Map Viewer. By default, the basemap gallery for your organization is a pre-configured collection from Esri using the Living Atlas. There are many more Living Atlas basemaps to choose from, and you can create your own custom basemap gallery with the ones you like. Learn more on this here.

As an administrator of your organization, you can change which basemaps your organization uses by creating a custom basemap gallery. The custom gallery can include a combination of your own basemaps, plus Living Atlas basemaps. In a nutshell, the steps to create a custom basemap gallery are as follows:  

  • Create a group for your custom basemap gallery.  
  • Add maps you want to use as basemaps to the group.  
  • Set the group as your organization’s basemap gallery.

These steps are detailed in the Create a custom basemap gallery for your organization blog. After step one is done, users can move forward to :  


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:43:01Z
----------------------------------------------------------------

The map widget also includes support for a 3D mode! You can specify the mode parameter either through gis.map(mode="foo") or by setting the mode property of any initiated map object. Run the following cell:


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:43:02Z
----------------------------------------------------------------

Heading, tilt, and scale

Just like the 2D mode, you can pan by clicking-and-dragging with the left mouse button, and you can zoom with the mouse wheel. In 3D mode, clicking-and-dragging with the right mouse button modifies the tilt field and the heading field.

tilt is a number from 0-90, with 0 representing a top-down 'birds-eye' view, while 90 represents being completely parallel to the ground, facing the horizon.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:43:03Z
----------------------------------------------------------------

One commonly adopted workflow for creating multiple widgets in the same notebook is to embed Python API map widgets within HBox and VBox. First, let's walk through an example of displaying Landsat imagery of two different dates side by side using an HBox structure:


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:43:03Z
----------------------------------------------------------------

A side-by-side display of two maps is great for users wanting to explore the differences between two maps. However, if one map gets dragged or panned, the other map is not following the movements automatically. The methods sync_navigation and unsync_navigation can be introduced to resolve this. With these methods, we can modify the previous example to have the maps in sync.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:43:04Z
----------------------------------------------------------------

Dragging and panning onto any of these 4 maps will lead to synchronous movements of the other three maps, which means that the map center, zoom levels, and extent of these maps will always stay the same. This is one of the biggest advantages of sync_navigation().


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T00:43:05Z
----------------------------------------------------------------

In Part 2 of the guide series, we have talked about the use of map widgets, including buttons, features, and properties, and have seen three examples of displaying multiple map widgets in a group view using HBox and VBox. In the next chapter, we will discuss how to visualize spatial data on the map widget.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T17:38:05Z
----------------------------------------------------------------

Jupyter Notebook is also a great medium to work with and explore spatial data. Using just a single line of code, a live interactive map can be inserted into a notebook. Another line of code could then add content to the map that is the result of a search. That content can be added with its default symbology, or using smart mapping, the API can figure out how best to symbolize the data. Spatially Enabled DataFrame (SeDF) objects returned from a query for features in a feature layer can also be visualized as a table in Jupyter Notebook.

Workflows, data connections, outputs in the form of illustrative charts and maps, informational text about conclusions — these can all be stored and worked with in a notebook. A Jupyter Notebook can become a functional record of a workflow that can be shared with anyone. All the recipient must do is run the cells to reproduce that workflow. Jupyter Notebook encourages research that is reproducible, since not only the findings, but the code used to arrive at them, are stored.

The arcgis.widgets module offers components for managing maps and scenes to visualize GIS data and analysis in a rich, user-friendly, and interactive way that is specifically designed to work with 2D or 3D data content.

The GIS object includes a map widget (of the arcgis.widgets.MapView class) for displaying geographic locations, visualizing GIS content, and the results of your analysis. Based on ipywidgets.widgets.domwidget.DOMWidget, the MapView class creates a mapping widget for Jupyter Notebook and JupyterLab.

To use the map widget, call gis.map() and assign it to a variable that you can then query to bring up the widget in the notebook.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T17:38:06Z
----------------------------------------------------------------

Next, let's quickly explore some examples of creating a map widget in a notebook, adding layers to it, and saving it as a web map item.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T17:38:06Z
----------------------------------------------------------------

You can add an Item object to a map by passing its object id to the add_layer() method.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T17:38:07Z
----------------------------------------------------------------

You can add a number of different layer objects, such as FeatureLayer, FeatureCollection, ImageryLayer, or MapImageLayer, to the map. For example, you can add a FeatureLayer, as shown below:


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T17:38:08Z
----------------------------------------------------------------

Starting with the Python API version 1.3, you can save the map widget as a web map in your GIS. This process persists the basemaps, layers added with or without your custom symbology (including smart mapping), pop-ups, extent, and graphics drawn (with or without custom symbols) as layers in your web map.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T17:38:08Z
----------------------------------------------------------------

You can use this web map back in the notebook or in any ArcGIS app capable of rendering web maps. To learn how you can read this web map using the Python API, refer to the other parts of this notebook guide series.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T17:38:09Z
----------------------------------------------------------------

Any map widget instance is of the arcgis.widgets.MapView class, based on ipywidgets.widgets.domwidget.DOMWidget. The arcgis.widgets.MapView class resides inside the arcgis.widgets module.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T17:38:10Z
----------------------------------------------------------------

In Part 1 of this guide series, we have explored the basic concepts and uses of web maps, the correlation between mapping and widgets modules, and quickly walked through some starting examples of visualizing a map in the widget. In the following chapters of this guide series, we will discuss more advanced topics of mapping and map widgets.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T18:03:31Z
----------------------------------------------------------------

To use the map widget, call gis.map() and assign it to a variable that you can then query to bring up the widget in the notebook:


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T18:03:31Z
----------------------------------------------------------------

You can add a number of different layer objects, such as FeatureLayer, FeatureCollection, ImageryLayer, or MapImageLayer, to the map. For instance, you can use the following cell to add a FeatureLayer:


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

BP-Ent commented on 2022-01-15T18:03:33Z
----------------------------------------------------------------

Similar to FeatureLayers, you can also add ImageryLayers and imagery layer items. You can also specify either a built-in raster function or a custom one for rendering.


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

AtmaMani commented on 2022-01-20T18:33:43Z
----------------------------------------------------------------

Please lowercase the filename


@review-notebook-app

review-notebook-app Bot commented Jan 20, 2022

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

AtmaMani commented on 2022-01-20T18:33:44Z
----------------------------------------------------------------

This picture does not show up, appears broken. Can you check?


CMPeng commented on 2022-01-21T05:02:25Z
----------------------------------------------------------------

Hi @AtmaMani, this is a gif dynamically showing the map being dragged and panned, and looks OK on my local computer though. Let me upload it once again and see if works.

@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

AtmaMani commented on 2022-01-20T18:33:45Z
----------------------------------------------------------------

"Now let's increase the difficulty and sync the display of 4 maps:" -> Now let's sync the display of 4 maps:


@review-notebook-app

review-notebook-app Bot commented Jan 20, 2022

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

AtmaMani commented on 2022-01-20T18:33:46Z
----------------------------------------------------------------

Can we add a GIF animation? We could also replace the static screenshot with the GIF


CMPeng commented on 2022-01-21T05:03:52Z
----------------------------------------------------------------

Atma, per our previous discussion, the side_by_side2 display will be a gif, and the other two will stay static. Do you want me to also change this one to a gif?

@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

AtmaMani commented on 2022-01-20T18:33:47Z
----------------------------------------------------------------

Change title to "Part 1 - Introduction to using the map widget". Please rename the file accordingly. Once we author the revised guide for the mapping module, we will figure how to merge the two doc series

Let us remove the byline "Guide to Mapping and Visualization.." from this and all other notebooks in this series


@review-notebook-app

Copy link
Copy Markdown

View / edit / reply to this conversation on ReviewNB

AtmaMani commented on 2022-01-20T18:33:48Z
----------------------------------------------------------------

In this and all other notebooks, let us use "Clonclusion" in singular for the paragraph title.

"the correlation between mapping and widgets modules" -> Do we discuss that in this notebook? If not, we need to remove this phrase.

"walked through some starting examples of " -> starter examples...


Copy link
Copy Markdown
Contributor

Please implement Breck's suggestion here


View entire conversation on ReviewNB

Copy link
Copy Markdown
Contributor

Good job!


View entire conversation on ReviewNB

@@ -0,0 +1,357 @@
{

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the JupyterLab part is not ready yet, let us rename part 7 to part 6, so it flows with the rest of the parts. Please rename title and filename accordingly


Reply via ReviewNB

@AtmaMani AtmaMani left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@CMPeng thank you for this excellent series on the map widget. I made some suggestions via reviewnb app. Please take a look.
Also, thanks for addressing the issues in the networking guide.

@AtmaMani AtmaMani added changes requested remove this label after addressing reviewer comments and removed review in progress labels Jan 20, 2022
@AtmaMani

Copy link
Copy Markdown
Contributor

For now, let us keep these files in the original folder numbered 10. The new site theme would allow us to group these separately from the rest of the mapping guides. We can do that in a future release

CMPeng commented Jan 21, 2022

Copy link
Copy Markdown
Contributor Author

Hi @AtmaMani, this is a gif dynamically showing the map being dragged and panned, and looks OK on my local computer though. Let me upload it once again and see if works.


View entire conversation on ReviewNB

CMPeng commented Jan 21, 2022

Copy link
Copy Markdown
Contributor Author

Atma, per our previous discussion, the side_by_side2 display will be a gif, and the other two will stay static. Do you want me to also change this one to a gif?


View entire conversation on ReviewNB

@CMPeng

CMPeng commented Jan 21, 2022

Copy link
Copy Markdown
Contributor Author

@CMPeng thank you for this excellent series on the map widget. I made some suggestions via reviewnb app. Please take a look. Also, thanks for addressing the issues in the networking guide.

Thanks Atma!! I have addressed your comments and fixed the broken gif animations. Please check the latest commits!

@AtmaMani

AtmaMani commented Jan 21, 2022

Copy link
Copy Markdown
Contributor

@CMPeng one more (hopefully final) set of edits: Can you move the image, gif files (only the couple of files in this PR, not the ones already embedded) to https://github.com/Esri/arcgis-python-api/tree/master/static folder and update your links? Images need to be either base64 embedded or in the static folder for it to work reliably in old and new build systems.

@CMPeng

CMPeng commented Jan 22, 2022

Copy link
Copy Markdown
Contributor Author

@CMPeng one more (hopefully final) set of edits: Can you move the image, gif files (only the couple of files in this PR, not the ones already embedded) to https://github.com/Esri/arcgis-python-api/tree/master/static folder and update your links? Images need to be either base64 embedded or in the static folder for it to work reliably in old and new build systems.

Sure Atma! Please see the latest set of changed files. I have moved the gif and other images over to the static img folder, and corrected the reference accordingly. Thanks!

@AtmaMani AtmaMani merged commit 3305137 into master Jan 24, 2022
@achapkowski achapkowski deleted the chun7642/new_widgets_guide branch May 22, 2023 17:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

changes requested remove this label after addressing reviewer comments

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants