This sample shows how to create a feature layer based on a feature collection. A feature collection consists of a layer definition and feature set. This sample creates a new feature layer to display the location of geo-enabled photos from Flickr using the geo-enabled information from Flickr's public feed.
In this sample a new feature collection that will contain point features is created. After creating the feature collection a layer definition is applied that specifies the default renderer and fields for the feature collection. A picture marker symbol is defined as the default renderer.After creating the feature collection, it is passed it into the FeatureLayer's constructor to create a new feature layer.
<!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>Flickr</title> <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"> <style> html, body, #map { height:100%; width:100%; margin:0; padding:0; } .esriScalebar{ padding: 20px 20px; } #map{ padding:0; } </style> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="https://js.arcgis.com/3.46/"></script> <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/dijit/PopupTemplate", "esri/request", "esri/geometry/Point", "esri/graphic", "dojo/on", "dojo/_base/array", "dojo/domReady!" ], function( Map, FeatureLayer, PopupTemplate, esriRequest, Point, Graphic, on, array ) { var featureLayer; map = new Map("map", { basemap: "satellite", center: [-46.807, 32.553], zoom: 3 }); //hide the popup if its outside the map's extent map.on("mouse-drag", function(evt) { if (map.infoWindow.isShowing) { var loc = map.infoWindow.getSelectedFeature().geometry; if (!map.extent.contains(loc)) { map.infoWindow.hide(); } } }); //create a feature collection for the flickr photos var featureCollection = { "layerDefinition": null, "featureSet": { "features": [], "geometryType": "esriGeometryPoint" } }; featureCollection.layerDefinition = { "geometryType": "esriGeometryPoint", "objectIdField": "ObjectID", "drawingInfo": { "renderer": { "type": "simple", "symbol": { "type": "esriPMS", "url": "images/flickr.png", "contentType": "image/png", "width": 15, "height": 15 } } }, "fields": [{ "name": "ObjectID", "alias": "ObjectID", "type": "esriFieldTypeOID" }, { "name": "description", "alias": "Description", "type": "esriFieldTypeString" }, { "name": "title", "alias": "Title", "type": "esriFieldTypeString" }] }; //define a popup template var popupTemplate = new PopupTemplate({ title: "{title}", description: "{description}" }); //create a feature layer based on the feature collection featureLayer = new FeatureLayer(featureCollection, { id: 'flickrLayer', infoTemplate: popupTemplate }); //associate the features with the popup on click featureLayer.on("click", function(evt) { map.infoWindow.setFeatures([evt.graphic]); }); map.on("layers-add-result", function(results) { requestPhotos(); }); //add the feature layer that contains the flickr photos to the map map.addLayers([featureLayer]); function requestPhotos() { //get geotagged photos from flickr //tags=flower&tagmode=all var requestHandle = esriRequest({ url: "https://api.flickr.com/services/feeds/geo?&format=json", callbackParamName: "jsoncallback" }); requestHandle.then(requestSucceeded, requestFailed); } function requestSucceeded(response, io) { //loop through the items and add to the feature layer var features = []; array.forEach(response.items, function(item) { var attr = {}; attr["description"] = item.description; attr["title"] = item.title ? item.title : "Flickr Photo"; var geometry = new Point(item); var graphic = new Graphic(geometry); graphic.setAttributes(attr); features.push(graphic); }); featureLayer.applyEdits(features, null, null); } function requestFailed(error) { console.log('failed'); } }); </script> </head> <body > <div id="map"></div> </body> </html>