Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to layers - 4.13</title>

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

    <style>
      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;
      }
    </style>

    <script>
    require(["esri/Map", "esri/views/MapView","esri/Graphic","esri/layers/TileLayer","esri/layers/FeatureLayer","esri/widgets/Search","esri/widgets/Print","esri/widgets/Locate","esri/widgets/Expand",
        "esri/widgets/BasemapGallery"], function(Map, MapView,Graphic,TileLayer,FeatureLayer,Search,Print,Locate,Expand, BasemapGallery)
       {
        /*****************************************************************
         * Create two TileLayer instances. One pointing to a
         * cached map service depicting U.S. male population and the other
         * pointing to a layer of roads and highways.
         *****************************************************************/
        var transportationLayer = new TileLayer({
          url:
            "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
          // This property can be used to uniquely identify the layer
          id: "streets",
          visible: false
        });

        var housingLayer = new TileLayer({
          url:
            "https://tiles.arcgis.com/tiles/kla6QEoN1wAmqwT1/arcgis/rest/services/344964p1r/MapServer",
          id: "ny-housing",
          opacity: 0.9
        });

        var housingLayer1 = new TileLayer({
          url:
            "https://tiles.arcgis.com/tiles/kla6QEoN1wAmqwT1/arcgis/rest/services/344836p1r_1/MapServer",
          id: "ny-housing",
          opacity: 0.9
        });


        /*****************************************************************
         * Layers may be added to the map in the map's constructor
         *****************************************************************/
        var map = new Map({
          basemap: "oceans",
          layers: [housingLayer,housingLayer1]
        });

        /*****************************************************************
         * Or they may be added to the map using map.add()
         *****************************************************************/
        map.add(transportationLayer);

        var view = new MapView({
          container: "viewDiv",
          map: map,
          extent: {
            // autocasts as new Extent()
            xmin: -179018.23379999958,
            ymin: 5782901.2578,
            xmax: 976907.7906999998,
            ymax: 6641143.556299999,
            spatialReference: 2600
          },
          zoom: 12,
          scale: 100000,
          center: [25.279652, 54.687157,] // longitude, latitude
        });
        /********************
         * Add feature layer
         ********************/

        // Carbon storage of trees in Warren Wilson College.
        var featureLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/fFwZ4t9mPyCe14FA/arcgis/rest/services/HBContent_DMGRFA_G1KM/FeatureServer",
             opacity: 0.5
        });

        map.add(featureLayer);

        view.when(function() {
          var print = new Print({
            view: view,
            // specify your own print service
            printServiceUrl:
              "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
          });

          // Add widget to the top right corner of the view
          view.ui.add(print, "top-right");
        });


          var featureLayerDistricts = new FeatureLayer({
          url:
            "https://services.arcgis.com/fFwZ4t9mPyCe14FA/arcgis/rest/services/HBContent_RTNGAS15/FeatureServer",
          popupTemplate: {
            // autocasts as new PopupTemplate()
            title: "Pavadinimas: {MOKYKLA} </br>Reitingas 2014 : {REITINGAS2014_LT}</br>Reitingas 2015 : {REITINGAS2015_LT}",
            overwriteActions: true
          }
        });

        var featureLayerSenators = new FeatureLayer({
          url:
            "https://services.arcgis.com/fFwZ4t9mPyCe14FA/arcgis/rest/services/HBContent_STMBGBRTES/FeatureServer",
          popupTemplate: {
            // autocasts as new PopupTemplate()
             title: "Savivaldybe: {SAV} </br>Adresas:{ADR}</br>Telefonas: {TEL} </br>Darbo laikas: {DL} </br>",
            overwriteActions: true
          }
        });

        var searchWidget = new Search({
          view: view,
          allPlaceholder: "Mokykla",
          sources: [
            {
              layer: featureLayerDistricts,
              searchFields: ["MOKYKLA"],
              displayField: "MOKYKLA",
              exactMatch: false,
              outFields: ["MOKYKLOS_ID", "MOKYKLA", "SAVIVALDYBE"],
              name: "Mokyklos pavadinimas",
              placeholder: "example: Klaipedos Vytauto didiojo gimnazija"
            },
            {
              layer: featureLayerSenators,
              searchFields: ["SAV","ADR"],
              suggestionTemplate: "{SAV},{ADR}",
              exactMatch: false,
              outFields: ["*"],
              placeholder: "pavyzdziui: Vilniaus",
              name: "Stambiagabariciu savivaldybe ar adresas",
            }
          ]
        });

        // Add the search widget to the top left corner of the view
        view.ui.add(searchWidget, {
          position: "bottom-right"
        });
        var locateBtn = new Locate({
          view: view
        });

        // Add the locate widget to the top left corner of the view
        view.ui.add(locateBtn, {
          position: "top-left"
        });
        var basemapGallery = new BasemapGallery({
          view: view,
          container: document.createElement("div")
        });

        // Create an Expand instance and set the content
        // property to the DOM node of the basemap gallery widget
        // Use an Esri icon font to represent the content inside
        // of the Expand widget

        var bgExpand = new Expand({
          view: view,
          content: basemapGallery
        });

        // close the expand whenever a basemap is selected
        basemapGallery.watch("activeBasemap", function() {
          var mobileSize =
            view.heightBreakpoint === "xsmall" ||
            view.widthBreakpoint === "xsmall";

          if (mobileSize) {
            bgExpand.collapse();
          }
        });

        // Add the expand instance to the ui

        view.ui.add(bgExpand, "top-right");

        /*****************************************************************
         * The map handles the layers' data while the view and layer views
         * take care of renderering the layers
         *****************************************************************/
        view.on("layerview-create", function(event) {
          if (event.layer.id === "ny-housing") {
            // Explore the properties of the population layer's layer view here
            console.log(
              "LayerView for male population created!",
              event.layerView
            );
          }
          if (event.layer.id === "streets") {
            // Explore the properties of the transportation layer's layer view here
            // Explore the properties of the transportation layer's layer view here
            console.log("LayerView for streets created!", event.layerView);
          }
        });

        /*****************************************************************
         * Layers are promises that resolve when loaded, or when all their
         * properties may be accessed. Once the population layer has loaded,
         * the view will animate to it's initial extent.
         *****************************************************************/
        view.when(function() {
          housingLayer.when(function() {
            view.goTo(housingLayer.fullExtent);
          });
        });

        var streetsLayerToggle = document.getElementById("streetsLayer");

        /*****************************************************************
         * The visible property on the layer can be used to toggle the
         * layer's visibility in the view. When the visibility is turned off
         * the layer is still part of the map, which means you can access
         * its properties and perform analysis even though it isn't visible.
         *******************************************************************/
        streetsLayerToggle.addEventListener("change", function() {
          transportationLayer.visible = streetsLayerToggle.checked;
        });
      /*************************
         * Create a point graphic
         *************************/

        // First create a point geometry (this is the location of the Titanic)
        var point = {
          type: "point", // autocasts as new Point()
          longitude: -70,
          latitude: 25
        };

        // Create a symbol for drawing the point
        var markerSymbol = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          color: [255, 0, 0],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [0, 0, 0],
            width: 3
          }
        };

        // Create a graphic and add the geometry and symbol to it
        var pointGraphic = new Graphic({
          geometry: point,
          symbol: markerSymbol
        });

        /****************************
         * Create a polyline graphic
         ****************************/

        // First create a line geometry (this is the Keystone pipeline)
        var polyline = {
          type: "polyline", // autocasts as new Polyline()
          paths: [[-111.3, 52.68], [-98, 49.5], [-93.94, 29.89]]
        };

        // Create a symbol for drawing the line
        var lineSymbol = {
          type: "simple-line", // autocasts as SimpleLineSymbol()
          color: [226, 119, 40],
          width: 4
        };

        // Create an object for storing attributes related to the line
        var lineAtt = {
          Name: "Keystone Pipeline",
          Owner: "TransCanada",
          Length: "3,456 km"
        };

        /*******************************************
         * Create a new graphic and add the geometry,
         * symbol, and attributes to it. You may also
         * add a simple PopupTemplate to the graphic.
         * This allows users to view the graphic's
         * attributes when it is clicked.
         ******************************************/
        var polylineGraphic = new Graphic({
          geometry: polyline,
          symbol: lineSymbol,
          attributes: lineAtt,
          popupTemplate: {
            // autocasts as new PopupTemplate()
            title: "{Name}",
            content: [
              {
                type: "fields",
                fieldInfos: [
                  {
                    fieldName: "Name"
                  },
                  {
                    fieldName: "Owner"
                  },
                  {
                    fieldName: "Length"
                  }
                ]
              }
            ]
          }
        });

        /***************************
         * Create a polygon graphic
         ***************************/

        // Create a polygon geometry
        var polygon = {
          type: "polygon", // autocasts as new Polygon()
          rings: [
            [140,36],
            [130,36],
            [130,30],
            [140,30],
          ]
        };

        // Create a symbol for rendering the graphic
        var fillSymbol = {
          type: "simple-fill", // autocasts as new SimpleFillSymbol()
          color: [255, 255, 255, 1],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [0, 0, 0],
            width: 1
          }
        };


        // Add the geometry and symbol to a new graphic
        var polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: fillSymbol
        });

        /*************************
         * Create a point graphic
         *************************/

        // First create a point geometry (this is the location of the Titanic)
        var point1 = {
          type: "point", // autocasts as new Point()
          longitude: 135,
          latitude: 33,
          width: 5
        };

        // Create a symbol for drawing the point
        var markerSymbol1 = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          color: [255, 0, 0],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [0, 0, 0],
            width: 1
          }
        };

        // Create a graphic and add the geometry and symbol to it
        var pointGraphic1 = new Graphic({
          geometry: point1,
          symbol: markerSymbol1
        });

        /****************************
         * Create a polyline graphic
         ****************************/

        // First create a line geometry (this is the Keystone pipeline)
        var polyline1 = {
          type: "polyline", // autocasts as new Polyline()
          paths: [[130, 36.5], [130, 24]]
        };

        // Create a symbol for drawing the line
        var lineSymbol1 = {
          type: "simple-line", // autocasts as SimpleLineSymbol()
          color: [0, 0, 0],
          width: 4
        };

        // Create an object for storing attributes related to the line
        var lineAtt1 = {
          Name: "Keystone Pipeline",
          Owner: "TransCanada",
          Length: "3,456 km"
        };

        /*******************************************
         * Create a new graphic and add the geometry,
         * symbol, and attributes to it. You may also
         * add a simple PopupTemplate to the graphic.
         * This allows users to view the graphic's
         * attributes when it is clicked.
         ******************************************/
        var polylineGraphic1 = new Graphic({
          geometry: polyline1,
          symbol: lineSymbol1,
          attributes: lineAtt1,
          popupTemplate: {
            // autocasts as new PopupTemplate()
            title: "{Name}",
            content: [
              {
                type: "fields",
                fieldInfos: [
                  {
                    fieldName: "Name"
                  },
                  {
                    fieldName: "Owner"
                  },
                  {
                    fieldName: "Length"
                  }
                ]
              }
            ]
          }
        });

        // Add the graphics to the view's graphics layer
        view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic,pointGraphic1,polylineGraphic1]);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <span id="layerToggle" class="esri-widget">
      <input type="checkbox" id="streetsLayer" /> Transportation
    </span>
  </body>
</html>