Show markers from db

199
7
Jump to solution
03-30-2020 04:55 AM
rsharma
Occasional Contributor III

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" }

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
        });
      }

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Rajni,

   Your x and y values are reversed.

0 Kudos
rsharma
Occasional Contributor III

It didn't workout .

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor III

Sir it still didn't worked

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor III

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??

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>"
        );
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