1

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.