Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Feature collection
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
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.
Code
<!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.29/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.29/"></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>