Add ArcGIS Javascript app to bubble

Questions
1

Hello all,

I am looking for ways to embed ArcGIS Online data into a bubble app. My searches have turned up empty so far so I thought I’d just ask!

Is it possible to add something like this map
to my bubble app?

If so, is it also possible to modify the html dynamically? Can it be modified based on values entered into user input fields?

I appreciate any information you can provide.

Thanks

E

2

Hi! You solved this?

3

This can be done by creating your own plugin. It is pretty simple to get that example working, but customizing it may take some time.

  1. Create a new plugin (Bubble | Build Powerful Full-Stack Apps Without Code)
  2. Go to elements
  3. Click add a new element on the left
  4. Put this inside “Headers to be applied to pages”
<style>
html,
body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style> 
<link rel="stylesheet"href="https://js.arcgis.com/4.13/esri/themes/light/main.css" />
 <script src="https://js.arcgis.com/4.13/"></script>

(I got this from the link in the post Sandbox | Sample Code | ArcGIS Maps SDK for JavaScript 4.28 | ArcGIS Developers)
5. Put this inside the Function “Initialize”

var createContainer = document.createElement(‘div’);
createContainer.setAttribute(“id”, “viewDiv”);
instance.canvas[0].appendChild(createContainer);
require([
“esri/Map”,
“esri/layers/GeoJSONLayer”,
“esri/views/MapView”
], function(Map, GeoJSONLayer, MapView) {
// If GeoJSON files are not on the same domain as your website, a CORS enabled server
// or a proxy is required.
const url =
“https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson”;

    // Paste the url into a browser's address bar to download and view the attributes
    // in the GeoJSON file. These attributes include:
    // * mag - magnitude
    // * type - earthquake or other event such as nuclear test
    // * place - location of the event
    // * time - the time of the event
    // Use the Arcade Date() function to format time field into a human-readable format

    const template = {
      title: "Earthquake Info",
      content: "Magnitude {mag} {type} hit {place} on {time}",
      fieldInfos: [
        {
          fieldName: "time",
          format: {
            dateFormat: "short-date-short-time"
          }
        }
      ]
    };

    const renderer = {
      type: "simple",
      field: "mag",
      symbol: {
        type: "simple-marker",
        color: "orange",
        outline: {
          color: "white"
        }
      },
      visualVariables: [
        {
          type: "size",
          field: "mag",
          stops: [
            {
              value: 2.5,
              size: "4px"
            },
            {
              value: 8,
              size: "40px"
            }
          ]
        }
      ]
    };

    const geojsonLayer = new GeoJSONLayer({
      url: url,
      copyright: "USGS Earthquakes",
      popupTemplate: template,
      renderer: renderer //optional
    });

    const map = new Map({
      basemap: "gray",
      layers: [geojsonLayer]
    });

    const view = new MapView({
      container: "viewDiv",
      center: [-168, 46],
      zoom: 3,
      map: map
    });
  });

The only thing that is different from the example is the first 3 lines

var createContainer = document.createElement(‘div’);
createContainer.setAttribute(“id”, “viewDiv”);
instance.canvas[0].appendChild(createContainer);

This is creating the group for the plugin to sit in, then adding it to the bubble plugin group.

Hope this helps.

3 Likes