Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

XP360 is an easy to implement JavaScript API. Below is an embedded demo that shows how to harness the power of our JavaScript API from an embedded Google Map.

Iframe
srchttps://jsfiddle.net/AerialSphere/1o37hwsd/56/embedded/result,js,html,css/dark/
width100%
frameborderhide
height500px

What does the code setup look like?

Let’s take a look and break down some of the code up above in the JSFiddle

Setting up the map:

  1. Most likely you already have a Google map setup and utilizing data. But if not, let’s build a basic map to see how we can setup this interaction.

  2. We are centered on Arizona State University in Tempe in our example, but you can be wherever your data is!

Adding markers to the Google Map:

  1. Let’s go ahead and add markers to the map. We have a list of marker data, but the data can come from anywhere: a CSV file, REST API, hard coded, whatever your need!

Setting up the AerialSphere Viewer:

  1. Now let’s setup the AerialSphere viewer. This can occur whenever you want to trigger it. Some examples:

    1. When the window first loads

    2. When you first make a call to the viewer you can check to see if it has been activated yet, and then activate it if not

  2. Since we are near Tempe, Arizona, and know its lat/lng position, let’s load our AerialSphere Viewer there too.

Harnessing the Viewer:

  1. In this final step, we tell the viewer to do three things:

    1. load the nearest experience

    2. look at the marker position that was clicked

    3. load an marker icon from the XP360 marker library at that position

index.html

Code Block
<head>
  <script src="https://maps.googleapis.com/maps/api/js?key="YOUR KEY GOES HERE"&callback=initGoogleMap&v=weekly" defer></script>
</head>

JavaScript

Code Block
const initGoogleMap = () => {
  map = new google.maps.Map(document.getElementById('google-map'), {
    center: {
      lat: 33.424103089479054,
      lng: -111.92816298097769
    },
    zoom: 16,
  });
  
}

JavaScript

Code Block
// Adding google markers based on a list of data
// You need at a minimum a { lat: number, lng: number } object so you can set its position.
markerInformation.forEach((marker) => {
    const latLng = { lat: marker.lat, lng: marker.lng }
    google_marker = new google.maps.Marker({
    position: latLng,
    map,
    title: marker.name,
  });
})
// The above should be added into the initGoogleMap function below the map initiation.

JavaScript

Code Block
const initAerialSphere = () => {
  sphereData = {
    sphereLat: 33.424103089479054,
    sphereLng: -111.92816298097769,
    lookAtLat: 33.424103089479054,
    lookAtLng: -111.92816298097769
  }
  // this will setup the viewer and load it into ASU.
  viewer = new AerialSphere(
    'aerialSphereDivId',
    'aerialSphereIframeClassname',
    sphereData
  )
}

JavaScript

Code Block
languagejs
// above is the code that created the google marker
google_marker.addListener("click", () => {
    addViewerMarker(marker)
});


const addViewerMarker = (marker) => {
  // Because we are both loading and looking at the markers,
  // we are using sendData to accomplish both.
  viewer.sendData({
    lookAtLat: marker.lat,
    lookAtLng: marker.lng,
    sphereLat: marker.lat,
    sphereLng: marker.lng,
    layers: [{
      name: 'markers',
      visible: true,
      markers: [{
        name: marker.name,
        description: marker.description,
        lat: marker.lat,
        lng: marker.lng,
        icon: marker.icon
      }]
    }]
  })
}