AnsweredAssumed Answered

Querying a FeatureLayer with Angular JS

Question asked by endlessdsire on Dec 28, 2015
Latest reply on Dec 29, 2015 by endlessdsire

Hey there.

Im starting to develop a little app that it has to search a value in a feature layer and give the result in some html List and also make a zoom in a map with the current location (i would like to add the infotemplate from the feature).

Im programming with esri-angular api, but i dont find any example of :

 

1.- How to query data from a featurelayer

2.- How to make a zoom to the founded feature.

3.- Is there a way to not use this to add the feature layers and doing it through code?

<esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0"></esri-feature-layer>

        <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0"></esri-feature-layer>

 

Thanks in advice for ur help guys as always

 

 

I just have this on my code:

 

Mapa.JS

 angular.module('myApp', ['esri.map'])
                .controller('MapController', function ($scope) {
                    $scope.map = {
                        center: {
                            lng: -71.51079005370974,
                            lat:  -33.0324567956618},
                        zoom: 10
                    };
                });

 

Html File:

 <div class="content-block contact-3 bg-clouds" id="busqueda" ng-controller="MapController">
            <div class="container">
                <div class="row">
                    <div class="underlined-title">
                        <h1>Buscar NIS de Cliente</h1>
                        <hr>
                    </div>
                    <div class="row">
                        <form role="form">
                            <div class="col-md-4"> 
                                <div class="form-group"> 
                                    <label class="control-label" for="formInput13">Ingrese el NIS del cliente a buscar:</label>
                                    <input type="text" class="form-control" id="formInput13" placeholder="NIS" required>
                                </div>                                 
                            </div>
                            <div class="col-md-4">
                                <button type="button" class="btn btn-default btnBuscar bg-moonlight offwhite" id="searchBtn">
                                    <i class="fa fa-search"></i> Buscar
                                </button>                                 
                            </div>                             
                        </form>
                    </div>
                    <div class="col-md-6">
                        <div id="contact" class="form-container">
                            <h2>Resultados de la búsqueda:</h2>
                            <fieldset>
                                <ul> 
                                    <li>Lat: {{map.center.lat}}</li>  
                                    <li>Address: {{map.layer.address}}</li>                                      
                                    <li>Pipe: {{map.layer.pipe}}</li>                                     
                                    <li>Status: {{map.layer.status}}</li>                                     
                                    <li>Nulla volutpat aliquam velit    
                                        <ul> 
                                            <li>Phasellus iaculis neque</li>                                             
                                            <li>Purus sodales ultricies</li>                                             
                                        </ul>                                         
                                    </li>
                                </ul>
                                
                                 
                            </fieldset>
                            <p>
                                    Lat:<input type="number" step="0.1" ng-model="map.center.lat" />
                                    Lng:<input type="number" step="0.1" ng-model="map.center.lng" />,
                                    Zoom: <select ng-model="map.zoom" ng-options="level for level in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]"></select>
                                    
                                </p>
                        </div>
                        <!-- /.form-container -->
                    </div>
                    <div class="col-md-6">
                        <h2>Ubicación</h2>
                        <p>Lugar donde actualmente se encuentra el NIS.</p>
                        <div class="row pg-empty-placeholder containerMap"><esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo"></esri-map>
                          
                        </div></div>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container -->
        </div>

Outcomes