AnsweredAssumed Answered

Geocode Widget with Marker and Zoom

Question asked by Alkaline182 on Feb 17, 2015
Latest reply on Feb 17, 2015 by timw1984

I am new to Javascript API.  I am working on a project that maps my SQL table Lat, Long locations (I used the Flickr JSON Flickr example:Feature collection | ArcGIS API for JavaScript).  I had everything working fine and then decided to add the Geocoder Widget.  I can't get the geocoder to add a symbol to the map and zoom to it.  Below is the code I have so far.  Any help would be greatly appreicated.  Thanks

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    <!--The viewport meta tag is used to improve the presentation and behavior of the 

    samples on iOS devices--> 

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 

    <title>Flickr</title> 

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojo/resources/dojo.css"> 

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css"> 

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/dgrid.css"> 

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> 

 

    <style> 

      html, body, #map { 

        height:100%; 

        width:100%; 

        margin:0; 

        padding:0; 

      } 

     

      #search {

        display: block;

        position: absolute;

        z-index: 2;

        top: 20px;

        left: 60px;

      }

     

     

     

      .esriScalebar{ 

        padding: 20px 20px;  

      }  

      #map{  

        padding:0; 

      } 

       

      .dgrid { border: none; height: 100%; } 

      .dgrid-column-0 { 

        width: 35px; 

      } 

      .dgrid-row-odd { 

        background: #FFFDF3; 

      } 

      td div img:hover { 

        cursor: pointer; 

      } 

       

      #titlePane{ 

        width:240px; 

      } 

      .claro .dijitTitlePaneTitle { 

        background: #fff; 

        font-weight:600; 

        border: none; 

        border-bottom:solid 1px #29201A; 

        border-top:solid 1px #29201A; 

      } 

      .claro .dijitTitlePaneTitleHover { 

        background:#eee; 

      } 

      .claro .dijitTitlePaneTitleActive { 

        background:#808775; 

      } 

      .claro .dijitTitlePaneContentOuter { 

        border-right: none; 

        border-bottom: none; 

        border-left: none; 

      } 

 

    </style> 

 

    <script>        var dojoConfig = { parseOnLoad: true };</script> 

    <script src="http://js.arcgis.com/3.12/"></script> 

    <script>

        var map, geocoder, grid;

        require([

        "esri/map",

        "esri/InfoTemplate",

        "esri/dijit/Geocoder",

        "esri/graphic",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/dijit/Measurement",

        "esri/layers/FeatureLayer",

        "esri/dijit/PopupTemplate",

        "esri/request",

        "esri/tasks/query",

        "esri/geometry/Point",

        "esri/graphic",

        "esri/symbols/PictureMarkerSymbol",

        "dojo/on",

        "dojo/_base/array",

        "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",

        "dijit/form/Button",

        "dojo/parser", "dojo/_base/declare", "dojo/dom",

        "dijit/TitlePane", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

        "dojo/domReady!"

      ], function (

        Map,

        InfoTemplate,

        Geocoder,

        Graphic, SimpleMarkerSymbol,

        Measurement,

        FeatureLayer,

        PopupTemplate,

        esriRequest,

        Query,

        Point,

        Graphic,

        PictureMarkerSymbol,

        on,

        array,

        Grid, Selection, Memory,

        Button,

        parser, declare, dom

      ) {

 

 

          parser.parse();

 

 

          var featureLayer;

 

 

          map = new Map("map", {

              basemap: "streets",

              center: [-46.807, 32.553],

              zoom: 3

          });

 

 

          map.on("load", initOperationalLayer);

 

 

          function initOperationalLayer() {

              //Layer that is in Lat, Long Spatial reference 102100

              var infoTemplate = new InfoTemplate();

              var hydrant = new FeatureLayer("http://services1.arcgis.com/ziLNoRgqnICUM0q1/arcgis/rest/services/Hydrants/FeatureServer/0", {

                  mode: FeatureLayer.MODE_ONDEMAND,

                  outFields: ["*"],

                  infoTemplate: infoTemplate

              });

 

 

              //Layer that is NAD83 / UTM zone 15 N Spatial Reference 26915

              var parcel = new FeatureLayer("http://gis.hennepin.us/ArcGIS/rest/services/Maps/NATURALRESOURCES/MapServer/2", {

                  mode: FeatureLayer.MODE_ONDEMAND,

                  outFields: ["*"],

                  infoTemplate: infoTemplate

              });

 

 

              var outline = new esri.symbol.SimpleLineSymbol()

              .setColor(dojo.colorFromHex('#fff'));

              var sym = new esri.symbol.SimpleFillSymbol()

              .setColor(new dojo.Color([212, 212, 210, 0.3]))

              .setOutline(outline);

              var renderer = new esri.renderer.SimpleRenderer(sym);

              parcel.setRenderer(renderer);

              hydrant.maxScale = 1000;

              hydrant.minScale = 10000;

              parcel.maxScale = 1000;

              parcel.minScale = 10000;

              map.addLayer(hydrant);

              map.addLayer(parcel);

          }

 

 

 

 

 

 

          //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/circle_red.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"

              }, {

                  "name": "description",

                  "alias": "description",

                  "type": "esriFieldTypeString"

              }, {

                  "name": "ID1",

                  "alias": "ID1",

                  "type": "esriFieldTypeInteger"

              }, {

                  "name": "Date1",

                  "alias": "Date1",

                  "type": "esriFieldTypeString"

 

 

              }]

          };

 

 

          //define a popup template

          var popupTemplate = new esri.dijit.PopupTemplate({

              title: "{title}",

              fieldInfos: [

          { fieldName: "author", visible: true, label: "author" },

          { fieldName: "tags", visible: true, label: "tags" },

          { fieldName: "ID1", visible: true, label: "ID1" },

           { fieldName: "description", visible: true, label: "description" },

           { fieldName: "test", visible: true, label: "test" },

           { fieldName: "Date1", visible: true, label: "Date1" }

          ],

              showAttachments: true

 

 

 

 

          });

 

 

          //create a feature layer based on the feature collection 

          featureLayer = new FeatureLayer(featureCollection, {

              id: 'flickrLayer',

              outFields: ["*"],

              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 (evt) {

              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: "http://localhost:15095/Service1.svc/getAllFlickr",

                  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.GetAllFlickrResult, function (item, index) {

                  var attr = {};

 

 

 

 

                  attr["Date1"] = item.Date1;

                  attr["tags"] = item.tags;

                  attr["ID1"] = item.ID1;

                  attr["description"] = item.description;

                

 

 

 

 

                  var geometry = new Point(item);

 

 

 

 

                  var graphic = new Graphic(geometry);

                  if (index == response.GetAllFlickrResult.length - 1) {

                      var symbol = new PictureMarkerSymbol({

                          "type": "esriPMS",

                          "url": "images/circle_green.png",

                          "contentType": "image/png",

                          "width": 20,

                          "height": 20

                      });

                      graphic.setSymbol(symbol);

                  } 

 

 

                  graphic.setAttributes(attr);

                  features.push(graphic);

              });

 

 

              var items = array.map(features, function (feature) {

                  return feature.attributes;

              });

 

 

 

 

 

 

 

 

              featureLayer.applyEdits(features, null, null, function () {

 

 

 

 

                  var dataGrid = declare([Grid, Selection]);

 

 

                  var columns = [{

                      label: "",  //wasn't able to inject an HTML <div> with image here 

                      field: "ObjectID",

                      formatter: makeZoomButton

                  }, {

                      label: "Date1",

                      field: "Date1"

                  }];

 

 

                  grid = new dataGrid({

                      bufferRows: Infinity,

                      columns: columns

                  }, "grid");

 

 

 

 

                  var memStore = new Memory({

                      data: items,

                      idProperty: "ObjectID"

                  });

 

 

 

 

                  window.grid.set("store", memStore);

                  window.grid.set("sort", "ObjectID");

 

 

                  grid.on(".field-ObjectID:click", function (e) {

                      //retrieve the ObjectId when someone clicks on the magnifying glass 

                      if (e.target.alt) {

                          zoomRow(e.target.alt);

                      }

                  });

 

 

 

 

              });

 

 

 

 

 

 

          }

 

 

          function requestFailed(error) {

              console.log('failed');

          }

 

 

          function makeZoomButton(id) {

 

 

 

 

              var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/magnifier13.png' alt='" + id + "'";

              zBtn = zBtn + " width='18' height='18'></div>";

              return zBtn;

          }

 

 

          function zoomRow(id) {

              featureLayer.clearSelection();

              var query = new Query();

              query.objectIds = [id];

              featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {

                  //zoom to the selected feature 

                  if (features && features.length > 0) {

                      var feature = features[0]; //get the first feature 

                      map.centerAndZoom(feature.geometry, 13);

                  }

              });

          }

 

 

          var measurement = new Measurement({

              map: map

          }, dom.byId("measurementDiv"));

 

 

          measurement.startup();

 

 

          geocoder = new Geocoder({

              autoComplete: true,

              map: map

          }, "search");

          geocoder.startup();

 

 

          geocoder.on("select", showLocation);

 

 

      

 

 

          function showLocation(evt) {

              map.graphics.clear();

              var point = evt.result.feature.geometry;

              var symbol = new SimpleMarkerSymbol()

    .setStyle("square")

    .setColor(new Color([255, 0, 0, 0.5]));

              var graphic = new Graphic(point, symbol);

              map.graphics.add(graphic);

 

 

              map.infoWindow.setTitle("Search Result");

              map.infoWindow.setContent(evt.result.name);

              map.infoWindow.show(evt.result.feature.geometry);

         

 

 

      }});

      

    </script> 

  </head> 

  <body class="claro"> 

    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">

    

      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" > 

        <div style="position:absolute; right:20px; top:10px; z-Index:999;"> 

          <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'"> 

          

            <div id="measurementDiv"></div>

           

            <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>

          

          </div> 

        </div>

         <div id="search"> </div> 

      </div> 

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px"> 

      <div id="grid"></div> 

     </div> 

     </div>

  

  </body> 

 

 

</html> 

Outcomes