myThirdAppStart.html

by siennaemery

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Data Loading Example</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
  <script src="https://js.arcgis.com/4.7/"></script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="heading">
    <h1> Data Loading Example </h1>
  </div>
  <span id="layerToggle">
        <legend> Map Layers: </legend>
        <input type="checkbox" id="streetsLyr"> Skytrain
        <br>
        <input type="checkbox" id="skytrainbufferLyr"> Skytrain Buffer
        <br>
        <input type="checkbox" id="parksLyr"> Parks
        <br>
        <input type="checkbox" id="foodLyr"> Food Trucks

    </span>
</body>

CSS

#heading {
      position: absolute;
      text-align: center;
      z-index: 99;
      background-color: white;
      border-radius: 8px;
      margin: 0 auto;
      max-width: 700px;
      left: 500px;
      top: 30px;
      opacity: 0.75;
    }

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

    #layerToggle {
      top: 20px;
      right: 20px;
      position: absolute;
      z-index: 99;
      background-color: white;
      border-radius: 8px;
      padding: 10px;
      opacity: 0.75;
    }

JavaScript

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/KMLLayer",
    "dojo/dom",
    "dojo/on",
    "dojo/domReady!"
  ],
  function( // Change your server hostname to your public IP address in all four layer urls
    Map, MapView, KMLLayer, dom, on
  ) {

    var transportationLyr = new KMLLayer({
      url: "", // Skytrain Layer
      id: "skytrainlayer",
      visible: false
    });

    var skytrainbufferLyr = new KMLLayer({
      url: "", // Skytrain Buffer Layer
      id: "skytrainbufferlayer",
      visible: false
    });
    var parksLyr = new KMLLayer({
      url: "", // Parks Layer
      id: "parkslayer",
      visible: false
    });
    var foodLyr = new KMLLayer({
      url: "", // Food Truck Layer
      id: "foodlayer",
      visible: false
    });



    /*****************************************************************
     * Initialize the basemap
     *****************************************************************/
    var map = new Map({
      basemap: //Update the basemap
    });

    /*****************************************************************
     * Add the layers to the map
     *****************************************************************/
    map.add(); //Add the Layer Variable 
    map.add(); //Add the Layer Variable
    map.add(); //Add the Layer Variable
    map.add(); //Add the Layer Variable



    /*****************************************************************
     * Creates the view for the basemap, adjusts the center and the zoom 
     * level.
     *****************************************************************/
    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [], //Add the coordinates in
      zoom: //Adjust the zoom level
    });

    /*****************************************************************
     * Variables are created for the Toggles, these 
     * toggles are attached to the ids assigned to the checkboxes
    ...