With below code, am just trying to add a point/Polyline on the map
Spatial Reference is 2881
for Example POINT (914723.27587074414 524669.72858949) and PolyLine(912367.09095057845 525239.943328321, 912374.28713041171 525217.16023740917)
I tried, symbology is not showing up
<!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.29/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.29/"></script>
<script>
var map, tb;
require([
"esri/map", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/graphic", "esri/geometry/Point", "esri/SpatialReference",
"esri/Color", "dojo/domReady!"
], function (
Map, Draw,
SimpleMarkerSymbol,
Graphic, Point, SpatialReference,
Color
) {
map = new Map("mapDiv", {
basemap: "streets",
zoom: 3
});
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));
var symbol;
symbol = markerSymbol;
var point = new Point([524669.72858949, 914723.2758707441], new SpatialReference({ wkid: 2881 }));
map.graphics.add(new Graphic(point, symbol));
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
It looks like you will need to project your geometries before adding them to the map. The preferred way to do this is via the client-side projection engine like shown below:
<!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>Sapes and Symbols</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/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.29/"></script>
<script>
require(["esri/map", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/geometry/Point", "esri/SpatialReference", "esri/Color", "esri/geometry/projection", "dojo/domReady!"], function (Map, Draw, SimpleMarkerSymbol, Graphic, Point, SpatialReference, Color, projectionEngine) {
projectionEngine.load().then(function() {
var map = new Map("mapDiv", {
basemap: "streets",
zoom: 3
});
map.on("load", function() {
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));
var point = new Point([524669.72858949, 914723.2758707441], new SpatialReference(2881));
var projectedPoint = projectionEngine.project(point, map.spatialReference);
map.graphics.add(new Graphic(projectedPoint, markerSymbol));
});
});
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
If working with browsers that don't support the client-side projection engine, an alternative is to use the server side GeometryService.project.