Re: Is it possible to convert a csv layer to an animated graphic (pulsing point)?

3320
8
11-21-2014 09:27 AM
KeriLu
by
New Contributor

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no">

    <!-- meta tags to hide url and minimize status bar to give the web app

    a native app look this only happens after app is saved to the desktop-->

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Geolocation API</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

    <!-- Details about the Webkit CSS Properties http://css-infos.net/properties/webkit.php

    and http://www.pointabout.com/category/development-blog/pointabout-dev-help/-->

    <style>

      html, body #map {

        height: 100%;

        margin: 0px;

        padding: 0px;

        width: 100%;

      }

     @-webkit-keyframes

       pulse

      {

        0%

        {

          opacity: 1.0;

        }

        45%

        {

          opacity: .20;

        }

        100%

        {

          opacity: 1.0;

        }

      }

     @-moz-keyframes

       pulse

      {

        0%

        {

          opacity: 1.0;

        }

        45%

        {

          opacity: .20;

        }

        100%

        {

          opacity: 1.0;

        }

      }

      #map_graphics_layer {

        -webkit-animation-duration: 3s;

        -webkit-animation-iteration-count: infinite;

        -webkit-animation-name: pulse;

        -moz-animation-duration: 3s;

        -moz-animation-iteration-count: infinite;

        -moz-animation-name: pulse;

      }

    </style>

    <script src="http://js.arcgis.com/3.11/"></script>

    <script>

      var map, csv;

      require([

        "esri/map",

        "esri/layers/CSVLayer",

        "esri/Color",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/renderers/SimpleRenderer",

        "esri/InfoTemplate",

        "esri/urlUtils",

        "esri/geometry/Point",

        "esri/graphic",

        "dojo/domReady!"

      ], function(

        Map, CSVLayer, Color, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, urlUtils, Point, Graphic

      ) {

        urlUtils.addProxyRule({

          proxyUrl: "/proxy/",

          urlPrefix: "mywebsite.com"

        });

        map = new Map("map", {

          basemap: "gray",

          center: [ -60, -10 ],

          zoom: 4

        });

        csv = new CSVLayer("http://mywebsite.com/2.5_weekz.csv", {

          copyright: "Echologics"

        });

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

        graphic = new Graphic(csv)

        map.graphics.add(graphic);

      

      });

    </script>

  </head>

  <body>

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

  </body>

</html>

0 Kudos
8 Replies
KellyHutchins
Esri Frequent Contributor

Sure you can use css to render the graphics and apply a pulse effect.  The Styling SVG with CSS help topic explains how this works and links to a few samples

I've also attached a sample that shows this in action.

KeriLu
by
New Contributor

Thank you for your response Kelly. I did not get your code to work though. Not sure what I am missing.

0 Kudos
KellyHutchins
Esri Frequent Contributor

Which browser and version are you testing with? Are there any errors in the developer console?

0 Kudos
KeriLu
by
New Contributor

aboutgooglechrome.JPG

0 Kudos
KeriLu
by
New Contributor

Thanks for your reply. The map came up and everything but the csv file was not in there or pulsing.

0 Kudos
KellyHutchins
Esri Frequent Contributor

It probably can't find the csv file. I included it in the zip so if you place it in the same folder as the html file it should just work. You may also want to check permissions to ensure the web app can access the csv file.

0 Kudos
KeriLu
by
New Contributor

My problem before was to get the csv to flash/ animate now the csv wont even show up 😞

0 Kudos
KeriLu
by
New Contributor

Hmmm....not sure what's going on here. I used to be able to grab my csv file from our server and do and xy events so the point shows up on the webmap made with the Javascript Api but I can't seem to do that anymore. I have been reading the discussion forums and a few suggestions mention setting up a proxy server. I ran the .jsp file but I am not really sure how to proceed? Doen't seem to make a difference. My csv file simply doesn's show up as points on my map anymore. I do not clearly understand the process of registering an app on the ArcGIS for Developers site either? Can someone please help me clarify?

Thanks!!

0 Kudos