How to resize the symbol when the map extent gets changed or any event is triggered

Geographic Information Systems Asked on December 30, 2020

I need to resize the PictureMarkerSymbol when the map extent gets changed.
I am able to catch the event with watch() but somehow resizing does not apply to the map.
I’ve tried below codes but it does not work.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
   #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
   #BasemapToggle {
      position: absolute;
     top: 140px;
      left: 20px;
      z-index: 50;
    }
  .esriPopup .sizer {
        width: 400px !important;
      }

  .esriPopup .contentPane {
        text-align: left;
        //padding: 0 !important;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script src="/static/buildingImages.js"></script>
<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/widgets/Compass",
  "esri/widgets/Home",
  "esri/widgets/BasemapToggle",
  "esri/geometry/Point",
  "esri/Graphic",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleMarkerSymbol",  
  "esri/symbols/SimpleFillSymbol",
  "esri/geometry/Circle",
  "esri/Color",
  "esri/PopupTemplate",
  "esri/symbols/PictureMarkerSymbol",
  "esri/core/watchUtils",
  "esri/geometry/ScreenPoint",
  "dojo/domReady!"
], function(Map, MapView, Compass,Home,BasemapToggle,Point,Graphic,SimpleLineSymbol,SimpleMarkerSymbol,SimpleFillSymbol,Circle,Color,PopupTemplate,PictureMarkerSymbol,watchUtils,ScreenPoint){

  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",  // Reference to the scene div created in step 5
    map: map,  // Reference to the map object created before the scene
    zoom: 20,  // Sets the zoom level based on level of detail (LOD)
    center:[-80.811050,35.583328] // for test, set downtown as home point
  });

    view.then(function() {
        view.watch("extent", resizeBuildingImg);

        for (var idx1 in buildings) {
            /**********************
             * Create a point graphic
             **********************/
            var buildingPoint = new Point({
                longitude: buildings[idx1].location.long,
                latitude: buildings[idx1].location.lat
            });

        var buildingPictureSymbol = new PictureMarkerSymbol(buildings[idx1].imageUrl, buildings[idx1].width, buildings[idx1].height);
        var buildingGraphic = new Graphic({
            geometry: buildingPoint,
            symbol: buildingPictureSymbol
        });
        buildings[idx1].graphic = buildingGraphic;
        view.graphics.add(buildingGraphic);

        }

        function resizeBuildingImg(){
            console.log("hello updateOverviewExtent");
            var buildingPictureSymbol4 = new PictureMarkerSymbol("/static/building1.png", 100, 100);
            buildings[0].graphic.symbol = buildingPictureSymbol4; //works
        }

    });  //view.then

});

</script>
</head>
<body>
  <div id="viewDiv"></div>

</body>
</html>
</html>

If I call resizeBuildingImg() function directly from view.then(…. ), not from watch function, it works as expected. So I think I miss something. But not sure what I don’t get on this api.

arcgis javascript api 4

Add your own answers!

Ask a Question

Get help from others!