Integrating Pictometry, Bing and other 3rd party maps within your Geocortex applications - Geocortex

Integrating Pictometry, Bing and other 3rd party maps within your Geocortex applications

Jonathan Bystedt
Jonathan Bystedt
Software Developer
December 21, 2018

Integrating Pictometry, Bing and other 3rd party maps within your Geocortex applications

One of the many benefits of our Geocortex Essentials technology is its ability to integrate with virtually any key 3rd party business system or data source.

There is no need to duplicate, move or reconfigure your data for a proper integration when it comes to using Geocortex applications; your data can simply flow seamlessly between systems, allowing for you to access your information faster and more efficiently.

With that in mind, we thought that this week’s Geocortex Tech Tip would be a great opportunity to focus on this in more depth by showing you how to use Geocortex Essentials to integrate with third party map providers like Bing Maps and Pictometry.

Watch on YouTube.

Video Transcript

“Hello and welcome to Geocortex Tech tips. My name is Jonathan and today we are going to be talking about how to integrate third party maps with your applications such as Pictometry, Bing and other providers.

Let’s get started!

First of all, I got a viewer set up here, so let’s take a look at the feature and see how it works! If I go to the ‘Linked Maps’ button here, I can bring up a view at the bottom of the screen and – make that a little bit bigger – and our default provider here is Bing Maps. You can see I’ve got an icon on the map here that I can move around to change the point on the map that I’m looking at, and drag it over to that heliport there, and then down here on Bing Maps we can see a heliport on top of that building right there – it’s probably the same one.

If we look at that we can see that’s the Los Angeles Times building and the Los Angeles Times Heliport. Nice! So how is this configured? Let’s take a look first at our desktop json.js. We can see the integration module, and then in the configuration for the integration module we have some external components, ‘bingMaps’ and ‘pictometry’ and we have defined ‘bingMaps’ as the default component. And bingMaps tells it to load a page from ‘Resources/3rdPartyMaps/BingsMaps.html’, and it tells it to use this icon for the little dragable indicator that you see on the map.

If we go and we look in the viewer installation directory (that’s what this is pointing to so it will be HTML5 viewer/Resources/3rdPartyMaps in your IIS folder) and then we’ll take a look at a copy of that file, and first thing you need to know – you don’t need to know any of this code necessarily – but you do need to find the spot on the page where it says ‘bingAPIKey’ and you need to put your API key that you got from the Bing Maps API developer website, and put it in there to make it work properly because otherwise you will get a nice message from Microsoft on top of your map.

So that out of the box is the only step required to make this all work properly and then you can configure it here like so and view it in the viewer like so.

Let’s look at another provider that we have called Pictometry. We’re going to move over to this version of the site here because I don’t have an API key that works on mine, so open the linked maps, and you can see that’s not the one that we want (whoops!)

All right, there’s Pictometry – and let’s pop this out to get a little bit of a better view. That came up in a new tab by default, but let’s just put it side-by-side on the screen with our map like so.

We can see our marker here (we’re a little bit in an industrial wasteland). Let’s take a look at something a little bit more interesting. See if we can go over to Dodger Stadium. There we go!

So, we have some very nice high-res Pictometry imagery of Dodger Stadium. Doesn’t look like a game is on today. We can look at some different imagery to see what’s happening. No game there. Oh there look a game is on, oh but not there. The field is closed for maintenance.

Anyway, I won’t go into depth on how to use the Pictometry tool – it’s basically the same as any other third party maps integration. If we take a look at the configuration page, it’s very similar. Now we need an API key and a secret key and you’ll get those from your Pictometry vendor, and they go in those spots and that’s all that’s required to make this work.

Now I’d like to cover how you would hook this system up to any third party map provider. Say you wanted to make your own, and you didn’t want to use these default ones.

Let’s take a look at the Bing Maps implementation. We’ve got a little JavaScript code here and we defined some functions; ‘getMapViewpointParams,’ which is where we send the current position of the Bing map to the viewer and ‘handleViewerPositionUpdatedEvent,’ which is where we get a message from the viewer that the viewer is scale or extent has changed and we want to update the big map to reflect that. And then we have ‘handleViewpointIndicatorUpdatedEvent,’ and this is where we get a message if that indicator has been dragged on the screen and we also need to update our third party map control to reflect the new position of that indicator.

Then we make a new third party map, we call it ‘bingMaps’ and we pass it in a function to initialize the map and then our three handler functions that were defined above there. The initialize map function is just down here and that’s where the API key is provided.

So, what goes in initialize map is whatever that third party API needs to bring up a map on a webpage. And what goes in here is, you have to return a center with an ‘X’ and ‘Y’ a scale and a heading, and just return an object with those values that you get from the API of the third party map’s control. Then when you handle the viewpoint indicator updated you just get a point with ‘X’ and ‘Y’ coordinates because you’re just sitting in your ‘X’ and ‘Y’ on the map.

