topic Re: Geocode Widget with Marker and Zoom in ArcGIS JavaScript Maps SDK Questions

Geocode Widget with Marker and Zoom

BrianPaulson1 — Tue, 17 Feb 2015 20:57:27 GMT

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">

<head>

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

samples on iOS devices-->

<title>Flickr</title>

<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>

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>

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

</div>

</div>

</div>

</body>

</html>

Re: Geocode Widget with Marker and Zoom

TimWitt2 — Sun, 12 Dec 2021 07:07:48 GMT

Brian,

you are missing "esri/Color"

<!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",
  "esri/Color",
        "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,
  Color,
        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>

Tim

Re: Geocode Widget with Marker and Zoom

JakeSkinner — Tue, 17 Feb 2015 21:07:15 GMT

Hi Brian,

It looks like you are missing a reference to the Color class. After you add this, it should work. Ex:

require([

"esri/map", "esri/Color", "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, Color, InfoTemplate, Geocoder,

Graphic, SimpleMarkerSymbol, Measurement, FeatureLayer,

PopupTemplate, esriRequest, Query, Point,

Graphic, PictureMarkerSymbol, on, array, Grid,

Selection, Memory, Button, parser, declare, dom)

{

Re: Geocode Widget with Marker and Zoom

TimWitt2 — Tue, 17 Feb 2015 21:09:36 GMT

Finally I beat you Jake Skinner ! Oh the sweet taste of victory