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; } } }

Map &amp;amp; Points From CSV

glennlawrence

I am completly new to ArcGIS Developer and I am trying to use the Map Points from CSV sample from here - https://developers.arcgis.com/javascript/jssamples/layers_csv.html

However when I try to copy the code or even download it directly from the Sandbox and then open the map locally, the points do not show. The Map loads up but none of the points actually show. They do show fine in the Sandbox sample.

I have tried creating my own html page with the sample code and pointed it to my own csv, however this still does not work. My sample page is located here - http://test25.net/map/my-csv-map.html

Here is the entire code I am trying to use:

[HTML]<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map, csv;

      require([
        "esri/map",
        "esri/layers/CSVLayer",
        "esri/Color",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/InfoTemplate",
        "esri/urlUtils",
        "dojo/domReady!"
      ], function(
        Map, CSVLayer, Color, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, urlUtils
      ) {
        urlUtils.addProxyRule({
          proxyUrl: "/proxy",
          urlPrefix: "test25.net"
        });
        map = new Map("map", {
          basemap: "streets",
          center: [-6.244581, 53.348344],
          zoom: 14
        });
        csv = new CSVLayer("http://test25.net/map/my-csv-map.csv", {
          copyright: "USGS.gov"
        });
        var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
        var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
        var renderer = new SimpleRenderer(marker);
        csv.setRenderer(renderer);
        var template = new InfoTemplate("${type}", "${place}");
        csv.setInfoTemplate(template);
        map.addLayer(csv);
      });
    </script>
</head>

<body>
    <div id="map"></div>
</body>
</html>
[/HTML]

If I load this code into the Sandbox it works fine, but not in my own html page.

Can anyone please advise?

Thanks in advance...

Glenn

Find more posts tagged with

Accepted answers

BjornSvensson

Can you maybe advise how I can set this up using my own test solution bjorn?

Change your http://test25.net/map/my-csv-map.html by:
1. removing or commenting out the four lines about proxy rule

//        urlUtils.addProxyRule({ //          proxyUrl: "/proxy", //          urlPrefix: "test25.net" //        });

2. Make sure your browser is NOT caching your old html file.

3. Optionally, change the CSV layer URL to a relative path:

        csv = new CSVLayer("my-csv-map.csv", {

As long your csv is in the same folder as the html file that will work. And maybe it makes it easier to understand the code.

All comments

glennlawrence

Getting rid of the Proxy and setting the csv path to "my-csv-map.csv", with the csv & html in the same dir worked great.

Many thanks for this bjorn...

Here is my full code for anyone else that may be having an issue with this.

[HTML]
<!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>CSV Map1</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map, csv;

      require([
        "esri/map",
        "esri/layers/CSVLayer",
        "esri/Color",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/InfoTemplate",
        "esri/urlUtils",
        "dojo/domReady!"
      ], function(
        Map, CSVLayer, Color, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, urlUtils
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-6.244581, 53.348344],
          zoom: 14
        });
    csv = new CSVLayer("my-csv-map.csv", {
          copyright: ""
        });
        var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
        var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
        var renderer = new SimpleRenderer(marker);
        csv.setRenderer(renderer);
        var template = new InfoTemplate("${MarkerName1}", "${Address}");
        csv.setInfoTemplate(template);
        map.addLayer(csv);
      });
    </script>
</head>

<body>
    <div id="map"></div>
</body>
</html>
[/HTML]

BjornSvensson

Can you maybe advise how I can set this up using my own test solution bjorn?

Change your http://test25.net/map/my-csv-map.html by:
1. removing or commenting out the four lines about proxy rule

//        urlUtils.addProxyRule({ //          proxyUrl: "/proxy", //          urlPrefix: "test25.net" //        });

2. Make sure your browser is NOT caching your old html file.

