XP360 Integration with ArcGIS JS API

Combining AerialSpheres XP360 API into existing location based API’s is incredibly straight forward. In this explanation we will be breaking down how to take ESRIs JavaScript API and have it communicate with XP360.

For this demo we will utilizing several ESRI get-started links located on the right.

For the demo above, we are initializing two separate maps that allow us to render both a 2d (flat) map and a 3d (globe) scene. Let’s make sure to setup our index file with the proper script imports per ESRIs documentation.

Now lets cover starting up the ESRI maps.

Displayed are all of the required modules for this demo. These modules will allow us to:

Assign our personal ESRI API key
Start-up the map(s)
Apply graphics to the map
1. used for data points to show
Apply data to the map

Now that we have ESRI configured, lets start up our maps:

First we are will initialize a 2d map.
Please note that as of right now, we are using variables to set certain fields inside of:
1. The new map
2. The feature layer
3. These will filled in but variables when making the call to initialize this map, however you can fill in the values from the ESRI walkthrough while following this to see it updating as we go along.

The 3d Scene functions just the same, however while working on this demo itself, there was inconsistent behavior when setting the map center. So, we are telling the map to go to the center after first loading.

Again you can use the data from ESRIs demo to fill in until fully complete.

Now we have to figure out how to give the AerialSphere viewer our data when we click on a marker. Let’s do some house keeping before actually setting up the Viewer.

This will setup our popup. You can setup how it handles closing the pop-up to your own specific liking, we will be attaching a close function later on.

Now let’s setup a click function for handling either the public ESRI data, or our public AerialSphere data.

Phew, this one has a bit more going on:

We continue to use variables that will be provided later when calling the ESRI initialization.
1. You can continue to use the ESRI demo data here, for the layer title you can use whatever layer title you would like.
Since we are using multiple potential data sources, we need to handle those accordingly
1. Since the AerialSphere data is also setup for OIC data, we need to just parse the CamOri string for the lat/lon data.
2. For a breakdown of what the Camera Orientation string does and how the values are listed you can click here.
We also need to handle sending the information over to the viewer, we have a initAerialShere() function that is taking a lat / lon / icon / layerName
Don’t forget you should have separate click handlers for both your 2d and 3d maps. Otherwise later on they will mix in negative ways.

Now that the handle click function is built out, make sure you attach the correct one to the correct map.

It is now time to setup our AerialSphere viewer using the available documentation here.

Make sure to add the script imports into your index file and also create the viewer.js file.

We already know that on click we will be sending data over to the initAerialSphere() function and it will have 4 variables.

Let’s also add in the brains of that operation. Per the documentation, you need to initialize the AerialSphere class and pass along basic information to start. What we will do is check if that class is already initialized in a variable, if it is we will only send the updated information. Which will be the new lat/lng pair and the accompanying icon data, if that exists.

That is it for the viewer, now lets setup a trigger on the page load to call the ESRI initialization that will get everything rolling.

This file has a few things going on:

We setup the closePopup function mentioned earlier that will be attached after the entire window loads.
Inside the window.onload() callback we are:
1. loading 2 seperate instances of the ESRI map, one for flat 2d and one for 3d.
2. We are also calling the setOnClick() function to attach the close functionality to the popup. This can be done several ways, you might even just attach it straight to the button.

Since we are now passing a bunch of variables to the loadEsriMap() function we need to add that into our esri_map.js file. Once completed you should have multiple maps loading with data!

index.html

<html>
  <head>
    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
    <script src="https://app.aerialsphere.com/api/map/js?key=d84a1e7f-2cc2-4e2d-8d8d-f186fe4038f3"></script>
    <script src="./esri_map.js" defer></script>
  </head>
  <body>
    <div id="esri-map-combined"></div>
    <div id="esri-3d-map-combined"></div>
  </body>
</html>

esri_map.js

let view;
let map;
let featureLayer;
let graphicsLayer;

//Scene prefixed variables used for 3d map
let sceneView;
let sceneMap;
let sceneGraphicsLayer;
let sceneFeatureLayer;

require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/views/SceneView",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/layers/FeatureLayer"
        // Not loading Graphic in the function causes the maps to not load
        ], function (esriConfig, Map, MapView, SceneView, Graphic, GraphicsLayer, FeatureLayer) {
        esriConfig.apiKey = "YOUR ESRI API KEY HERE"
});

esri_map.js

map = new Map({
    basemap: "arcgis-topographic" // Basemap layer
});
view = new MapView({
    map: map,
    center: mapCenter,
    zoom: 13, // scale: 72223.819286
    container: mapId,
    constraints: {
        snapToZoom: false
    }
});

graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
featureLayer = new FeatureLayer({
    url: featureLayerUrl,
    outFields: outFields,
    title: layerTitle
});
map.add(featureLayer);

esri_map.js

index.html

esri_map.js

index.html

aerialsphere_viewer.js

index.html

on_load.js

esri_map.js