Show markers from db

[rsharma]

hi i have saved markers in db, but now i want to get them and show them on my map view, I have used the following code. and call them in view.when. My markers do not show up plus i don't know what is the error, i have followed below link How to plot multiple points on a map?  to show markers from db plus my map stops it editing work.

Query : My markers do not show .

Query : can i display content of popup saved last time in db.How?

this is my code.

 view.when(function() {
          // Add the boundary polygon and new loted polygon graphics on view
          const property_vertices = <?php echo json_encode($map_ring_coordinate);?>;
          addGraphics(property_vertices);
          addMarker();

///some more code below

}

 
     function addMarker(){
        var getmarker=<?php  echo json_encode($smarkers);?>;
        getmarker.forEach(function(marker){
          console.log(marker);
        var p = new Point({
                    longitude: marker.x,
                    latitude: marker.y,
                    spatialReference: { wkid: 4326 }
                });
        });
        var g = new Graphic({
                    geometry:  webMercatorUtils.geographicToWebMercator(p),
                    symbol: textSymbol
                })
       markerGL.add(g);
      }

I get the following 2 objects in console.

Object { x: "172.49720789367655", y: "-43.48319644512304" }

Object { x: "172.50933147842412", y: "-43.48894119812065" }

[RobertScheitlin__GISP]

Rajni,

   Your x and y values are reversed.

[rsharma]

It didn't workout .

 longitude: marker.y,
 latitude: marker.x,

[RobertScheitlin__GISP · Accepted solution]

Rajni,

   OK, Beside having the x and y reversed you are not adding the markers inside the loop.

      function addMarker() {
        var getmarker = [{
          x: "172.49720789367655",
          y: "-43.48319644512304"
        }, {
          x: "172.50933147842412",
          y: "-43.48894119812065"
        }]
        getmarker.forEach(function (marker) {
          var p = new Point({
            longitude: marker.x,
            latitude: marker.y,
            spatialReference: {
              wkid: 4326
            }
          });
          var g = new Graphic({
            geometry: webMercatorUtils.geographicToWebMercator(p),
            symbol: textSymbol,
            attributes: {
              newDevelopment: "new marker",
              state: "new"
            }
          });
          markerGL.add(g);
        });
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[rsharma]

Sir it still didn't worked

[RobertScheitlin__GISP]

Rajni,

The code I posted is tested and working fine. You need to figure out where you implementation of this code is wrong. As a developer you really need to get use to using the browser web console and adding breakpoints in your code to figure out where you are having issues. If you get no errors in the console then set breakpoints in the failing function and check var values in debugger.

[rsharma]

Yes Sir,you are right, i have tried to debug it and console g graphicsit returns points data as objects, and after that it add to the markerGL, but it do not showup??

[RobertScheitlin__GISP]

Rajni,

   Try adding the code exactly as I have it and just call addMaker(); instide your view.when.

....
      setUpGraphicClickHandler();

      view.when(function () {
//This is how I add a property boundary at app start on my end
        // Add the boundary polygon and new lot polygon graphics
        const property_vertices = [
          [175.9258624, -37.55590445],
          [175.9258630667, -37.55587745],
          [175.9258671333, -37.5557153],
          [175.92626316670004, -37.5557216],
          [175.92625955, -37.5558657],
          [175.9262584333, -37.5559107333],
          [175.9258624, -37.55590445]
        ];
        addGraphics(property_vertices);
//This is where I call the addMarker function with hardcoded marker coordinates
        addMarker();

        // create DOM object
        //var recenterBtn = document.getElementById('recenterBtn');
        var recenterBtn = domConstruct.toDom(
          "<div class='map-button esri-component esri-locate esri-widget--button esri-widget' role='button' title='Recenter'>RECENTRE<span aria-hidden='true' role='presentation'></span></div>"
        );
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