Map &amp;amp; Points From CSV

glennlawrence · ‎05-14-2014

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

BjornSvensson · ‎05-17-2014

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.

View solution in original post

KenBuja · ‎05-14-2014

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

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

glennlawrence · ‎05-14-2014

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?

BjornSvensson · ‎05-14-2014

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 · ‎05-15-2014

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...

DawenXie · ‎05-15-2014

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?

BjornSvensson · ‎05-15-2014

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

glennlawrence · ‎05-15-2014

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

glennlawrence · ‎05-15-2014

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...

BjornSvensson · ‎05-17-2014

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.

Map &amp;amp;amp; Points From CSV

Map &amp; Points From CSV