POST
|
This is pretty close to what I'm looking for, but I've got my coordinate conversion widget in an expand widget. I'm trying to open all of the coordinate conversions once I initially press the expand button. I hope that makes sense. So, once I press the expand button, I will see this (meaning that I would not have to hit the blue highlighted button to see all of the conversions): I combined your sample and an expand functionality to help illustrate 90% of what I'm looking for. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Expand widget - 4.14</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Expand",
"esri/widgets/BasemapGallery",
"esri/widgets/CoordinateConversion",
"esri/widgets/CoordinateConversion/support/Format",
"esri/widgets/CoordinateConversion/support/Conversion",
], function (Map, MapView, Expand, BasemapGallery, CoordinateConversion, Format, Conversion) {
var map = new Map({
basemap: "satellite"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 3
});
//Coordinates widget
var ccWidget = new CoordinateConversion({
view: view,
container: document.createElement("div"),
multipleConversions: true
});
var formatsName = ["dd", "ddm", "dms", "mgrs", "usng", "utm", "xy"];
for (var i = 0; i < ccWidget.formats.items.length; i++) {
var f = ccWidget.formats.items[i];
if (formatsName.indexOf(f.name) > -1) {
ccWidget.conversions.add(new Conversion({
format: f
}));
}
}
// Create an Expand instance and set the content
// property to the DOM node of the basemap gallery widget
// Use an Esri icon font to represent the content inside
// of the Expand widget
var ccExpand = new Expand({
view: view,
content: ccWidget
});
// Add the expand instance to the ui
view.ui.add(ccExpand, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
02-18-2020
06:25 PM
|
0
|
2
|
2336
|
POST
|
Thanks for the reply, it looks like you're referring Web AppBuilder. I'm using the ArcGIS JavaScript API.
... View more
02-17-2020
06:16 PM
|
0
|
4
|
2336
|
POST
|
I'm trying to find a way to open multiple conversions when I first open a coordinate conversion widget. I did not see a setting in the documentation that would allow for this. Is there a way to do this so that the user does not need to open multiple conversions at every page load? Thank you! Clinton
... View more
02-16-2020
05:16 PM
|
0
|
6
|
2496
|
POST
|
Thanks for the reply. I just tested this in 4.11, but no luck. The remove buttons still don't seem to be correctly linked.
... View more
03-19-2019
08:01 AM
|
0
|
1
|
488
|
POST
|
I am looking at the CoordinateConversion widget for the current 4.10 release. I am finding some unexpected behavior when adding and removing different coordinate systems. It seems the 'remove conversion' button does not remove the expected coordinate system format. It either removes the first or last coordinate system format (depending on top or bottom ui placement) regardless of which button I click. Is this expected behavior?
... View more
03-19-2019
07:55 AM
|
0
|
3
|
574
|
POST
|
Thank you Ian! Here is the updated code in case anybody is looking for this answer too.
// Set autoNavigate to false within searchWidget
autoNavigate: false
// Watch search result
searchWidget.on("select-result", function(event){
console.log(event)
var ext = event.result.extent;
var cloneExt = ext.clone();
console.log(cloneExt);
mapView.goTo({
target: event.result.feature,
extent: cloneExt.expand(1.75)
});
});
... View more
04-16-2018
08:07 AM
|
2
|
0
|
5302
|
POST
|
I have a map that uses the search widget to select a parcel, then zoom to it. The problem that I am experiencing is that the resulting goTo() method zooms in too close. My initial thought was to alter the zoomScale property, but that will not work since I have many different sized parcels in my data. I have disabled the native SearchWidget zoom, and tried to insert a custom zoom once a search item is selected. However, the search-result I seem to receive is an extent, and the goTo() method accepts a zoom or scale value. Is there a way to convert the resulting extent to my desired scale or zoom? Thanks, Clinton <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="ArcGIS JS v4, Calcite Maps and Bootstrap Example">
<title>PLI Zoom</title>
<!-- Calcite Maps Bootstrap -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.7.css">
<!-- Calcite Maps -->
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.7.css">
<!-- ArcGIS JS 4 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body class="calcite-maps calcite-nav-top">
<!-- Navbar -->
<nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-custom" style="background-color: #699999">
<!-- Menu -->
<div class="dropdown calcite-dropdown calcite-text-light calcite-bg-custom" role="presentation" style="background-color: #699999">
<a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="calcite-dropdown-toggle">
<span class="sr-only">Toggle dropdown menu</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
<ul class="dropdown-menu" role="menu">
<li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
<li><a role="menuitem" tabindex="0" href="#" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-list-alt"></span> Legend</a></li>
<li><a role="menuitem" tabindex="0" href="#" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a></li>
</ul>
</div>
<!-- Title -->
<div class="calcite-title calcite-overflow-hidden">
<span class="calcite-title-main">PLI Zoom</span>
<span class="calcite-title-divider hidden-xs"></span>
<span class="calcite-title-sub hidden-xs">A PLI parcel zoom tool</span>
</div>
<!-- Nav -->
<ul class="nav navbar-nav calcite-nav">
<li>
<div class="calcite-navbar-search calcite-search-expander">
<div id="searchWidgetDiv"></div>
</div>
</li>
</ul>
</nav>
<!--/.calcite-navbar -->
<!-- Map -->
<div class="calcite-map calcite-map-absolute">
<div id="mapViewDiv"></div>
</div>
<!-- /.calcite-map -->
<!-- Panels -->
<div class="calcite-panels calcite-panels-right calcite-text-light calcite-bg-custom panel-group" style="background-color: #699999">
<!-- Panel - Basemaps -->
<div id="panelInfo" class="panel collapse in">
<div id="headingInfo" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo" aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">About</span></a>
<a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
<div class="panel-body">
<p>This is a parcel zoom tool that functions to zoom to any public land parcel within the state of Florida. Use the search widget by choosing the "Florida Public Land Inventories Parcels" option within the navigation bar to search for a parcel by ID, city, or parcel name.</p>
</div>
</div>
</div>
<!-- Panel - Legend -->
<div id="panelLegend" class="panel collapse">
<div id="headingLegend" class="panel-heading" role="tab">
<div class="panel-title">
<a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseLegend" aria-expanded="false" aria-controls="collapseLegend"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><span class="panel-label">Legend</span></a>
<a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelLegend"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>
</div>
</div>
<div id="collapseLegend" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLegend">
<div class="panel-body">
<div id="legendDiv"></div>
</div>
</div>
</div>
</div>
<!-- /.calcite-panels -->
<script type="text/javascript">
var dojoConfig = {
packages: [{
name: "bootstrap",
location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
},
{
name: "calcite-maps",
location: "https://esri.github.io/calcite-maps/dist/js/dojo"
}]
};
</script>
<!-- ArcGIS JS 4 -->
<script src="https://js.arcgis.com/4.7/"></script>
<script>
require([
// ArcGIS
"esri/Map",
"esri/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/views/MapView",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Graphic",
// Widgets
"esri/widgets/Home",
"esri/widgets/Zoom",
"esri/widgets/Compass",
"esri/widgets/Search",
"esri/widgets/Legend",
"esri/widgets/BasemapToggle",
"esri/widgets/ScaleBar",
"esri/widgets/Attribution",
"esri/tasks/Locator",
// Bootstrap
"bootstrap/Collapse",
"bootstrap/Dropdown",
// Calcite Maps
"calcite-maps/calcitemaps-v0.7",
// Calcite Maps ArcGIS Support
"calcite-maps/calcitemaps-arcgis-support-v0.7",
"dojo/_base/Color",
"dojo/number",
"dojo/domReady!"
], function(Map, PopupTemplate, FeatureLayer, MapImageLayer, MapView, SimpleFillSymbol, SimpleLineSymbol, Graphic, Home, Zoom, Compass, Search, Legend, BasemapToggle, ScaleBar, Attribution, Locator, Collapse, Dropdown, CalciteMaps, CalciteMapArcGISSupport, Color, number) {
/******************************************************************
*
* Create the map, view and widgets
*
******************************************************************/
var parcelsTemplate = {
title: 'Owner: {own_name}',
content:
"<p><b>Parcel ID:</b> {parcel_id}</p>" +
"<p><b>State Parcel ID:</b> {state_par_}</p>" +
"<p><b>PLI Code:</b> {pli_code}</p>" +
"<p><b>Size:</b> {no_lnd_unt:NumberFormat(places: 2)} Acres<p>" +
"<p><b>Value:</b> ${av_nsd:NumberFormat(places: 2)}</p>" +
"<p><b>TRS:</b> {twn} {rng} {sec}</p>" +
"<p><b>Legal Description:</b> {s_legal}</p>" ,
actions: [{
title: "Visit the FL Public Lands Inventory Website",
id: "pliWebsite",
className: "esri-icon-launch-link-external"
}]
};
var parcelsSearchTemplate = {
title: 'Owner: {own_name}',
content:
"<p><b>Parcel ID:</b> {PARCEL_ID}</p>" +
"<p><b>State Parcel ID:</b> {STATE_PAR_}</p>" +
"<p><b>PLI Code:</b> {PLI_CODE}</p>" +
"<p><b>Size:</b> {NO_LND_UNT} Acres<p>" +
"<p><b>Value:</b> ${AV_NSD}</p>" +
"<p><b>TRS:</b> {TWN} {RNG} {SEC}</p>" +
"<p><b>Legal Description:</b> {S_LEGAL}</p>" ,
actions: [{
title: "Visit the FL Public Lands Inventory Website",
id: "pliWebsite",
className: "esri-icon-launch-link-external"
}]
};
var highlightSymbol = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([66, 244, 217]), 1);
var parcelsLayerURL = "https://admin205.ispa.fsu.edu/arcgis/rest/services/PLI/PLI_2017/MapServer";
var parcelsLayer = new MapImageLayer ({
url: parcelsLayerURL,
title: "Parcels Layer",
sublayers: [{
id: 0,
title: "PLI Parcels",
visible: true,
minScale: 100000,
popupTemplate: parcelsTemplate
}]
});
// Map
var map = new Map({
basemap: "topo",
layers: [parcelsLayer]
});
// View
var mapView = new MapView({
container: "mapViewDiv",
map: map,
padding: {
top: 50,
bottom: 0
},
center: [-82.28, 27.8],
zoom: 7,
ui: {components: []}
});
// Popup and panel sync
mapView.when(function(){
CalciteMapArcGISSupport.setPopupPanelSync(mapView);
});
// Search - add to navbar
var searchWidget = new Search({
container: "searchWidgetDiv",
view: mapView,
allPlaceHolder: "Text search for Parcel ID",
sources: [{
featureLayer: {
url: parcelsLayerURL,
popupTemplate: parcelsSearchTemplate
},
searchFields: ["PARCEL_ID", "STATE_PAR_", "OWN_CITY", "OWN_NAME"],
suggestionTemplate: "PID: {parcel_id}, State PID: {state_par_}, City: {own_city}, Parcel Name: {own_name}",
displayField: "PLI_CODE",
exactMatch: false,
outFields: ["PLI_CODE", "PARCEL_ID", "OWN_NAME", "OWN_STATE", "STATE_PAR_", "NO_LND_UNT", "AV_NSD", "TWN", "SEC", "S_LEGAL", "RNG"],
name: "Florida Public Land Inventories Parcels",
placeholder: "Search by Parcel ID, City, or County",
resultGraphicEnabled: true,
resultSymbol: {
type: "simple-line",
width: 2,
color: [0, 255, 197, 1]
},
autoNavigate: false
}, {
locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
singleLineFieldName: "SingleLine",
name: "Geocoder",
localSearchOptions: {
minScale: 300000,
distance: 50000
},
placeholder: "Search Geocoder",
maxResults: 3,
maxSuggestions: 6,
suggestionsEnabled: true,
minSuggestCharacters: 0,
countryCode: "US"
}],
});
CalciteMapArcGISSupport.setSearchExpandEvents(searchWidget);
// Map widgets
var home = new Home({
view: mapView
});
mapView.ui.add(home, "top-left");
var zoom = new Zoom({
view: mapView
});
mapView.ui.add(zoom, "top-left");
var compass = new Compass({
view: mapView
});
mapView.ui.add(compass, "top-left");
var basemapToggle = new BasemapToggle({
view: mapView,
secondBasemap: "satellite"
});
mapView.ui.add(basemapToggle, "bottom-right");
var scaleBar = new ScaleBar({
view: mapView
});
mapView.ui.add(scaleBar, "bottom-left");
var attribution = new Attribution({
view: mapView
});
mapView.ui.add(attribution, "manual");
// Panel widgets - add legend
var legendWidget = new Legend({
container: "legendDiv",
view: mapView
});
// Watch search result
searchWidget.on("select-result", function(event){
console.log(event)
mapView.goTo({
target: event.result.feature,
//zoom:
//scale:
});
});
// Popup Link event listener
mapView.popup.on("trigger-action", function (event) {
if (event.action.id === "pliWebsite") {
window.open("http://floridapli.net/");
}
});
});
</script>
</body>
</html>
... View more
04-13-2018
12:05 PM
|
0
|
2
|
11055
|
POST
|
Robert, With a little bit of tweaking, this worked perfectly. It is also easily expandable to 2+ sources. Thank you very much!
... View more
04-04-2018
07:40 AM
|
0
|
2
|
1407
|
POST
|
I am looking for a way to perform an identifytask for multiple services using verion 4.6 of the Javascript API. I am trying to integrate this into an existing project where we can perform the same multiple source identify on a variety of different geometries (mapPoint, selected polygon/s). My initial thought was to separate the identifyParameters, identifyTask execution and mapping layername to template, and showPopup into a series of promises. This would enable to me to change the parameters and source URL without needing to repeat myself. I also thought it might be a good idea to stick the resulting features into an array that I could then pass to my showPopup function. My current attempt is just trying to get both identifyTasks to work in any form. It doesn't work, but I don't want to come here with no work to show. Here is what I have, any help would be appreciated! <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>IdentifyTask - 4.6</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer",
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters",
"dojo/_base/array",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
], function(
Map, MapView, TileLayer, FeatureLayer,
IdentifyTask, IdentifyParameters,
arrayUtils, on, dom
) {
var identifyTask, params;
var NGSpopupTemplate = {
title: 'NGS Control Points: {objectid}',
content: "<p>(Latitude, Longitude): {dec_lat}, {dec_long}</p>" +
"<p>County: {county}</p>" +
"<p>PID: {pid}</p>" +
"<p>Data Source: <a target='_blank' href={data_srce}>here</a></p>" +
"<p>Datasheet: <a href={datasheet2}>here</a></p>",
actions: [{
title: "Visit NGS website",
id: "ngsWebsite",
className: "esri-icon-launch-link-external"
}]
};
// URL to the map service where the identify will be performed
var soilURL =
"https://services.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer";
// Add the map service as a TileLayer for fast rendering
// Tile layers are composed of non-interactive images. For that reason we'll
// use IdentifyTask to query the service to add interactivity to the app
var parcelsLyr = new TileLayer({
url: soilURL,
opacity: 0.85
});
var controlPointsURL = "https://admin205.ispa.fsu.edu/arcgis/rest/services/LABINS/Control_Lines_EPSG_3857/MapServer"
var controlPointsLayer = new FeatureLayer({
url: controlPointsURL,
title: "NGS Control Points",
visible: true,
//listMode: "hide",
popupTemplate: NGSpopupTemplate
});
var map = new Map({
basemap: "osm"
});
//map.add(parcelsLyr);
map.add(controlPointsLayer);
var view = new MapView({
map: map,
container: "viewDiv",
center: [-82.5018310546875, 29.559123451577964],
zoom: 7
});
var identifyElements = [];
view.when(function() {
// executeIdentifyTask() is called each time the view is clicked
on(view, "click", executeIdentifyTask);
// Create identify task for the specified map service
identifyTask = new IdentifyTask(soilURL);
// Set the parameters for the Identify
params = new IdentifyParameters();
params.tolerance = 3;
params.layerIds = [0, 1, 2];
params.layerOption = "all";
params.width = view.width;
params.height = view.height;
});
// Executes each time the view is clicked
function executeIdentifyTask(event) {
// Set the geometry to the location of the view click
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
//dom.byId("viewDiv").style.cursor = "wait";
// This function returns a promise that resolves to an array of features
// A custom popupTemplate is set for each feature based on the layer it
// originates from
identifyTask.execute(params).then(function(response) {
console.log(response);
var results = response.results;
return arrayUtils.map(results, function(result) {
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Soil Survey Geographic') {
feature.popupTemplate = { // autocasts as new PopupTemplate()
title: "{Map Unit Name}",
content: "<b>Dominant order:</b> {Dominant Order} ({Dom. Cond. Order %}%)" +
"<br><b>Dominant sub-order:</b> {Dominant Sub-Order} ({Dom. Cond. Suborder %}%)" +
"<br><b>Dominant Drainage Class:</b> {Dom. Cond. Drainage Class} ({Dom. Cond. Drainage Class %}%)" +
"<br><b>Farmland Class:</b> {Farmland Class}"
};
}
else if (layerName === 'State Soil Geographic') {
feature.popupTemplate = { // autocasts as new PopupTemplate()
title: "{Map Unit Name}",
content: "<b>Dominant order:</b> {Dominant Order} ({Dominant %}%)" +
"<br><b>Dominant sub-order:</b> {Dominant Sub-Order} ({Dominant Sub-Order %}%)"
};
}
else if (layerName === 'Global Soil Regions') {
feature.popupTemplate = { // autocasts as new PopupTemplate()
title: layerName,
content: "<b>Dominant order:</b> {Dominant Order}" +
"<br><b>Dominant sub-order:</b> {Dominant Sub-Order}"
};
}
identifyElements.push(feature);
return feature;
});
}).then(function(response) {
console.log(identifyElements);
// Create identify task for the specified map service
identifyTask = new IdentifyTask(controlPointsURL);
// Set the parameters for the Identify
params = new IdentifyParameters();
params.tolerance = 5;
params.layerIds = [0];
params.layerOption = "all";
params.width = view.width;
params.height = view.height;
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
console.log(params);
identifyTask.execute(params).then(function(response2) {
//console.log(response2);
var results = response2.results;
//console.log(results)
return arrayUtils.map(results, function(result) {
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
feature.popupTemplate = NGSpopupTemplate;
//console.log(feature);
identifyElements.push(feature);
//console.log(feature);
return feature;
})
})
//return response2;
}).then(showPopup); // Send the array of features to showPopup()
// Shows the results of the Identify in a popup once the promise is resolved
function showPopup(response) {
console.log(response);
if (response.length > 0) {
view.popup.open({
features: response,
location: event.mapPoint
});
}
dom.byId("viewDiv").style.cursor = "auto";
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
04-02-2018
02:31 AM
|
0
|
4
|
2003
|
POST
|
I wanted to post an update to this. The function was failing because of differing GCS. After changing this, all is well and I was able to buffer.
... View more
03-13-2018
08:45 AM
|
2
|
0
|
167
|
POST
|
Yes, that is correct. I was puzzled when I searched that wkid too.
... View more
03-01-2018
11:41 AM
|
0
|
2
|
995
|
POST
|
Ken, Forgive my ignorance, but does this deprecated spatial reference now mean that the geometryEngine will not work in this case? In which case, I'd either have to use the GeometryService or change my layer to conform to this spatial reference requirement, correct? Thank you, Clinton
... View more
03-01-2018
11:36 AM
|
0
|
4
|
995
|
POST
|
Ken, the spatial reference is listed as: Spatial Reference: 102113 (3785) This seems as though it is a deprecated form of Web Mercator?
... View more
03-01-2018
11:20 AM
|
0
|
6
|
995
|
POST
|
John, While I do feel very silly for that little typo, that did not make it work. I will update the code in my question to reflect that correction. Thank you!
... View more
03-01-2018
10:47 AM
|
0
|
8
|
995
|
Title | Kudos | Posted |
---|---|---|
2 | 04-16-2018 08:07 AM | |
1 | 02-23-2018 11:10 AM | |
2 | 03-13-2018 08:45 AM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:25 AM
|