Add a feature layer | Overview | ArcGIS API for JavaScript 4.24

A feature layer is a dataset in a hosted feature service . Each feature layer contains features with a single geometry type ( point , line , or polygon ) ... ArcGISAPIforJavaScriptOverviewSampleCodeAPIReferenceShowcaseBlogMenuOverviewKeyfeaturesGetstartedInstallandsetupReleasenotesFAQCommunityTutorialsMapsandscenesDisplayamapDisplayascene(3D)ChangethebasemaplayerDisplayacustombasemapstyleAddapoint,line,andpolygonAddafeaturelayerStyleafeaturelayerDisplayapop-upAddavectortilelayerDisplayawebmapDisplayawebscene(3D)DataSearchRoutingSpatialanalysisDemographicsSecurityandauthenticationCoreconceptsVisualizationBuildingyourUIWorkingwithArcGISOnlineandEnterpriseDevelopertoolingMigratingfrom3.xReferenceNavigationMenuAddafeaturelayerLearnhowtoaccessanddisplaypoint,line,andpolygonfeaturesinfeaturelayers.Afeaturelayerisadatasetinahostedfeatureservice.Eachfeaturelayercontainsfeatureswithasinglegeometrytype(point,line,orpolygon),andasetofattributes.Youcanusefeaturelayerstostore,access,andmanagelargeamountsofgeographicdataforyourapplications.YougetfeaturesfromafeaturelayerbyaccessingitsURL.Inthistutorial,youuseURLstoaccessanddisplaythreedifferenthostedfeaturelayers:Trailheads(points)Trails(lines)ParksandOpenSpaces(polygons)Tolearnhowtopublishyourowndataasahostedfeaturelayer,visitDatahostingservicesintheMappingAPIandlocationservicesguide.PrerequisitesYouneedafreeArcGISdeveloperaccounttoaccessyourdashboardandAPIkeys.TheAPIkeymustbescopedtoaccesstheservicesusedinthistutorial.StepsCreateanewpenTogetstarted,eithercompletetheDisplayamaptutorialorusethispen.SettheAPIkeyToaccessArcGISservices,youneedanAPIkey.GotoyourdashboardtogetanAPIkey.InCodePen,settheapiKeytoyourkey,soitcanbeusedtoaccessbasemaplayerandlocationservices.Usedarkcolorsforcodeblocks    Changeline1 2 3 4 esriConfig.apiKey="YOUR_API_KEY"; constmap=newMap({ basemap:"arcgis-topographic"//Basemaplayerservice });AddmodulesIntherequirestatement,addtheFeatureLayermodule.MoreinfoTheArcGISAPIforJavaScriptusesAMDmodules.Therequirefunctionisusedtoloadmodulessotheycanbeusedinthemainfunction.It'simportanttokeepthemodulereferencesandfunctionparametersinthesameorder.ExpandUsedarkcolorsforcodeblocks                                                                    Addline.Changeline1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 ExpandAddapointfeaturelayerPointfeaturesaretypicallydisplayedinafeaturelayerontopofallotherlayers.UsetheFeatureLayerclasstoreferencetheTrailheadsURLandaddfeaturestothemap.GototheTrailheadsURLandbrowsethepropertiesofthelayer.MakenoteoftheName,Type,DrawingInfo,andFieldsproperties.InCodePen,createaFeatureLayerandsettheurlproperty.ExpandUsedarkcolorsforcodeblocks                                                                    Addline.Addline.Addline.Addline.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 constview=newMapView({ container:"viewDiv", map:map, center:[-118.80543,34.02700], zoom:13 }); //Trailheadsfeaturelayer(points) consttrailheadsLayer=newFeatureLayer({ url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0" }); ExpandAddtrailheadsLayertothemap.ExpandUsedarkcolorsforcodeblocks                                                                    Addline.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 //Trailheadsfeaturelayer(points) consttrailheadsLayer=newFeatureLayer({ url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0" }); map.add(trailheadsLayer); ExpandRuntheapptoviewtheTrailheadslayerinthemap.AddalinefeaturelayerLinefeaturesaretypicallydisplayedinafeaturelayerbeforepoints.UsetheFeatureLayerclasstoreferencetheTrailsURLandaddfeaturestothemap.GototheTrailsURLandbrowsethepropertiesofthelayer.MakenoteoftheName,Type,DrawingInfo,andFieldsproperties.InCodePen,createaFeatureLayerandsettheurlproperty.ExpandUsedarkcolorsforcodeblocks                                                                    Addline.Addline.Addline.Addline.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 map.add(trailheadsLayer); //Trailsfeaturelayer(lines) consttrailsLayer=newFeatureLayer({ url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" }); ExpandAddtrailsLayertothemapwithanindexof0.ThisensuresthatthelayerisaddedtothetopofthearrayandisdrawnbeforetrailheadsLayer.ExpandUsedarkcolorsforcodeblocks                                                                    Addline.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 //Trailsfeaturelayer(lines) consttrailsLayer=newFeatureLayer({ url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" }); map.add(trailsLayer,0); ExpandRuntheapptoviewtheTrailslayerinthemap.AddapolygonfeaturelayerPolygonfeaturesaretypicallydisplayedinafeaturelayerbeforelines.UsetheFeatureLayerclasstoreferencetheParksandOpenSpacesURLandaddfeaturestothemap.GototheParksandOpenSpacesURLandbrowsethepropertiesofthelayer.MakenoteoftheName,Type,DrawingInfo,andFieldsproperties.InCodePen,createaFeatureLayerandsettheurlproperty.ExpandUsedarkcolorsforcodeblocks                                                                    Addline.Addline.Addline.Addline.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 map.add(trailsLayer,0); //Parksandopenspaces(polygons) constparksLayer=newFeatureLayer({ url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0" }); ExpandAddparksLayertothemapwithanindexof0.ThisensuresthatthelayerisaddedtothetopofthearrayandisdrawnbeforetrailsLayer.ExpandUsedarkcolorsforcodeblocks                                                                    Addline.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 //Parksandopenspaces(polygons) constparksLayer=newFeatureLayer({ url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0" }); map.add(parksLayer,0); ExpandRuntheappInCodePen,runyourcodetodisplaythemap.Themapviewshoulddisplayallthreefeaturelayersinthemap.Themapviewdrawsthemapinfollowingorder:TopographicbasemaplayerParksandOpenSpaces(polygons)Trails(lines)Trailheads(points)Itisimportanttoaddfeaturelayersinthecorrectordersothatfeaturesaredisplayedcorrectly(notoverlapping)andsoyoucaninteractwiththefeatures.What'snext?LearnhowtouseadditionalAPIfeaturesand ArcGISservicesinthesetutorials:ImportdataasafeaturelayerCreateanewfeaturelayerDisplayapop-upStyleafeaturelayerQueryafeaturelayer(SQL)PrerequisitesStepsCreateanewpenSettheAPIkeyAddmodulesAddapointfeaturelayerAddalinefeaturelayerAddapolygonfeaturelayerRuntheappWhat'snext?ShowtableofcontentsPrerequisitesStepsCreateanewpenSettheAPIkeyAddmodulesAddapointfeaturelayerAddalinefeaturelayerAddapolygonfeaturelayerRuntheappWhat'snext?SolutionViewinCodePenEstimatedtime10minutesWasthispagehelpful?YesNoWasthispagehelpful?YesNoYourbrowserisnolongersupported.Pleaseupgradeyourbrowserforthebestexperience.Seeourbrowserdeprecationpostformoredetails.