ArcGIS Map

ArcGIS Map with a point. (ESRI)

by Rishi Gautam

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<script src="https://js.arcgis.com/3.16/"></script>
<div id="mapDiv"></div>

CSS

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

JavaScript

var map;

require([
	'dojo/dom',
  'esri/map',
  'esri/graphic',
  'esri/layers/GraphicsLayer',
  'esri/geometry/Point',
  'esri/symbols/SimpleMarkerSymbol',
  'esri/Color',
  'esri/SpatialReference',
], function(Dom, Map, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol, Color, SpatialReference) {
  map = new Map("mapDiv", {
    basemap: "topo",
    center: [-123.088, 49.161],
    zoom: 12
  });
  
  var pointsLayer = new GraphicsLayer();
  pointsLayer.on('click', function(){
  	console.log('layer clicked ', map);
  });
  
  map.addLayer(pointsLayer);
  var sref = new SpatialReference(4326);
  var pt = new Point(-123.088,49.161, sref);
  var sms = new SimpleMarkerSymbol().setStyle(
    SimpleMarkerSymbol.STYLE_SQUARE).setColor(
    new Color([255,0,0,0.5]));
  
  var graphic = new Graphic(pt, sms);
  pointsLayer.add(graphic);
  pointsLayer.refresh();
  
  map.on('load', function(){
  	console.log('map loaded');
  });
});