Community
Select to view content in your preferred language

Map & Points From CSV

2541
10
Jump to solution
05-14-2014 04:11 AM
glennlawrence
by
Emerging Contributor
‎05-14-2014 04:11 AM
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
0 Kudos
10 Replies
glennlawrence
by
Emerging Contributor
‎05-19-2014 02:07 AM
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]
0 Kudos