html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#viewDiv {
  height: 100%;
  width: 100%;
}

import config from "https://js.arcgis.com/next/@arcgis/core/config.js";
import ArcGISMap from "https://js.arcgis.com/next/@arcgis/core/Map.js";
import MapView from "https://js.arcgis.com/next/@arcgis/core/views/MapView.js";
import GeoJSONLayer from "https://js.arcgis.com/next/@arcgis/core/layers/GeoJSONLayer.js";

config.request.interceptors.push({
  urls: 'https://earthquake.usgs.gov',
  after(response) {
    const geojson = response.data;
    geojson.features = geojson.features.splice(1, 500);
    response.data = geojson;
    return response;
  }
});

const layer = new GeoJSONLayer({
  url: `https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson`,
  id: "buildingPoints",
  title: "Indoor Maps Locations",
  displayField: "siteName",
  renderer: {
    type: "simple",
    symbol: {
      type: "simple-marker",
      style: "square",
      color: "blue",
      size: "8px"
    }
  },
  geometryType: "point"
});

const map = new ArcGISMap({
  basemap: "gray-vector",
  layers: [layer]
});

const view = new MapView({
  container: "viewDiv",
  map,
  center: [-118, 34],
  zoom: 4
});