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
Solved! Go to Solution.
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>
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>
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>
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
Please remember to click the "Mark Correct" on the answer that helped you.