locating point on the map through arcgis api for javascript

746
4
Jump to solution
11-28-2017 12:03 AM
BuddhikaSenarath_Dasanayaka
New Contributor

I used this code for locating point on the map but it dosn't work, please make me correct,

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Shapes and Symbols</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

<style>
#info {
top: 20px;
color: #444;
height: auto;
font-family: arial;
right: 20px;
margin: 5px;
padding: 10px;
position: absolute;
width: 115px;
z-index: 40;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
button {
display: block;
}
</style>

<script src="https://js.arcgis.com/3.22/"></script>
<script>
var map, tb;

require([
"esri/map",
"esri/InfoTemplate",
"esri/geometry/Point",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/graphicsUtils",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map,InfoTemplate,
Point,
Draw,
SimpleMarkerSymbol, SimpleLineSymbol,
PictureFillSymbol, CartographicLineSymbol,
Graphic, GraphicsLayer,graphicsUtils,
Color, dom, on
) {
map = new Map("mapDiv", {
basemap: "gray",
center: [81.02, 7.95],
zoom: 3
});

var pt = new Point(81,7);
var sms = new SimpleMarkerSymbol().setStyle(
SimpleMarkerSymbol.STYLE_SQUARE).setColor(
new Color([255,0,0,2]));

var attr = {"Xcoord":81,"Ycoord":7,"Plant":"Mesa Mint"};
var info = new InfoTemplate("Vernal Pool Locations");
var graphic = new Graphic(pt,sms,attr,info);


map.graphics.add(graphic);

});
</script>
</head>

<body>
<div id="mapDiv"></div>
</body>
</html>

BUDDHIKA S. DASANAYKA

MAP TECHNOLOGICAL OFFICER

SURVEY DEPARTMENT OF SRI LANKA

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

You have to wait until the map is loaded before you can add the graphics.

This code works

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Shapes and Symbols</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

  <style>
    #info {
      top: 20px;
      color: #444;
      height: auto;
      font-family: arial;
      right: 20px;
      margin: 5px;
      padding: 10px;
      position: absolute;
      width: 115px;
      z-index: 40;
      border: solid 2px #666;
      border-radius: 4px;
      background-color: #fff;
    }

    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    button {
      display: block;
    }
  </style>

  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map, tb;

    require([
    "esri/map",
    "esri/InfoTemplate",
    "esri/geometry/Point",
    "esri/toolbars/draw",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/PictureFillSymbol",
    "esri/symbols/CartographicLineSymbol",
    "esri/graphic",
    "esri/layers/GraphicsLayer",
    "esri/graphicsUtils",
    "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
    ], function (
    Map, InfoTemplate,
    Point,
    Draw,
    SimpleMarkerSymbol, SimpleLineSymbol,
    PictureFillSymbol, CartographicLineSymbol,
    Graphic, GraphicsLayer, graphicsUtils,
    Color, dom, on
    ) {
      map = new Map("mapDiv", {
        basemap: "gray",
        center: [81.02, 7.95],
        zoom: 3
      });

      map.on('load', function () {
        var pt = new Point(81, 7);
        var sms = new SimpleMarkerSymbol().setStyle(
        SimpleMarkerSymbol.STYLE_SQUARE).setColor(
        new Color([255, 0, 0, 2]));

        var attr = { "Xcoord": 81, "Ycoord": 7, "Plant": "Mesa Mint" };
        var info = new InfoTemplate("Vernal Pool Locations");
        var graphic = new Graphic(pt, sms, attr, info);


        map.graphics.add(graphic);
      });
    });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

4 Replies
KenBuja
MVP Honored Contributor

You have to wait until the map is loaded before you can add the graphics.

This code works

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Shapes and Symbols</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

  <style>
    #info {
      top: 20px;
      color: #444;
      height: auto;
      font-family: arial;
      right: 20px;
      margin: 5px;
      padding: 10px;
      position: absolute;
      width: 115px;
      z-index: 40;
      border: solid 2px #666;
      border-radius: 4px;
      background-color: #fff;
    }

    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    button {
      display: block;
    }
  </style>

  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map, tb;

    require([
    "esri/map",
    "esri/InfoTemplate",
    "esri/geometry/Point",
    "esri/toolbars/draw",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/PictureFillSymbol",
    "esri/symbols/CartographicLineSymbol",
    "esri/graphic",
    "esri/layers/GraphicsLayer",
    "esri/graphicsUtils",
    "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
    ], function (
    Map, InfoTemplate,
    Point,
    Draw,
    SimpleMarkerSymbol, SimpleLineSymbol,
    PictureFillSymbol, CartographicLineSymbol,
    Graphic, GraphicsLayer, graphicsUtils,
    Color, dom, on
    ) {
      map = new Map("mapDiv", {
        basemap: "gray",
        center: [81.02, 7.95],
        zoom: 3
      });

      map.on('load', function () {
        var pt = new Point(81, 7);
        var sms = new SimpleMarkerSymbol().setStyle(
        SimpleMarkerSymbol.STYLE_SQUARE).setColor(
        new Color([255, 0, 0, 2]));

        var attr = { "Xcoord": 81, "Ycoord": 7, "Plant": "Mesa Mint" };
        var info = new InfoTemplate("Vernal Pool Locations");
        var graphic = new Graphic(pt, sms, attr, info);


        map.graphics.add(graphic);
      });
    });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

BuddhikaSenarath_Dasanayaka
New Contributor

dear sir,

I got the point and it works.

Thank you very much for your help.

if it is possible please visit this www.survey.gov.lk/nsdi/lis/index_cad.php

Buddhika S. Dasanayaka

On Tue, Nov 28, 2017 at 7:37 PM, Robert Scheitlin, GISP <geonet@esri.com>

0 Kudos
RodrigoFelga
New Contributor III

Change this:

map.graphics.add(graphic);

to this:

map.on("load", function(){
     map.graphics.add(graphic);
});

The map should be loaded before you add the graphics

0 Kudos
KenBuja
MVP Honored Contributor

Please remember to click the "Mark Correct" on the answer that helped you.

0 Kudos