Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About BrianPaulson1
BrianPaulson1
Deactivated User
since
01-27-2015
11-11-2020
9
Posts created
0
Kudos given
0
Solutions
0
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by BrianPaulson1
|
POST
|
Robert, Thanks for the response and clear explanation. I have a lot of learning to do. When I tried your updated code, I get a blank map. Any ideas why? Thanks again
... View more
09-25-2015
12:01 PM
|
0
|
2
|
887
|
|
POST
|
I am new to Javascript API. I have a project where I am trying to get the drawing toolbar with buffer to work exactly like this Geometry Service - Buffer | ArcGIS API for JavaScript in my project. I got the buttons added and thought I added all the functions, but when I click on the buttons, nothing is happening. I am sure I am missing something simple, but I haven't been able to figure it out. I would greatly appreciate any help. <!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;
}
#rightPane {
color: #000;
width: 250px;
padding-bottom: 15px;
}
.details {
font-size: 14px;
font-weight: 600;
padding-bottom: 20px;
}
button1 {
margin: 2px;
cursor: pointer;
}
#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.14/"></script>
<script>
var map, geocoder, grid, tb;
require([
"esri/map",
"esri/InfoTemplate",
"esri/dijit/Geocoder",
"esri/graphic",
"dojo/query",
"esri/config",
"esri/geometry/normalizeUtils",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"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, query, esriConfig, normalizeUtils, GeometryService, BufferParameters, Draw, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol,
Measurement,
FeatureLayer,
PopupTemplate,
esriRequest,
Query,
Point,
Graphic,
PictureMarkerSymbol,
on,
Color,
array,
Grid, Selection, Memory,
Button,
parser, declare, dom
) {
parser.parse();
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.io.alwaysUseProxy = false;
//Setup button click handlers
on(dom.byId("clearGraphics"), "click", function () {
if (map) {
map.graphics.clear();
}
});
//click handler for the draw tool buttons
query(".tool").on("click", function (evt) {
if (tb) {
tb.activate(evt.target.id);
}
});
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
});
map.on("load", initToolbar);
function initToolbar(evtObj) {
tb = new Draw(evtObj.map);
tb.on("draw-end", doBuffer);
}
function doBuffer(evtObj) {
tb.deactivate();
var geometry = evtObj.geometry,
symbol;
switch (geometry.type) {
case "point":
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
break;
case "polyline":
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
break;
case "polygon":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
break;
}
var graphic = new Graphic(geometry, symbol);
map.graphics.add(graphic);
//setup the buffer parameters
var params = new BufferParameters();
params.distances = [dom.byId("distance").value];
params.outSpatialReference = map.spatialReference;
params.unit = GeometryService[dom.byId("unit").value];
//normalize the geometry
normalizeUtils.normalizeCentralMeridian([geometry]).then(function (normalizedGeometries) {
var normalizedGeometry = normalizedGeometries[0];
if (normalizedGeometry.type === "polygon") {
//if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct.
esriConfig.defaults.geometryService.simplify([normalizedGeometry], function (geometries) {
params.geometries = geometries;
esriConfig.defaults.geometryService.buffer(params, showBuffer);
});
} else {
params.geometries = [normalizedGeometry];
esriConfig.defaults.geometryService.buffer(params, showBuffer);
}
});
}
function showBuffer(bufferedGeometries) {
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.65]), 2
),
new Color([255, 0, 0, 0.35])
);
array.forEach(bufferedGeometries, function (geometry) {
var graphic = new Graphic(geometry, symbol);
map.graphics.add(graphic);
});
}
//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;
attr["test"] = "https://maps.google.com/maps?q=" + item.latitude + "," + item.longitude + "&output=classic&dg=brw"
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 id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
<button type="button" class="tool" id="line">Line</button>
<button type="button" class="tool" id="polyline">Polyline</button>
<button type="button" class="tool" id="freehandpolyline">Freehand Polyline</button>
<br />
<button type="button" class="tool" id="polygon">Polygon</button>
<button type="button" class="tool" id="freehandpolygon">Freehand Polygon</button>
<br />
<hr />
<div><b>Buffer Parameters</b></div>
Distance:
<input type="text" id="distance" size="5" value="25" />
<select id="unit" style="width:100px;">
<option value="UNIT_STATUTE_MILE">Miles</option>
<option value="UNIT_FOOT">Feet</option>
<option value="UNIT_KILOMETER">Kilometers</option>
<option value="UNIT_METER">Meters</option>
<option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
<option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
<option value="UNIT_DEGREE">Degrees</option>
</select>
<br />
<button type="button" id="clearGraphics">Clear Graphics</button>
</div>
</div>
</body>
</html> Message was edited by: Robert Scheitlin, GISP
... View more
09-25-2015
10:13 AM
|
0
|
4
|
3832
|
|
POST
|
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>
... View more
02-17-2015
12:57 PM
|
0
|
3
|
4188
|
|
POST
|
I was able to duplicate this example:Feature collection | ArcGIS API for JavaScript using point data in a SQL Server Table (Web service which returns Json format data from SQL Server). I am wondering how I would make it so that the last point entered is a different color than the rest of the points? I am guessing I would have to use UniqueValueRenderer and assign the Maximum ObjectID Value a different color? That was the route I was going, but couldn't get it to work. Any help would be greatly appreciated. Thanks
... View more
02-06-2015
06:12 AM
|
0
|
1
|
4133
|
|
POST
|
I am trying to insert the measurement widget to a project I am working on. Below is my project code from another example. How do I get the measurement tool added to the map? I have followed the example here:Measurement | ArcGIS API for JavaScript , but I must be doing something wrong since the tool doesn't load. Sorry I am a new to arcgis javascript and I am probably missing something basic. Thanks <!DOCTYPE html> <html> <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; } .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; } </style> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://js.arcgis.com/3.12/"></script> <script> var map, grid; require([ "esri/map", "esri/layers/FeatureLayer", "esri/dijit/PopupTemplate", "esri/request", "esri/tasks/query", "esri/geometry/Point", "esri/graphic", "dojo/on", "dojo/_base/array", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dijit/form/Button", "dojo/parser", "dojo/_base/declare", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, FeatureLayer, PopupTemplate, esriRequest, Query, Point, Graphic, on, array, Grid, Selection, Memory, Button, parser, declare ) { var featureLayer; map = new Map("map", { basemap: "satellite", center: [-46.807, 32.553], zoom: 3 }); //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": "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', 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://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); }); 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: "Title", field: "title" }]; 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/zoom.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, 10); } }); } }); </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> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px"> <div id="grid"></div> </div> </div> </body> </html>
... View more
01-30-2015
11:16 AM
|
0
|
3
|
4252
|
|
POST
|
Kelly, Thank you. You and Jake have been very helpful. I now am displaying my data exactly as I wished.
... View more
01-27-2015
11:30 AM
|
0
|
0
|
849
|
|
POST
|
Jake, Thank you so much for answering with the code. You have made my day. I am looking at this example:Zoom to Point using Show Find Task results in DataGrid Sample to try and figure out how to zoom to the feature(point) from the datagrid. I am guessing I have to figure out the extent of the points.
... View more
01-27-2015
10:52 AM
|
0
|
2
|
849
|
|
POST
|
I was able to duplicate this example: Feature collection | ArcGIS API for JavaScript using point data in a SQL Server Table (Web service which returns Json format data from SQL Server). I wanted to take the Feature collection example a step further where I could add a interactive datagrid/map that is similar to this example: Add zoom button to DataGrid . First, is a interactive datagrid/map possible from a Json feature collection? All the examples I find require a feature layer that is on a spatial server. If so, could someone please point me in the general direction to how this can be accomplished. Sorry I am new to this and might have asked something really basic. Any help would be greatly appreciated since I have spent a lot of time trying to figure this out. Thanks
... View more
01-27-2015
08:38 AM
|
0
|
5
|
4914
|
Activity Feed
- Posted Re: Drawing Tool with Buffer not working in my project on ArcGIS JavaScript Maps SDK Questions. 09-25-2015 12:19 PM
- Posted Re: Drawing Tool with Buffer not working in my project on ArcGIS JavaScript Maps SDK Questions. 09-25-2015 12:01 PM
- Posted Drawing Tool with Buffer not working in my project on ArcGIS JavaScript Maps SDK Questions. 09-25-2015 10:13 AM
- Tagged Drawing Tool with Buffer not working in my project on ArcGIS JavaScript Maps SDK Questions. 09-25-2015 10:13 AM
- Tagged Drawing Tool with Buffer not working in my project on ArcGIS JavaScript Maps SDK Questions. 09-25-2015 10:13 AM
- Tagged Drawing Tool with Buffer not working in my project on ArcGIS JavaScript Maps SDK Questions. 09-25-2015 10:13 AM
- Tagged Drawing Tool with Buffer not working in my project on ArcGIS JavaScript Maps SDK Questions. 09-25-2015 10:13 AM
- Posted Geocode Widget with Marker and Zoom on ArcGIS JavaScript Maps SDK Questions. 02-17-2015 12:57 PM
- Tagged Geocode Widget with Marker and Zoom on ArcGIS JavaScript Maps SDK Questions. 02-17-2015 12:57 PM
- Tagged Geocode Widget with Marker and Zoom on ArcGIS JavaScript Maps SDK Questions. 02-17-2015 12:57 PM
- Posted UniqueValueRenderer on ArcGIS JavaScript Maps SDK Questions. 02-06-2015 06:12 AM
- Tagged UniqueValueRenderer on ArcGIS JavaScript Maps SDK Questions. 02-06-2015 06:12 AM
- Tagged UniqueValueRenderer on ArcGIS JavaScript Maps SDK Questions. 02-06-2015 06:12 AM
- Posted Measurement Widget Help on ArcGIS JavaScript Maps SDK Questions. 01-30-2015 11:16 AM
- Tagged Measurement Widget Help on ArcGIS JavaScript Maps SDK Questions. 01-30-2015 11:16 AM
- Tagged Measurement Widget Help on ArcGIS JavaScript Maps SDK Questions. 01-30-2015 11:16 AM
- Posted Re: Datagrid and Map from JSON web service. on ArcGIS JavaScript Maps SDK Questions. 01-27-2015 11:30 AM
- Posted Re: Datagrid and Map from JSON web service. on ArcGIS JavaScript Maps SDK Questions. 01-27-2015 10:52 AM
- Posted Datagrid and Map from JSON web service. on ArcGIS JavaScript Maps SDK Questions. 01-27-2015 08:38 AM
- Tagged Datagrid and Map from JSON web service. on ArcGIS JavaScript Maps SDK Questions. 01-27-2015 08:38 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:24 AM
|