One of the many benefits of our Geocortex Web technology is its ability to integrate with third-party applications.
There is no need to duplicate, move or reconfigure your data for a proper integration when it comes to using Geocortex technology; your data can simply flow seamlessly between maps, allowing for you to access your information faster and more efficiently.
Today’s Geocortex Tech Tip dives deep on this, showing you how to integrate Mapillary with Geocortex Web.
Video Transcript
“Hi, my name is Ian Schmitz and I am a Product Owner here at Geocortex. Today, we’re going to be looking at how you can integrate third-party maps in your Geocortex Web applications. Let’s get started!
Let’s take a look at the sample we’ll be working with today. This is a sample I built using the Geocortex Web SDK. It includes a third-party map provided by Mapillary, which is a crowd-sourced street view imagery provider.
As you can see here we have a 3D scene on the top. This is a scene of Rotterdam in the Netherlands and on the bottom, we have the Mapillary viewer.
If I hit play on the Mapillary viewer, you’ll see that both the Mapillary viewer and the 3D scene are synchronized, so as the car moves down the road, you can see the location marker position is updated as well and we pan and zoom to stay centered on the location marker.
Before we dive into this sample, let’s take a look at how you can get started with the Geocortex Web SDK.
Available on developers.geocortex.com is our newly launched Geocortex Developer Center. In here you can find some great developer resources for a number of our products. Today, we are going to be looking at Geocortex Web, and in here we have instructions on how to get started with our Geocortex Web SDK.
You can follow the step-by-step directions for how to get started and with a few simple commands, you can get a new web SDK project up and running.
Now, let’s take a look at the source code for our project.
Here I am in visual studio code, this is the source for the sample I just showed you. In this file here, we are looking at the layout configuration for our app.
As you can see, it’s a relatively simple layout, with a single map component, as well as our custom Mapillary viewer component.
Hopping over to the component source code itself, you’ll see that we are using react to render the UI, we are also including the ‘mapillary-js’ API, which the API we will use to create and interact with our viewer.
Down below, you will see that we are creating another instance of our viewer, and we are initializing it, to begin on a node that is at the base of the Rotterdam bridge as you saw previously.
Next, let’s take a look at the component model we created. Here, in the embedded map model, you’ll see that I’ve defined a function called ‘onperspectivechange’. This function is invoked anytime the Mapillary viewer changes its position or its bearing. When this function is invoked, we will ask the Mapillary viewer for its current position, which will return a latitude and longitude. We’ll also ask for its current bearing. So, degrees from North.
After we have the information, we can use a couple of the Geocortex Web viewer commands. These two here. The first one is the locationMarker updated command, which allows us to position a location marker in the 3D scene. So, we’ll provide it a center point for latitude and longitude for the Mapillary viewer as well as the current bearing, so the degrees from North.
We’ll also pan and zoom the 3D scene using the zoomtoviewpoint command and this will take a rotation of the camera, which we’ll calculate based on the bearing, as well as a center point and zoom scale.
Now, let’s say we want to change the zoom scale for this zoomtoviewpoint command. If we take a look at what to find, you’ll see it’s a 1:3000 scale zoom scale, so if we say we want to change it from this current scale which is 1:3000, which is a bit zoomed-out, we can instead to something a bit closer, maybe something like 750 and if I save and go back to my viewer, you’ll see this refresh – and now, we are much more zoomed in the 3D scene. So, if we hit play, we see that we are nice and close to the location marker now.
Once we are happy with our customer component, we can hop back over to our SDK project and run the production build script. This will create an optimized production build outputting a single JavaScript file, which can then be uploaded using the Geocortex Web Designer.
Hopping over to the Geocortex Web Designer, you’ll see that I have an application that I’ve already created with a 3D scene already configured, the same scene that we were using in our example.
If I go into the File menu, you’ll see that we’ve got an ‘Upload Library’ option. If I go in here, I can then, select the production build that I just created and then save my app. This will upload your custom library to your application.
Once I’ve refreshed the app here, you’ll see our custom component is now available in our layout toolbox. If I add that to the layout, we’ll see that we have something very similar to what we we’re looking at before and if I hit play, you’ll see that it is indeed synced as we saw before.
Once we’re happy with our application, we can go ahead and save our app and push it to production.
When pushing it to production, our custom library code will be copied to the production environment. I can go and launch my production app just to see (I’ll quickly sign in), and you’ll see indeed that we do have our custom component and our 3D scene working as expected.
To learn more about getting started with the Geocortex Web SDK, make sure to check out the Geocortex Developer Center, you’ll also find a number of web SDK samples, including the one we say today of the embedded map, and within each of the samples, you’ll see a link to view the source code on GitHub. This takes you to our open-source GitHub project, or you can view the source code to see how each one of these samples was implemented.”
Enjoyed watching how to integrate Mapillary with Geocortex Web and want to see even more of the technology in action? Click the button below to learn more, or to book a personal demo.
Contributors