Create a point/Polyline on Map with different projection

300
1
05-24-2023 05:18 PM
MRReddy
Occasional Contributor

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>

0 Kudos
1 Reply
JoelBennett
MVP Regular Contributor

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.

0 Kudos