Community
Select to view content in your preferred language

How to change the center point to move smoothly

650
1
04-20-2022 04:49 AM
Lazy
by
New Contributor
‎04-20-2022 04:49 AM 
view.on("click", (e) => {
                                let { latitude, longitude } = e.mapPoint;
                                let point = {
                                    type: "point",
                                    longitude,
                                    latitude,
                                };
                                let pointGraphic = new Graphic({
                                    geometry: point,
                                    symbol: this.pointSymbol,
                                });
                                pointLayer.removeAll();
                                pointLayer.add(pointGraphic);
                                view.center = [longitude, latitude];
                            });
0 Kudos
1 Reply
JeffreyWilkerson
by
Frequent Contributor
‎06-03-2022 03:36 PM

I think you want to mess with the MapView goTo GoToOptions2D options, as in this example:

<meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Popup actions | Sample | ArcGIS API for JavaScript 4.22</title>

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

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

    <script>
      require([
        "esri/Map",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/views/MapView",
        "esri/Graphic"
      ], (Map, FeatureLayer, GraphicsLayer, MapView, Graphic) => {
        // Create the Map
        const map = new Map({
          basemap: "gray-vector"
        });

        // Create the MapView
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-117.08, 34.1],
          zoom: 11
        });

        const template = {
          // autocasts as new PopupTemplate()
          title: "Trail run",
          content: "{name}"
        };

        const featureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
          popupTemplate: template
        });

        map.add(featureLayer);

        let gLayer = new GraphicsLayer({});
        map.add(gLayer);

        view.when(() => {
          view.on("click", (e) => {
            let { latitude, longitude } = e.mapPoint;
            let point = {
              type: "point",
              longitude,
              latitude
            };
            let pointGraphic = new Graphic({
              geometry: point,
              symbol: this.pointSymbol
            });
            gLayer.removeAll();
            gLayer.add(pointGraphic);
            
            let goToOpts = {
              animate: true,
              duration: 2000, 
              easing: "ease" //linear, ease, ease-in, ease-out, or ease-in-out
            }
            view.goTo({
              center: [longitude, latitude]
            }, goToOpts);
            
            //view.center = [longitude, latitude];
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
0 Kudos