The County of San Diego recently upgraded to a full ArcGIS Enterprise environment and since then there has been an upswing of users accessing the Portal. Users are creating maps, applications and dashboards, and are now interested in re-organizing and moving some of the content previously stored on their internet ArcGIS Online site to the new intranet ArcGIS Portal site. Quartic staff, Andy Tangeman, along with County of San Diego GIS Analyst, Carmen Baily are tasked with this effort.
When planning the migration, administrators identified the tasks required, and identified out-of-the-box tools that could be used to make moving the content easier. Options for migrating content include Esri solutions such as ArcGIS Online Assistant, third-party solutions such as GeoJobe, and built-in ArcGIS solutions such as Portal-to-Portal collaboration groups.
The County is partially complete with their migration and is moving quickly to finalize all of their content. Migrating from the ArcGIS Online platform to the County’s new on-premisses Portal for ArcGIS is a multi-step process as it requires moving many types of items from the internet to the County’s intranet. However, the tools discussed in this article do make the process much easier to accomplish.
Instead, it employs docking as means of moving the popup away when it is blocking features from view that are important for the user to see. By default, the Popup widget contains an icon that, when clicked, docks the popup to a preset corner of the view. While docked, the popup is stuck to the corner even if the view extent changes.
The difference between a dragged popup and a docked popup, is that is that the dragged popup will be stuck to the same place on the map, so that it moves with the extent of the view. In some cases, clients may already be accustomed to this behavior and will be slow to adopt docking. We will be showing how to implement draggable popups in a GIS web application using Angular 6, angular2-draggable, and ArcGIS API for JavaScript 4.9.
We will assume you have a web application setup using Angular and esri-loader. In your HTML, you have a div element which holds the map with an ID assigned:
In your TypeScript, you have the MapView and Popup setup and some layer or method which causes the Popup to appear. In this example it will be an Identify Task using the publicly accessible Soil Survey Map layer tied to the view “click” event:
In your HTML, you will need to create a new angular2-draggable div container within the map container in order to hold the Popup widget:
We have added the ngDraggable directive to make the div draggable and set an ID value that the Popup widget will contain itself within. We have also set the ngDraggable “handle” property to a variable “popupHandle” which we will declare in our TypeScript. We also set the “position” property to a variable and set the ngDraggable “started” event to a function we will later declare.
Back in the TypeScript, we will modify the Popup widget in the MapView properties so that it plays with the ngDraggable directive:
This will set the popup container to the draggable div we created in the HTML. It also disables the docking behavior and collapse behavior. Collapse allows the user to hide the main body of the popup by clicking on the header. Since we want to use the header for dragging, we will want to disable collapse so that it isn’t triggered at the end of dragging.
Next, we set the handle that the user will use to drag the popup as well as the popup position variable. Create variables for these before the initializeMap function:
Because the Popup widget can open from different locations around a feature depending on where it is within the view, we will check it’s class list to determine which HTML element to assign the handle to. This can be done by using watchUtils to keep track of the Popup widget’s “visible” property. We can also use this property to reset the popup position every time the popup is opened:
When the popup opens, it’s “visible” property becomes true. It also has a class added which determines if the popup title is above or below the main body. We want to use the element that is above the main body as the drag handle every time, so this helps us decide if this is the element which contains the title or the action buttons. In the code above, we reset the position by setting the x and y properties to zero. Then, we check the classList to decide which element to set as the popup handle. We also change this element’s style by setting the cursor to the “move” cursor.
The popup can now be dragged around by its handle but the pointer, or triangle, that extends out from the popup to the feature location is still visible. We want to hide this when the popup has been dragged and show it when the popup is first opened. To hide the pointer, we will wire up the dragStart event and find it by class to set it’s display property to “none”:
Next, we will add a few lines to our popup visibility watch function. Instead of setting the display to none, we will reset it back to “block”:
And that’s it! You now have a draggable Popup widget.
AUTHOR: ALBERT HERRERA, GIS PROGRAMMER
Several Quartic staff attended the Esri Developer Summit in Palm Springs this week. There are lots of good refinements in the ArcGIS platform that will support GIS developers. Attached is a video Quartic's CEO on the big screen!
