nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Getting started with ArcGIS JavaScript - Add CSV file

Egge-Jan_Pollé

<\/HEAD>

<\/A>CSVLayer<\/H2>
<\/P>
In this exercise, we will add point objects from a CSV file as a layer to our web map. For this, we use a small file with information about airports in the Netherlands (see below).<\/P>
<\/P>
This example also shows how a
CSVLayer<\/A><\/P>
is reprojected to another spatial reference system. The coordinates in the input file are in WGS84, while
our base map<\/A> (see this exercise<\/A>) is in the Dutch projection system (RD_New<\/STRONG>). But note: you do not need to do anything extra for this reprojection, because it is automatically handled internally by the projection engine<\/A> on the client side.<\/P>
<\/P>
The used CSV file (
NL_Vliegvelden.csv<\/A>) is located here<\/A> and the content is shown below:<\/P>
<\/P>

Airport<\/TD>	IATA<\/TD>	Latitude<\/TD>	Longitude<\/TD><\/TR>
Amsterdam Airport Schiphol<\/TD>	AMS<\/TD>	52.308333<\/TD>	4.760833<\/TD><\/TR>
Rotterdam The Hague Airport<\/TD>	RTM< \/TD >< TD style = "font-size : 11 pt ; color : black ; font-weight : 400 ; text-decoration : none ; border : 0.5 pt solid white ; background : #ddebf7 none repeat scroll 0% 0% ; text-align : right ; " >51.95 < \/ TD >< TD style = "font-size : 11 pt ; color : black ; font-weight : 400 ; text-decoration : none ; border-color : white currentcolor white white ; border-style : solid none solid solid ; border-width : 0.5 pt medium 0.5 pt 0.5 pt ; background : #ddebf7 none repeat scroll 0% 0% ; text-align : right ; " >4.433333 < \/ TD >< \/ TR >< TR >< TD style = "font-size : 11.0 pt ; color : black ; font-weight : 400 ; text-decoration : none ; border-top : .5 pt solid white ; border-right : .5 pt solid white ; border-bottom : .5 pt solid white ; border-left : none ; background : #BDD7EE ; " >Groningen Airport Eelde < \/ TD >< TD style = "font-size : 11.0 pt ; color : black ; font-weight : 400 ; text-decoration : none ; border : .5 pt solid white ; background : #BDD7EE ; " >GRQ < \/ TD >< TD style = "font-size : 11 pt ; color : black ; font-weight : 400 ; text-decoration : none ; border : 0.5 pt solid white ; background : #bdd7ee none repeat scroll 0% 0% ; text-align : right ; " >53.125 < \/ TD >< TD style = "font-size : 11 pt ; color : black ; font-weight : 400 ; text-decoration : none ; border-color : white currentcolor white white ; border-style : solid none solid solid ; border-width : 0.5 pt medium 0.5 pt 0.5 pt ; background : #bdd7ee none repeat scroll 0% 0% ; text-align : right ; " >6.583333 < \/ TD >< \/ TR >< TR >< TD style = "font-size : 11.0 pt ; color : black ; font-weight : 400 ; text-decoration : none ; border-top : .5 pt solid white ; border-right : .5 pt solid white ; border-bottom : .5 pt solid white ; border-left : none ; background : #DDEBF7 ; " >Eindhoven Airport < \/ TD >< TD style = "font-size : 11.0 pt ; color : black ; font-weight : 400 ; text-decoration : none ; border : .5 pt solid white ; background:#DDEBF7;">EIN	51.450278	5.374444
Maastricht Aachen Airport	MST	50.915833	5.776944

As a symbol for our airports, we use this image:
Airport icon

Note that to access both the CSV file and the PNG image, you must ensure these files are on the same domain as the website (or they must be on a server that supports CORS or a proxy must be set up...)

The source code is below.

Click here to see the application in action.

&lt!DOCTYPE html&gt
&lthtml&gt
&lthead&gt
 &ltmeta charset=&quotutf-8&quot&gt
 &ltmeta name=&quotviewport&quot content=&quotinitial-scale=1,  maximum-scale=<\/SPAN>1, user-scalable=<\/SPAN>no"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>title<\/SPAN>><\/SPAN><\/SPAN>Getting started with ArcGIS JavaScript - Adding CSV file<\/<\/SPAN>title<\/SPAN>><\/SPAN><\/SPAN>
<<\/SPAN>style<\/SPAN>><\/SPAN><\/SPAN>
html, body, #viewDiv<\/SPAN> {<\/SPAN>
padding<\/SPAN>:<\/SPAN> 0;<\/SPAN>
margin<\/SPAN>:<\/SPAN> 0;<\/SPAN>
height<\/SPAN>:<\/SPAN> 100%;<\/SPAN>
width<\/SPAN>:<\/SPAN> 100%;<\/SPAN>
}<\/SPAN>
<\/<\/span>style<\/span>><\/span><\/span><\/span>

