Knack Operations
  • TABLE OF CONTENTS
  • Knack Operations Read-Only
  • Knack
    • Platform Overview
    • Functionality Guide
    • Style Guide
    • Banner Logos
    • Rounding Knack Costs Correctly
    • URL Parameters to populate a form
    • Importing Records
    • Copy an Application
  • Knack Security
    • Single Sign On (SSO)
      • Configuring a new Knack App with certificates
      • Enabling SSO in Knack
      • Configuring new certificates for all Knack Apps - When certs expire!
        • SSL Certificate Creation
  • Knack Integrations
    • Open Data Portal - Socrata Integration
    • ArcGIS Online Integration
    • CSR configuration prep in Knack
      • Creating CSR Page components
  • Knack Code
    • Code Version Control
    • GitHub Code Workflow
    • CODE: Login Buttons/App Setup
    • App Specific Custom Code
      • CODE: Vision Zero in Action
    • CODE: Knack Functionality
      • Big Buttons
      • Save Knack Record ID
      • Redirect Blank Menu Pages
      • Disable Trigger Buttons
      • Disable Modal Background Click/Touch
      • Disable Breadcrumb Navigation Links
      • Remove Back Links
      • Back Link Buttons
      • Return to Previous Page Button
      • Auto Input Validation Form Fields
      • Conditionally Hide/Show Form Fields
      • Return to Top Button
      • Refresh View Button
      • Detect IE
      • Set Map iFrame Source URL
    • CODE: Knack Look & Feel
      • Multipage Step Indicator
      • Modal Close Styling
      • Relabel Attachment Links
      • Navigation Dropdown Menu Buttons
      • In-Form Dropdown Menu Buttons
      • Trigger Buttons
      • Hyperlink a Form Field Label
      • Remove Table Header
      • Modify Table Summary Rows
      • Convert Values to UPPERCASE (Option A)
      • Convert Values to UPPERCASE (Option B)
      • Highlight Details View Label Body & Table Value
      • Report Headers
      • Report Filters Container Size
      • Report Element Colors
      • HighCharts Report Styling
      • Font Awesome Icons
    • CODE: Mobile Optimization
      • Detail Labels
    • CODE: Retrieve builder URL of Email Rules
    • CODE: Knack Print Page
      • Print Header with Page Break/Number
      • Print without overlapping views
      • Print using Menu Button
      • Print using Trigger Button
      • Show Character Limit of Input
      • Add fixed Footer on Print
  • AMD | DATA TRACKER
    • AMD | Data Tracker
    • Asset Changes
    • CSR | Flex Note Archiving
    • Cameras
    • Fix Broken CCTV Device Status Page Links
    • Performance Measures
    • Builder Notes
      • Configure New AMD Asset in Data Tracker
      • Data Tracker | Annual Signal and PHB Request Ranking
      • Page Rules (TMC) CSR
      • NOTIFICATION | Construction Status Email
      • NOTIFICATION | One Day Signal Engineer Due Date
      • DETAILS | Preventative Maintenance (PM)
      • DETAILS | Signal Detectors Object Tables, Reports, misc..
      • DETAILS | Signals
      • Signals Work Order | EDIT FORMS
      • Signals Work Order | FORM LOCATIONS
      • Editing Signals Work Order | NEW FORMS
    • Warehouse Inventory - Updating Journal Vouchers (JV) information
    • Cancel Transactions & Replenishments
    • Adjustment Transaction, Unit Cost Adjustments & Re-Stock
    • DTS | Adminstrative Action
  • DTS | Data & Technology Services Portal
    • DTS | Data & Technology Services Portal
    • Dataset inventory
    • Application Inventory
  • Finance & Purchasing
    • Finance & Purchasing Portal
    • Finance & Purchasing
      • Training, Quiz, Account Access Process
      • Purchase Request Statuses
      • List of emails generated
      • Re/Un-assigning Approver of a PR
      • Change PR Statuses (backend)
      • Invoice: FAQs
    • Warehouse Inventory
      • Adding a new inventory item
  • HR | Human Resources
    • HR | Human Resources Portal
    • Integrations TPW HR Portal
      • Integration HR Portal -> TPW Hire?
    • How to add a new HR Form
  • TPW Hire
    • TPW HiRe | Hiring Resource
  • PEP | Parking Enterprise Portal
    • PEP | Parking Enterprise Portal
    • Dispatch Resource Tracking Log Archiving
    • Update Parking Citation Report by Fiscal Year (FY)
  • ROW | Right of Way Portal
    • ROW | Right of Way Portal
    • COS JV Update
  • RPP | Residential Parking Permit Portal
    • RPP | Residential Parking Permits
    • Residential Parking Permits
    • RPP Migration
  • SBO | Street & Bridge Operations
    • SBO | Street & Bridge Operations
  • SMD | Signs & Markings Operations
    • SMD | Signs & Markings Operations
    • Table of Contents
    • Workflow
    • Markings | Work Orders
      • Process & Module Functionality
    • Markings | Service Requests
      • Process & Module Functionality
    • Signs | Work Orders
      • Process & Module Functionality
    • Signs | Service Requests
      • Process & Functionality
    • Contractor | Work Orders
      • Process & Module Functionality
    • Sign Fabrication Work Orders
      • Process and Functionality
    • Special Functions/Codes
      • Work Order Attachments
  • SMO | Smart Mobility Operations
    • SMO | Smart Mobility Portal
  • SMS | Shared Mobility Services
    • SMS | Shared Mobility Portal
    • License & Permit Management
    • Sources for Monthly Trip Records
  • STREET BANNER PROGRAM
    • Street Banner Program
    • Street Banner Program
  • TDS | Transportation Development Services
    • TDS | Transportation Development Services Portal
    • Color Palette
    • Role Permissions Guide
    • App Logic
      • Calculating Date Values for Reporting
      • Incrementing Review Cycle Automatically
      • Calculating Review Time & On Time Percentage
      • Calculating Cycle Completion Percentage
      • Calculating an Expiration Date
      • Automatic Due Date with Manual Adjustment
      • Roll up Child Object Conditionals
      • Converting an Entered Percentage to a Percentage Value
      • Create a Connection Link Field to View a Searched Record
      • Extracting Location Coordinates to add a Map Marker Map
    • TDR | Development Reviews
    • TIA | Traffic Impact Analysis
    • TDA | Transportation Development Assessments
  • Traffic Register
    • Traffic Register
    • Table of Contents
    • Workflow
    • Modules
    • Special Functions/Code
    • Permissions
  • TPW Forms
    • TPW Forms
  • Urban Forestry
  • VZA | Vision Zero in Action
    • VZA | Vision Zero in Action
    • Batch Copy Process for VZA Assignments
    • Calculate School Closures
    • Login Process for Officers
    • Officer Records
    • Update reports in Power BI
    • Use Tasks for Creating Child Records
    • Use Tasks for Notifications
  • O365 Resources
    • Resources
