cwebber314 · September 27, 2024 21:44
diff --git a/esri-map-geojson.markdown b/esri-map-geojson.markdown
diff --git a/index.html b/index.html
 <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Hello World Map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.30/"></script>

  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
 </html>
diff --git a/script.js b/script.js
 require(["esri/Map", "esri/views/MapView", "esri/layers/GeoJSONLayer"], (
  Map,
  MapView,
  GeoJSONLayer
 ) => {
  const popupTemplate = {
    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"
          }
        ]
      },
      {
        type: "color",
        field: "mag",
        stops: [
          {
            value: 2.5,
            color: "orange"
          },
          {
            value: 8,
            color: "darkred"
          }
        ]
      }
    ]
  };

  const geoJSONLayer = new GeoJSONLayer({
    url:
      "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
    copyright: "USGS Earthquakes",
    renderer: renderer,
    popupTemplate: popupTemplate
  });

  // Define the map layers
  let map = new Map({
    basemap: "gray-vector",
    layers: [geoJSONLayer]
  });

  // Render and control the map layers in a View
  let view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 3,
    center: [-168, 60], // longitude, latitude
    highlightOptions: {
      color: "blue"
    }
  });
  
  // See the docs for when: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#when
  // view is the object, but it's not done loading yet
  // when() promise resolves when the MapView is ready
  // whenLayerView() promise resolves when the LayerView is ready
  // 
  // If we setup the events before everything is fully loaded things
  // won't work right.
  
  view
    // .when()
    // .then(() => {
    //   return geoJSONLayer.when();
    // })
    // .then((layer) => {
    //   return view.whenLayerView(layer);
    // })
    .whenLayerView(geoJSONLayer)
    .then((layerView) => {
      let highlight;
      view.on("pointer-down", (event) => {
        // only include graphics from hurricanesLayer in the hitTest
        const opts = {
          // if you omit include it includes all layers
          include: geoJSONLayer
        };
        view.hitTest(event, opts).then((response) => {
          // check if a feature is returned from the hurricanesLayer
          layerView.highlight().remove()
          if (response.results.length) {
            const graphic = response.results[0].graphic;
            const attributes = graphic.attributes;
            const mag = attributes.mag;
            // console.log(graphic.attributes)
            console.log("mag: " + mag);
            // do something with the graphic
            const query = geoJSONLayer.createQuery();
            query.where = "mag = " + mag;
            // query.where = "mag = 4.5"
            layerView.queryObjectIds(query).then((ids) => {
              console.log(ids);
              if (highlight) {
                highlight.remove();
              }
              highlight = layerView.highlight(ids);
              console.log("done highlight");
            });
          } else {
            console.log("no hits - remove highlight")
            highlight.remove()
          }
        });
      });
    });
  // setup event handler
 });
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
	<title>Hello World Map</title>
	<style>
	html,
	body,
	#viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	</style>

	<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
	<script src="https://js.arcgis.com/4.30/"></script>

	</head>

	<body>
	<div id="viewDiv"></div>
	</body>
	</html>
	require(["esri/Map", "esri/views/MapView", "esri/layers/GeoJSONLayer"], (
	Map,
	MapView,
	GeoJSONLayer
	) => {
	const popupTemplate = {
	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"
	}
	]
	},
	{
	type: "color",
	field: "mag",
	stops: [
	{
	value: 2.5,
	color: "orange"
	},
	{
	value: 8,
	color: "darkred"
	}
	]
	}
	]
	};

	const geoJSONLayer = new GeoJSONLayer({
	url:
	"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
	copyright: "USGS Earthquakes",
	renderer: renderer,
	popupTemplate: popupTemplate
	});

	// Define the map layers
	let map = new Map({
	basemap: "gray-vector",
	layers: [geoJSONLayer]
	});

	// Render and control the map layers in a View
	let view = new MapView({
	container: "viewDiv",
	map: map,
	zoom: 3,
	center: [-168, 60], // longitude, latitude
	highlightOptions: {
	color: "blue"
	}
	});

	// See the docs for when: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#when
	// view is the object, but it's not done loading yet
	// when() promise resolves when the MapView is ready
	// whenLayerView() promise resolves when the LayerView is ready
	//
	// If we setup the events before everything is fully loaded things
	// won't work right.

	view
	// .when()
	// .then(() => {
	// return geoJSONLayer.when();
	// })
	// .then((layer) => {
	// return view.whenLayerView(layer);
	// })
	.whenLayerView(geoJSONLayer)
	.then((layerView) => {
	let highlight;
	view.on("pointer-down", (event) => {
	// only include graphics from hurricanesLayer in the hitTest
	const opts = {
	// if you omit include it includes all layers
	include: geoJSONLayer
	};
	view.hitTest(event, opts).then((response) => {
	// check if a feature is returned from the hurricanesLayer
	layerView.highlight().remove()
	if (response.results.length) {
	const graphic = response.results[0].graphic;
	const attributes = graphic.attributes;
	const mag = attributes.mag;
	// console.log(graphic.attributes)
	console.log("mag: " + mag);
	// do something with the graphic
	const query = geoJSONLayer.createQuery();
	query.where = "mag = " + mag;
	// query.where = "mag = 4.5"
	layerView.queryObjectIds(query).then((ids) => {
	console.log(ids);
	if (highlight) {
	highlight.remove();
	}
	highlight = layerView.highlight(ids);
	console.log("done highlight");
	});
	} else {
	console.log("no hits - remove highlight")
	highlight.remove()
	}
	});
	});
	});
	// setup event handler
	});