<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>

<script>  
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/CSVLayer",
"esri/widgets/LayerList"
      ], function(Map, Point, MapView, CSVLayer, LayerList) {

var map = new Map({
        basemap: {
          portalItem: {
            id: "7aea6fa913a94176a1074edb40690318" // Topo RD
          }
        }
      });

var rdOrigin = new Point({
	    x: 155000,
	    y: 463000,
	    spatialReference: 28992
	  });

	  var view = new MapView({
	    spatialReference: 28992, 
	    container: "viewDiv",
	    map: map,
	    center: rdOrigin,
	    zoom: 3
	  });

      var symbol = {
        type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
        url: "airplane.png", // To avoid CORS issues with this symbol, do one of the following: 1) Make certain that the image is hosted on a CORS enabled server;
                             // 2) Use an image hosted on the same domain as the application; 3) Install a proxy.
        width: "54px",
        height: "54px"
      };

      var renderer = {
	    type: "simple",
		symbol: symbol
	  };

	  var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{Vliegveld}",
        content: "{*}"
      };

	  var csvLayer = new CSVLayer({
        url: "NL_Vliegvelden.csv", // If CSV files are not on the same domain as your website, a CORS enabled server or a proxy is required.
		title: "Airports in the Netherlands",
        longitudeField: "Oosterlengte",
		latitudeField: "Noorderbreedte",
		renderer: renderer,
		popupTemplate: popupTemplate
      });

	  map.<  function">add(csvLayer)

var layerList = new LayerList({
        view: view,
});

      view.ui.add([layerList], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍< < EM OJ I _31 > > </ SP A N > < SP A N > < < EM OJ I _32 > > </ SP A N > < SP A N > < < EM OJ I _33 > > </ SP A N > < SP A N > < < EM OJ I _34 > > </ SP A N > < SP A N > < < EM OJ I _35 > > </ SP A N > < SP A N > < < EM OJ I _36 > > </ SP A N > < SP A N > < < EM OJ I _37 > > </ SP A N > < SP A N > < < EM OJ I _38 > > </ SP A N > < SP A N > < < EM OJ I _39 > > </ SP A N > < SP A N > < < EM OJ I _40 > > </ SP A N > < SP A N > < < EM OJ I _41 > > </ SP A N > < SP A N > < < EM OJ I _42 > > </ SP A N > < SP A N > < < EM OJ I _43 > > </ SP A N > < SP A N > < < EM OJ I _44 > > </ SP A N > < SP A N > < < EM OJ I _45 > > </ SP A N > < SP A N > < < EM OJ I _46 > > </ SP A N > < SP A N >< << EMOJ I _47 >> </ SPAN >< SPAN >< << EMOJ I _48 >> </ SPAN >< SPAN >< << EMOJ I _49 >> </ SPAN >< SPAN >< << EMOJ I _50 >> </ SPAN >< SPAN >< << EMOJ I _51 >> </ SPAN >< SPAN >< << EMOJ I _52 >> </ SPAN >< SPAN >< << EMOJ I _53 >> </ SPAN >< SPAN >< << EMOJ I _54 >> </ SPAN >< SPAN >< << EMOJ I _55 >> </ SPAN >< SPAN >< << EMOJ I _56 >> </ SPAN >< SPAN >< << EMOJ I _57 >> </ SPAN >< SPAN >< << EMOJ I _58 >> </ SPAN >< SPAN >< << EMOJ I _59 >> </ SPAN >< SPAN >< << EMOJ I _60 >> </ SPAN >< SPAN >< << EMOJ I _61 >> </ SPAN >< SPAN >< << EMOJ I _62 >> </ SPAN >< SPAN >< << EMOJ I _63 >> </ SPAN >< SPAN >< << EMOJ I _64 >> </ SPAN >< SPAN >< << EMOJ I _65 >> </ SPAN >< SPAN >< << EMOJ I _66 >> </ SPAN >< SPAN >< << EMOJ I _67 >> </ SPAN >< SPAN >< << EMOJ I _68 >> </ SPAN >< SPAN >< << EMOJ I _69 >> </ SPAN >< SPAN >< << EMOJ I _70 >> </ SPAN >< SPAN >< << EMOJ I _71 >> </ SPAN >< SPAN >< << EMOJ I _72 >> </ SPAN >< SPAN >< << EMOJ I _73 >> </ SPAN >< SPAN >< << EMOJ I _74 >> </ SPAN >< SPAN >< << EMOJ I _75 >> </ SPAN >< SPAN >< << EMOJ I _76 >> </ SPAN >< SPAN /><‍...</span>

Find more posts tagged with

Comments

There are no comments yet

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.