marker hide behind layer added on basemap

1186
4
03-11-2021 03:33 AM
rsharma
Occasional Contributor III

hi i am trying to show markers above webmap combined with a layer of nz boundaries, my markers hide behind this layer, when i use this webmap.

i have used gray basemap with a layer added on it in arcgis online webmap.

then i called this webmap.

i don't know how to show these markers above this webmap.

Screenshot 2021-03-11 at 4.58.58 PM.png

Screenshot 2021-03-11 at 4.35.40 PM.png

 

This is my code below

 

 require(["esri/core/watchUtils","esri/views/MapView", "esri/WebMap","esri/Graphic","dojo/dom-construct","esri/widgets/Popup","esri/geometry/Point","esri/layers/FeatureLayer", "esri/identity/IdentityManager", "esri/layers/GraphicsLayer",  "esri/geometry/support/webMercatorUtils"], 
        
                function(watchUtils,MapView, WebMap,Graphic,domConstruct,Popup,Point,FeatureLayer, IdentityManager,  GraphicsLayer, webMercatorUtils) {   
                    webmap = WebMap.fromJSON(<?=$basemap_string1 ?>);

                /////Start view part
                var view = new MapView({
                  map: webmap,
                  container: "booking_map",
                  center: [<?=$map_data_by_country1['long']?>,<?=$map_data_by_country1['lat']?>], // longitude, latitude
                  zoom:<?=$map_data_by_country1['zoom']-1?>
                  
                }); 
                
                ///Set min/max zoom       
                view.constraints = {
                    minZoom: <?=$map_data_by_country1['zoom']?>,
                    maxZoom: <?=$map_data_by_country1['zoom']+3?>
                };
              
                   /***Create Instance of graphics layer***/
                var graphicsLayer = new GraphicsLayer();
               
               /***Add graphics layer to WebMap***/
                webmap.addMany([ graphicsLayer]);  

                  /************************************************************
              *When view is ready
              ************************************************************/
                view.when(function() {

                 var getmarkerb = <?php echo json_encode($bcoordinate); ?>;
                
                  addMarker(getmarkerb);
                });//End view.when
              /************************************************************
                Add marker on map MarkerGL coming from db 
              ************************************************************/
              var addMarker=function(getmarker){
              var index = 0;
              getmarker.forEach(function(marker){ 
             // settings.accommodation_name[index]=(settings.gettype[index]!="Accomodation")?"":settings.accommodation_name[index];
              var markerpt = new Point({
                          longitude: marker.x,
                          latitude: marker.y,
                          spatialReference: { wkid: 4326 }
                      });
              var changedSymbol=changedsymbol('Access Point');
              var markergra = new Graphic({
                          geometry:  webMercatorUtils.geographicToWebMercator(markerpt),
                          symbol: changedSymbol,
                          attributes: {
                                      newDevelopment: "new marker",
                                      state: "new"
                                    }
                });
              
                index++;
                graphicsLayer.add(markergra);
              });//End loop
            }//End addMarker
             /************************************************************
        Create symbol for marker 
      ************************************************************/
       var changedsymbol=function(markertype){
          var newurl=changedMarkerSymbol(markertype);
          const changedSymbol = {
            type: "picture-marker",
            url: newurl,
            width: "25px",
            height: "25px"
          };
          return changedSymbol;
        }
      /************************************************************
        send url of marker image to calling function
      ************************************************************/
        var changedMarkerSymbol=function(markertype){ 
          switch(markertype){
            case "Access Point":
            return "<?=HHQL_PLUGIN_URL?>public/images/accesspointnew1.png";
          }
        }//End changedMarkerSymbol
      });///end WebMap

 

0 Kudos
4 Replies
rsharma
Occasional Contributor III

Hi

Can anyone help, i m looking for the solution but couldn't find any

0 Kudos
nita14
by
Occasional Contributor III

Hi,

thy to add your graphics layer and ser its index to 0.

https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#addMany

 

webmap.addMany([ graphicsLayer], 0); 

Does it help?

BR,

Adam

0 Kudos
rsharma
Occasional Contributor III

No sorry @nita14 it doesn't work, the markers load first and then the layer load on it, and hide. the markers

0 Kudos
nita14
by
Occasional Contributor III

Hi,

Just try to do not use webmap. Construct the layers manually by url and add them to the map.

Just like in this example:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-feature...

BR,

Adam

 

0 Kudos