Error: Invalid value for <line> attribute x1="undefined" svg.js:56 Error: Invalid value for <line> attribute x2="undefined" svg.js:56 Error: Invalid value for <text> attribute x="NaN" svg.js:62 Error: Invalid value for <line> attribute x1="undefined" svg.js:56 Error: Invalid value for <line> attribute x2="undefined" svg.js:56 Error: Invalid value for <text> attribute x="NaN"
<!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>Find Address</title> <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.9/js/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #loading { width:100%; position:absolute; height:400px; background:transparent url("http://dl.dropbox.com/u/2654618/ajax-gear.gif") center no-repeat; z-index:100; } #histogram-container text, #histogram-range, #scale-bar-left text, #scale-bar-right text { font-family: sans-serif; } #histogram-timeslider-dijit #focusTip { font-family: sans-serif; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> var data = { "names" : ["start_date", "end_date", "resource_id", "wells", "type", "classID", "lat", "lng"], "data" : [["2014-10-09 12:00", "2014-10-22 12:00", "Drill Rig 2", "Well #25460a", "Drill", "Drilling", 28.9918178982105822080596059631954529631, -97.031232487493567941353227873406397599], ["2014-05-15 12:00", "2014-05-28 12:00", "Drill Rig 4", "Well #25478b", "Drill", "Drilling", 30.0091936612271929277981126740726330783, -97.960879498320778436959492909212107868], ["2014-06-13 12:00", "2014-06-27 12:00", "Drill Rig 2", "Well #25462d", "Drill", "Drilling", 27.8853481154214236160058813484160210534, -96.622063710372619474843423131492707551]] }; var map, featureLayer; require([ "esri/geometry/Point","esri/TimeExtent", "esri/map", "esri/graphic","esri/InfoTemplate","esri/layers/FeatureLayer","dojo/_base/array", "esri/symbols/SimpleMarkerSymbol", "esri/Color","esri/dijit/HistogramTimeSlider","dojo/dom-construct", "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry", "dijit/form/Button", "dijit/form/Textarea", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Point,TimeExtent,Map, Graphic,InfoTemplate,FeatureLayer,arrayUtils, SimpleMarkerSymbol, Color,HistogramTimeSlider,domConstruct, number, parser, dom, registry ) { parser.parse(); map = new Map("mapDiv", { basemap: "streets", center: [ -98.428618642622013485086900455532602058,28.6208905773702750504179180306120159523], zoom: 6 }); map.infoWindow.resize(200,125); var timeExtent = new TimeExtent(); timeExtent.startTime = new Date("July 1, 2014 11:13:00 GMT-0700"); timeExtent.endTime = new Date("July 2, 2015 11:13:00 GMT-0700"); map.setTimeExtent(timeExtent); var symbol = new SimpleMarkerSymbol(); symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE); symbol.setColor(new Color([153,0,51,0.75])); //create a feature collection for the wells var featureCollection = { "layerDefinition": null, "featureSet": { "features": [], "geometryType": "esriGeometryPoint" } }; featureCollection.layerDefinition = { "geometryType": "esriGeometryPoint", "objectIdField": "ObjectID", "type": "Feature Layer", "typeIdField": "", "drawingInfo": { "renderer": { "type": "simple", "symbol": { "type": "esriSMSCircle", "color": [153,0,51,0.75], "width": 20, "height": 20 } } }, "fields": [{ "name": "ObjectID", "alias": "ObjectID", "type": "esriFieldTypeOID" }, { "name": "wellId", "alias": "WellId", "type": "esriFieldTypeString" }, { "name": "longitude", "alias": "Longitude", "type": "esriFieldTypeDouble" }, { "name": "latitude", "alias": "Latitude", "type": "esriFieldTypeDouble" }, { "name": "dateStart", "alias": "DateStart", "type": "esriFieldTypeDate" }, { "name": "dateEnd", "alias": "DateEnd", "type": "esriFieldTypeDate" } ], "timeInfo":{ "startTimeField":"dateStart", "endTimeField":"dateEnd", "hasLiveData":false, "timeInterval":0, "timeIntervalUnits":"", "trackIdField":"", "timeExtent": ["July 1, 2014 11:13:00 GMT-0700","July 2, 2015 11:13:00 GMT-0700"], "timeReference": {"respectsDaylightSaving":false,"timeZone": "GMT-0700"}, "exportOptions":{ "useTime": true, "timeDataCumulative": false, "timeOffset": 0, "timeOffsetUnits": "esriTimeUnitsCenturies"} } }; var infoTemplate = new InfoTemplate( "Location", "Well: ${wellId}<br />Longitude: ${longitude}<br />latitude: ${latitude}" ); //create a feature layer based on the feature collection featureLayer = new FeatureLayer(featureCollection, { id: 'wellLayer', infoTemplate: infoTemplate, mode: FeatureLayer.MODE_SNAPSHOT, outFields:["*"] }); var features = []; var counter=0 arrayUtils.forEach(data.data, function(well) { point = new Point({ longitude: well[7], latitude: well[6] }); var attributes = { ObjectID: counter, wellId: well[3], longitude: well[7], latitude: well[6], dateStart: new Date(well[0]).getTime(), dateEnd: new Date(well[1]).getTime() }; counter+=1; var graphic = new Graphic(point, symbol, attributes, null); featureLayer.add(graphic); //features.push(graphic); }); //featureLayer.applyEdits(features, null, null); var layerUpdateEnd = featureLayer.on("update-end", function() { layerUpdateEnd.remove(); var sliderElem = domConstruct.create("div", { id: "timeSlider_"+ map.id, style: "margin-bottom:10px; bottom:33px" }, "bottom-div"); var sliderParams = { // format the dates as mm/dd/yyyy // more formatting options: https://developers.arcgis.com/en/javascript/jshelp/intro_formatinfowindow.html dateFormat: "DateFormat(selector: 'date', fullYear: true)", layers : [ featureLayer ], mode: "show_all", timeInterval: "esriTimeUnitsDays" }; var slider = new HistogramTimeSlider(sliderParams, sliderElem); map.setTimeSlider(slider); domConstruct.destroy("loading"); console.log(featureLayer); }); map.addLayers([featureLayer]); }); </script> </head> <body class="tundra"> <div class="demoLayout" style="height: 100%; width: 100%" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'"> <div class="centerPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"> <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div id="loading"></div> </div> </div> <div class="edgePanel" id="bottom-div" style="height:145px; overflow:hidden" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> </div> </div> </body> </html>
I have the same problem