Powered by GitBook
On this page

Was this helpful?

  1. TDS | Transportation Development Services
  2. App Logic

Extracting Location Coordinates to add a Map Marker Map

How to extract and format coordinates from a location and generate a URL to display a custom map within a Knack view iframe

PreviousCreate a Connection Link Field to View a Searched RecordNextTDR | Development Reviews

Last updated 2 years ago

Was this helpful?

Required Fields

  • Address - Project Location (with Geocoding option enabled)

  • Text Formula - Project Location Display (set to Project Location address field)

  • Short Text - Project Location Extract (set to Project Location text formula field if not identical)

  • Text Formula - Map Marker Label Display (what fields to display for map marker label)

  • Text Formula - XY Extract (combined X & Y coordinates trimmed from the Location Extract)

  • Text Formula - X Extract (X coordinate trimmed from combined XY Extract)

  • Text Formula - Y Extract (Y coordinate trimmed from combined XY Extract)

  • Text Formula - Pure X Extract (trims the X Extract to provide a clean coordinate for the Map URL Generator formula)

  • Text Formula - Pure Y Extract (trims the Y Extract to provide a clean coordinate for the Map URL Generator formula)

  • Text Formula - Map Marker Modal Display (what text & fields to show on map marker popup)

  • Text Formula - Map URL Generator (the arcgis web map location with specific attributes)

  • Link - Map URL (set to the generated Map URL)

Preparing the Location Coordinates (Longitude & Latitude)

XY Extract

We are taking the 23 characters at the end of the Address field that encompass both the X & Y coordinates and setting that data to the field

trim(right({Project Location Extract},23))

X Extract

Here we follow a similar principle as before and take the 12 characters at the end of the XY Extract field to separate out the X coordinate into its own field

trim(right({XY Extract},12))

Y Extract

This time we take the 14 characters at the beginning of the XY Extract field to separate out the Y coordinate into its own field

trim(left({XY Extract},14))

Pure X Extract

For this field we clean up the X coordinate into a usable value for the arcgis web map limiting it down from 12 characters to only 9

trim(right({X Extract},9))

Pure Y Extract

We do the same clean up for the Y coordinate into a usable value for the arcgis web map limiting it down from 14 characters to only 8

