Hi Dev,
The best approach would be to add your feature layer or CSV files to a map and share the map publicly. This way everything you need comes in the map and you can use this map directly in the basic viewer.
If your requirement is something like Felix, adding custom layer to your web map then may be below approach will help. You'll have a to create a function createMyLayer and hook it up on web map create event (line 29 below)
Below code was tested in sandbox.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Web Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
require(["dojo/ready", "dojo/on", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/map", "esri/arcgis/utils", "esri/domUtils", "dojo/fx", "dojo/_base/fx", "esri/layers/GraphicsLayer", "esri/InfoTemplate", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/graphic", "esri/SpatialReference", "dojo/dom-attr", "dojo/io/script", "dojo/_base/array" ], function(
ready, on, dom, registry, domConstruct, parser, BorderContainer, ContentPane, Map, arcgisUtils, domUtils, coreFx, baseFx, GraphicsLayer, InfoTemplate, Point, SimpleMarkerSymbol, Color, Graphic, SpatialReference, domAttr, ioScript, array ) {
ready(function() {
initMap();
function initMap() {
var deferred = arcgisUtils.createMap(("d94dcdbe78e141c2b2d3a91d5ca8b9c9"), "mainWindow");
deferred.then(function(response){
var map = response.map;
createMyLayer(map);
});
}
function createMyLayer(map){
var gl = new GraphicsLayer({ id: "weather" });
map.addLayer(gl);
ioScript.get({
url: "http://openweathermap.org/data/2.1/find/city",
content: {
lat: 48,
lon:2,
cnt:20
}
, callbackParamName: "callback"
, load: function (data) {
var response = data.list;
array.forEach(response, function (loc){
gl.add(new Graphic(
new Point(loc.coord.lon,loc.coord.lat, new SpatialReference({wkid:4326})),
new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255,0,0,0.5]))
,{"name": loc.name, "temp":loc.main.temp,"humidity":loc.main.humidity}
,new InfoTemplate("Weather","Location Name: ${name} <br/>Temperature: ${temp} <br/>Humidity:${humidity}")
));
});
}
, error: function(error) {
alert("errro");
}
});
}
});
});
</script>
</head>
<body class="tundra">
<div id="mainWindow">
</div>
</body>
</html>