The viewer position updated event is a little bit more complicated because we could also be zooming in and out of different scales and changing the extent. So that takes an object with a bunch of properties like extent, positions, scale, heading, pitch – we can use some of these extra properties to handle things like a street view type map as well as your traditional 2D mapping applications.

Without getting into too much of the details of coding, that’s basically the interface for creating your own, and that’s all you really need for something as simple as Bing Maps to something more complicated like Pictometry or a street view application.

Thanks for listening. This has been Geocortex Tech tips and I hope you have fun using this feature on your own viewer’s insights.

Thanks!”

To learn more about how you can extend the reach and capabilities of your mapping applications, download our integrations eBook below!

Download the eBook


Categories:
Archive
Open: 2019
2019
August 16, 2019

Displaying SQL Server Data in Geocortex Workflow [Geocortex Tech Tip]

August 14, 2019

Customer Spotlight: Geocortex Essentials

August 8, 2019

City of Austin: Spreading floodplain awareness with Geocortex

August 1, 2019

Geocortex Essentials 4.12: Improved integration with ArcGIS® Online

July 25, 2019

Introduction to Geocortex Printing: Learn to build stunning print templates

July 17, 2019

Updates to the Geocortex Product Life Cycle

July 8, 2019

Extending Web AppBuilder for ArcGIS® with Geocortex Essentials [Webinar]

July 4, 2019

City of Bellingham: Using Geocortex to take the stress out of water shut-off

June 27, 2019

Geocortex at the 2019 Esri User Conference

June 14, 2019

Customer Spotlight: Geocortex Workflow

May 17, 2019

Important Notice - Outage Issues & New Support Cases

May 17, 2019

How to build a summary report with aggregations of feature data [Geocortex Tech Tip]

May 16, 2019

Technology Q&A: Geocortex Mobile

May 10, 2019

How to create print templates for Web AppBuilder for ArcGIS®[Geocortex Tech Tip]

May 8, 2019

Dive into Geocortex Printing [Webinar]

May 3, 2019

Using Geocortex Workflow and Geocortex Reporting to produce a multi-layer report [Geocortex Tech Tip]

May 1, 2019

Market-Leading GIS Software and Services Companies Join to Form VertiGIS

May 1, 2019

Introducing VertiGIS

April 18, 2019

Integrating Workflows into Geocortex Mobile [Geocortex Tech Tip]

April 17, 2019

Customer Spotlight: Geocortex Reporting

April 12, 2019

Using Geocortex Go to preview app configurations [Geocortex Tech Tip]

April 10, 2019

How to Address Complex Form Navigation Using Geocortex Workflow

April 5, 2019

Building native, offline IOS, Android and Windows apps with Geocortex Mobile Viewer [Geocortex Tech Tip]

April 3, 2019

Streamlining mobile operations with Geocortex Mobile Viewer [Webinar]

March 29, 2019

A better way to run geoprocessing tasks in Web AppBuilder for ArcGIS [Geocortex Tech Tip]

March 28, 2019

Extend the reach and capabilities of your applications with integrations [eBook]

March 22, 2019

Displaying data from SQL Database when you select features [Geocortex Tech Tip]

March 20, 2019

How Geocortex users are enriching the communities they serve

March 15, 2019

How to Configure a Geocortex Essentials layer report with Geocortex Reporting 5 [Geocortex Tech Tip]

March 14, 2019

Region of Waterloo: How GIS & Geocortex technology helped meet local Source Protection Plan requirements

March 6, 2019

Integrating Business Intelligence and Data Sources with Geocortex Essentials [Webinar]

March 1, 2019

How to quickly add attachments to new features when editing [Geocortex Tech Tip]

February 22, 2019

Generating a report with sub reports from external data sources [Geocortex Tech Tip]

February 20, 2019

Geocortex Essentials 4.11: Saving Time & Increasing Efficiency

February 15, 2019

Accessing Samples and Building your First Workflow [Geocortex Tech Tip]

February 12, 2019

Open Beta of Geocortex Printing 5 Has Begun

February 8, 2019

Different Ways of Creating Selections of Features in Geocortex Viewer for HTML 5 [Geocortex Tech Tip]

February 6, 2019

4 Best Practices to Follow When Using Geocortex Workflow 5

February 1, 2019

Creating a Report that Displays a Screenshot of the Map [Geocortex Tech Tip]

January 28, 2019

Diving Into Geocortex Reporting 5 [Geocortex Tech Tip]

January 24, 2019

How Geocortex is Advancing Water Management Solutions

January 16, 2019

Creating Custom User Experiences with Geocortex Workflow 5 [Webinar]

January 11, 2019

Showing the search results using the item picker in Geocortex Workflow 5 [Geocortex Tech Tip]

January 9, 2019