trim(right({Y Extract},8))

Generating the Map URL to create a Map Marker on an ArcGIS Web Map
https://austin.maps.arcgis.com/apps/webappviewer/index.html?id=d7894fc5bfad4fd1a58d45a7d24ba5b2&mobileBreakPoint=100&level=13&marker={Pure X Extract};{Pure Y Extract};;{Map Marker Modal Display};;{Map Marker Label Display}
  1. Portal URL: austin.maps.arcgis.com

  2. id= : the unique ID of the app

  3. mobileBreakPoint= : we set this to 100 pixels so the default mobile layout does not apply until screen size is smaller than 100 pixels in either height or width. This ensures our map does not have a scrollbar when we set our maps from 300 to 600 pixels in width and display correctly on desktop.

  4. marker=<x>;<y>;<wkid>;<encoded title>;<encoded icon url>;<encoded label> : we set <x> to our Pure X Extract field, <y> to our Pure Y Extract field, leave the <wkid> identifier blank since we are using the Global Coordinate System (GCS), we set the <encoded title> to our Map Marker Title Display field, we leave the <encoded icon url> blank as the default blue circle icon, and lastly set the <encoded label> to our Map Maker Label Display field

Other Parameters to Note

  1. webmap= : the unique ID of the web map (we use id so we dont use this)

  2. center= : this would allow us to center on a standard set of coordinates (since we have different coordinates for each map marker we do not use this but is an available option)

  3. find= : this would allow us to automatically zoom to the closest match with a callout marker added to the map. We do not use this since we use marker & level parameters but this is another option available that is a bit simpler and more flexible allowing for use of single line addresses, partial addresses, place names, & parcel features in addition to coordinates

Preparing Knack Scene & View for Map (HTML iframe)

First we need a page setup with a Rich Text view, this is where our iframe HTML code will live. We do a pretty basic setup for our iframe but this HTML within the view can be customized for each specific map.

<iframe src="" id="mitigationMapiFrame" style=" border:0px #ffffff none;" name="mitigationMapiFrame" scrolling="no" marginheight="0px" marginwidth="0px" allowfullscreen="" frameborder="0" width="100%" height="500px">
</iframe>
  1. src= : we leave blank since we are using a defined map id from our JavaScript code and do not need to set the source explicitly

  2. id= : we set this id to the name we are giving the map as represented in our JavaScript handler

  3. style= : here we set border thickness and color around the map

  4. name= : the name we are giving to this map, we set this identical to the id

  5. scrolling= : we set this to no to improve map usability for smaller maps

  6. marginheight= & marginwidth= : we set these both to 0px since we dont need the extra frame space outside the map

  7. allowfullscreen= : we leave this blank since we are setting a defined size for the map

  8. frameborder= : similar to margin, we have no need for border in this example but is an available option

  9. width= : this we set to 100% to span the entire width of the page to take advantage of the desktop widescreen

  10. height= : this we set to specifically to 500px the prevent the map from being to big

Other good ratios for map displays within a page are 100x100px thumbnail maps, 300x400px small scale maps, 500x500px standard maps, or 600x900px large widescreen maps.

Rendering the Map URL in the iframe with JavaScript

This JS code can be copied and updated for your particular map. You will need a code block for each Knack view we are displaying the map in. In the handler, we need to update the scene and view IDs. We also give the map a name that we indicate in the iframe code.

/*Feature Map Page*/
$(document).on("knack-scene-render.scene_294", function (event, page) {
  // update iframe src with Mitigation Map URL in the Detail View
    var iframe_url = $($("span:contains('apps/webappviewer')")[0]).text()
  $("#mitigationMapiFrame").attr("src", iframe_url);
  // hide the Mitigation Map URL field & view
  $("#view_967").hide();
});

Additional Link

After completing the above setup, one more thing can help users. We can provide a Link below the rendered map so that users can navigate to the map in a new tab to view in ArcGIS Online. You would update the link with the appropriate map url.

<a target="_blank" href="https://arcg.is/1ODubj0">Open Map in ArcGIS Online</a>

The ArcGIS Web AppBuilder allows us to modify the app with the URL paremeters we include in the URL. To include more than one parameter, use an ampersand (&) to separate the parameters.

level= : we set this to one of the defined level IDs of the map service where 13 represents the default city level we want

https://doc.arcgis.com/en/web-appbuilder/latest/manage-apps/app-url-parameters.htm
https://developers.arcgis.com/documentation/mapping-apis-and-services/reference/zoom-levels-and-scale/
An example of the above required fields in the TDS Portal for the TIA Mitigations Map on the TIA Request object