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>