3. Optionally, change the CSV layer URL to a relative path:

        csv = new CSVLayer("my-csv-map.csv", {

As long your csv is in the same folder as the html file that will work. And maybe it makes it easier to understand the code.

glennlawrence

bjorn
    Not correct. In the sample, the CSV is on a different domain than the proxy and application.
    Application: http://developers.arcgis.com/javascr...csv/index.html
    Proxy: http://developers.arcgis.com/proxy
    CSV: http://earthquake.usgs.gov/earthquak...y/2.5_week.csv

I must be missing something because in the Sandbox here - http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=layers_csv - it looks like to me that all is on the usgs.gov site (i.e. the "Proxy urlPrefix" & the "CSVLayer"), except for the call to the api and css from the ArcGIS server.

The rest of the code is embedded in the html page.

[HTML]
<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map, csv;

      require([
        "esri/map",
        "esri/layers/CSVLayer",
        "esri/Color",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/InfoTemplate",
        "esri/urlUtils",
        "dojo/domReady!"
      ], function(
        Map, CSVLayer, Color, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, urlUtils
      ) {
        urlUtils.addProxyRule({
          proxyUrl: "/proxy",
          urlPrefix: "earthquake.usgs.gov"
        });
        map = new Map("map", {
          basemap: "gray",
          center: [ -60, -10 ],
          zoom: 4
        });
        csv = new CSVLayer("http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv", {
          copyright: "USGS.gov"
        });
        var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
        var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
        var renderer = new SimpleRenderer(marker);
        csv.setRenderer(renderer);
        var template = new InfoTemplate("${type}", "${place}");
        csv.setInfoTemplate(template);
        map.addLayer(csv);
      });
    </script>
</head>

<body>
    <div id="map"></div>
</body>
</html>

[/HTML]

I could be completly off the mark here and have this all wrong as I am not an experienced developer, just trying to figure this out at the moment 🙂

Can you maybe advise how I can set this up using my own test solution bjorn?

Cheers...

glennlawrence

I already tried that, but unfortunatly it doesn't work.

dawenx

    Since you don't need a proxy, try to remove below codes:
    Code:

    urlUtils.addProxyRule({
              proxyUrl: "/proxy",
              urlPrefix: "test25.net"
            });

BjornSvensson

Glenn,

However in the sample both the csv and the proxy are also on the same domain, earthquake.usgs.gov so I don't know why it need the proxy.

Not correct. In the sample, the CSV is on a different domain than the proxy and application.
Application: http://developers.arcgis.com/javascript/samples/layers_csv/index.html
Proxy: http://developers.arcgis.com/proxy
CSV: http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv

DawenXie

Since you don't need a proxy, try to remove below codes:

urlUtils.addProxyRule({
          proxyUrl: "/proxy",
          urlPrefix: "test25.net"
        });

I don't have any proxy setup, I just replaced the url in the proxy with my address and hoped it would work!

Is there a way to make it run without the proxy?

glennlawrence

My csv is on the same domain as my app, both are on test25.net. However in the sample both the csv and the proxy are also on the same domain, earthquake.usgs.gov so I don't know why it need the proxy.

The strange thing is when I use my own domain for the proxy address and as the csv source file path while testing in the Sandbox, it works fine. But as soon as I download the code and try to use it on my domain it doesn't work. The Map loads up but none of the points.

I have tested removing the proxy call and again the Map loads, but none of the points.

Any other ideas?

Cheers...

BjornSvensson

Is there a way to make it run without the proxy?

If the CSV file is on the same domain as your application, then you don't need the proxy.

If the CSV file is on a different domain than your application and Cross Origin Resource Sharing (CORS) is implemented, then you don't need the proxy. https://developers.arcgis.com/javascript/jshelp/ags_proxy.html

For other cases, you will need a proxy.

glennlawrence

I don't have any proxy setup, I just replaced the url in the proxy with my address and hoped it would work!

Is there a way to make it run without the proxy?

kenbuja

Do you have a proxy set up properly? Notice that the code contains this

urlUtils.addProxyRule({
    proxyUrl: "/proxy",
    urlPrefix: "test25.net"
});

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.