Select to view content in your preferred language

marker hide behind layer added on basemap

1496
4
03-11-2021 03:33 AM
rsharma
Frequent Contributor

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
Frequent Contributor

Hi

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

0 Kudos
nita14
by
Frequent Contributor

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
Frequent Contributor

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
Frequent Contributor

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