City of Troy: Using GIS and asset management technologies to manage legislative requirements

January 4, 2019

Using scripting to put attachments in reports in Geocortex Reporting 5 [Geocortex Tech Tip]

Open: 2018
2018
December 21, 2018

Integrating Pictometry, Bing and other 3rd party maps within your Geocortex applications

December 19, 2018

Recapping the Texas Geocortex Regional User Group

December 14, 2018

How to use Geocortex Workflow 5 to populate the Attribute Table in Web AppBuilder for ArcGIS [Geocortex Tech Tip]

December 12, 2018

Finding yourself: Using geolocation in mobile and web applications [Webinar]

December 7, 2018

Enabling real-time user-to-user map collaboration within Geocortex Essentials

December 5, 2018

Reflecting on 2018

November 30, 2018

Creating mailing labels with reports with Geocortex Reporting 5 [Geocortex Tech Tip]

November 29, 2018

Alberta Energy Regulator: Supporting safe and responsible energy resource operations

November 26, 2018

Important update for ArcGIS and Transport Layer Security (TLS) Protocol Support!

November 23, 2018

Using fine-grained security to control access to layers, features, attributes and application functionality [Geocortex Tech Tip]

November 21, 2018

Enhancing Web AppBuilder for ArcGIS® with Geocortex Reporting [Webinar]

November 16, 2018

Using Geocortex Workflow 5 to automatically display a form for editing layer attributes [Geocortex Tech Tip]

November 15, 2018

Geocortex Achieves Esri’s “Release Ready Specialty” Designation

November 14, 2018

Celebrating GIS Day with York Regional Police: How GIS Data Has Mitigated Risk & Increased Efficiency in Crime Prevention

November 9, 2018

How to access a SQL database from a workflow using Geocortex Workflow 5 [Geocortex Tech Tip]

November 2, 2018

How to send an email from a workflow using Geocortex Workflow 5 [Geocortex Tech Tip]

October 26, 2018

How to add and configure charts inside reports with Geocortex Reporting 5 [Geocortex Tech Tip]

October 24, 2018

Geocortex Water Webinar Series

October 19, 2018

Integrating Geocortex Essentials with ArcGIS Online and ArcGIS Enterprise portal [Geocortex Tech Tip]

October 17, 2018

Cross-Platform Development with Xamarin [Webinar]

October 12, 2018

City of Fort Collins: Dynamic flood maps for public awareness, and flood insurance rate saving

October 2, 2018

Technology Q&A: Geocortex Workflow 5 “Behind the Firewall”

June 27, 2018

Geocortex Essentials 4.10 is here!

June 12, 2018

Geocortex and the GDPR

June 6, 2018

Geocortex at the 2018 Esri User Conference

May 15, 2018

Technology Q&A: The evolution of Geocortex and Web AppBuilder for ArcGIS

April 25, 2018

How to manage data collected from Geocortex Workflow 5 forms [Geocortex Tech Tip]

April 18, 2018

Delivering accessible mapping applications for everyone [Geocortex Tech Tip]

April 11, 2018

How to search for data in a non-spatial database [Geocortex Tech Tip]

April 5, 2018

Configuring Geocortex Analytics to monitor a new Portal for ArcGIS instance [Geocortex Tech Tip]

March 27, 2018

Getting started with forms in Geocortex Workflow 5 [Geocortex Tech Tip]

March 21, 2018

Using Geocortex Workflow with Web AppBuilder for ArcGIS [Geocortex Tech Tip]

March 15, 2018

Understanding tool usage in your GIS applications [Geocortex Tech Tip]

March 7, 2018

Running Geocortex Essentials workflows from an identify operation [Geocortex Tech Tip]

March 2, 2018

GIS Health Assessment: A new way to think about your system

February 28, 2018

Using the in-app help system in Geocortex Workflow 5 [Geocortex Tech Tip]

February 21, 2018

How to configure a personalized dashboard in Geocortex Analytics [Geocortex Tech Tip]

January 25, 2018

GIS is shifting to SaaS, and it’s a win for everyone


Categories

Popular Tags
Accessibility Active Operating Picture ArcGIS ArcGIS Online Customer Story Data Models Energy Esri esri user conference Geocortex Geocortex 5-Series Geocortex Analytics Geocortex Essentials geocortex integrations geocortex mobile Geocortex Mobile Viewer geocortex printing Geocortex Printing 5 Geocortex Reporting Geocortex Reporting 5 geocortex tech tip Geocortex Tech Tips Geocortex Viewer for HTML5 Geocortex Web Viewer Geocortex Workflow Geocortex Workflow 5 GIS GIS Day GIS Health gis integrations Integrations mobile gis Oil & Gas Pipelines Portal for ArcGIS press release SaaS Tech Tip Tech Tips Transportation vertigis Water Industry Web AppBuilder Web GIS Xamarin

Contributors