Hide Table of Contents
View Feature collection sample in sandbox
Feature collection

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.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>
 
         
Show Modal