<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="//js.arcgis.com/3.6/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
@-webkit-keyframes
pulse
{
0%
{
opacity: 1.0;
}
45%
{
opacity: .20;
}
100%
{
opacity: 1.0;
}
}
#blink_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="//js.arcgis.com/3.6/"></script>
<script>
var map;
require([
"esri/map",
"esri/geometry/Point",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleMarkerSymbol",
"dojo/_base/Color",
"dojo/domReady!"
], function(
Map, Point, Graphic, GraphicsLayer, SimpleMarkerSymbol, Color
) {
var center = [ 19.291, 48.343 ];
map = new Map("map", {
basemap: "oceans",
center: center,
zoom: 4
});
var gl = new GraphicsLayer({ id: "blink" });
var symbol = new SimpleMarkerSymbol("solid", 14, null, new Color("green"));
// five points
for ( var i = 0; i < 5; i++ ) {
var dx = (Math.random() < 0.5 ? -1 : 1) * i;
var dy = (Math.random() < 0.5 ? -1 : 1) * i;
var point = new Point(center[0] + dx, center[1] + dy);
var graphic = new Graphic(point, symbol);
gl.add(graphic);
}
map.addLayer(gl);
// map.on("click", function(e) {
// gl.add(new Graphic(e.mapPoint, symbol));
// });
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
