AnsweredAssumed Answered

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

Question asked by KerriAlice77 on Nov 21, 2014
Latest reply on Feb 5, 2015 by KerriAlice77

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

Outcomes