I am new to ArcGIS API Javascript and I have this task given to edit the feature layer atrribute through WFS layer.Problem is I don't know how to display map using WFS layer.Please help!
You need to use WFSLayer to add WFS service to map. Below is a sample provided by ESRI. Take a look at it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>WFS Layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map;
require(["esri/map", "esri/InfoTemplate","esri/layers/WFSLayer", "esri/config", "dojo/domReady!"], function(Map, InfoTemplate, WFSLayer, esriConfig) {
map = new Map("map", {
basemap: "topo",
center: [-121.936, 37.346],
zoom: 10
});
var layer = new WFSLayer();
var opts = {
"url": "http://www.hcpmaps.com:8080/geoserver/HCP/wfs",
"version": "1.1.0",
"name": "citylimits",
"wkid": 3857,
"maxFeatures": 100
};
esriConfig.defaults.io.proxyUrl = "/sproxy/";
layer.fromJson(opts);
map.addLayer(layer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
UPDATE: updated with different wfs service which works.
Related
I have the following code that is currently working. I have been looking all over and cannot find how to change the icon way from the tiny dot that defaults on the location. The code below is set to a specific address on page load.
I have tried PictureMarkerSymbol as you'll see I have that loaded into the function, but I'm not getting the right logic.
I figured this would be the easy part of using arcgis, but it's proving to be difficult.
thanks!
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<title>ArcGIS API for JavaScript</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
'esri/config',
'esri/Map',
'esri/views/MapView',
'esri/symbols/PictureMarkerSymbol',
'esri/widgets/Search',
'esri/layers/FeatureLayer',
], function (
esriConfig,
Map,
MapView,
PictureMarkerSymbol,
Search,
FeatureLayer
) {
esriConfig.apiKey =
'API-KEY';
const map = new Map({
basemap: 'arcgis-navigation',
});
const view = new MapView({
container: 'viewDiv',
map: map,
center: [-77.050636, 38.889248],
zoom: 13,
});
const search = new Search({
//Add Search widget
view: view,
});
view.ui.add(search, 'top-right'); //Add to the map
searchWidget = new Search({
view: view,
searchTerm: '43 Valley Oak Ct',
popupEnabled: false,
});
view.ui.add(searchWidget, 'bottom-right');
view.when(() => {
searchWidget.search();
});
});
</script>
It looks as the search widget resultGraphic is readonly, but it looks like you can specify a collection of SearchSource and provide it a symbol. You can almost use the default setting provided in an example under sources in documentation. Below is an example. You can use this tool for creating symbols.
<!--
To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.
Sign up for a free account and get an API key.
https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Search widget with multiple sources | Sample | ArcGIS API for JavaScript 4.20</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Search", "esri/tasks/Locator", "esri/symbols/SimpleMarkerSymbol"], (
Map,
MapView,
FeatureLayer,
Search,
Locator,
SimpleMarkerSymbol,
) => {
const map = new Map({
basemap: "dark-gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-97, 38], // lon, lat
scale: 10000000
});
var marker = new SimpleMarkerSymbol({ color: [203, 52, 52, 0.93] });
const searchWidget = new Search({
view: view,
searchTerm: '43 Valley Oak Ct',
popupEnabled: false,
sources: [
{
locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
singleLineFieldName: "SingleLine",
outFields: ["Addr_type", "Match_addr", "StAddr", "City"],
name: "ArcGIS World Geocoding Service",
placeholder: "Find address or place",
resultSymbol: marker,
}
]
});
searchWidget.viewModel.includeDefaultSources = false;
// Add the search widget to the top left corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
view.when(() => {
searchWidget.search();
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I need to create a simple webpage where I can see the result of filters in arc online into it instead of creating the filter each day. By that, the results will be refreshed automatically each day when I log in into arc gis.
I heard that there is an API, is my idea is feasible ?
Assuming you want to filter a FeatureLayer--the original question is unclear, but FeatureLayer seems logical--you should set the definitionExpression property, as described in the FeatureLayer documentation.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer - 4.3</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#filterDiv {
position: absolute;
top: 12px;
right: 12px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map,
MapView,
FeatureLayer,
dom,
on
) {
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
container: "viewDiv",
map: map,
extent: {
xmin: -9177811,
ymin: 4247000,
xmax: -9176791,
ymax: 4247784,
spatialReference: 102100
}
});
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
definitionExpression: "Sci_Name = 'Ulmus pumila'"
});
map.add(featureLayer);
view.then(function() {
on(dom.byId("filterInput"), "change", updateFilter);
function updateFilter(ev) {
featureLayer.definitionExpression = ev.target.checked ?
"Sci_Name = 'Ulmus pumila'" :
undefined;
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="filterDiv">
<label>Filter
<input id="filterInput" type="checkbox" checked="yes">
</label>
</div>
</body>
</html>
I add some markers on Esri map and want to show map at zoom level where all markers are visible. I calculated minimum and maximum lat-lng and set the extent. But its not working.
Given Coordinates
lat, lon:41.984440, -87.827278
lat, lon:41.874489, -87.705772
calculated min-max:
xMax:"-87.827278"
xMin:"-87.705772"
yMax:"41.984440"
yMin:"41.874489"
expected result:
> EsriSetMapExtent:function(obj)
> {
> var extent = new esri.geometry.Extent(obj.xMin, obj.yMin, obj.xMax, obj.yMax);
> m.esriMap.setExtent(extent);
> },
The values of xMin and xMax are reversed., Only the X-axis, please check the function which performs the calculations. If you change them it will work. Below is the working sample
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
require(["esri/map","esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol",
"esri/Color", "esri/graphic", "dojo/domReady!"], function(Map, Extent, SpatialReference, Point, SimpleMarkerSymbol, Color, Graphic) {
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-87.705772, 41.874489], // longitude, latitude
zoom: 13
});
map.on('load', function(evt){
var pt = new Point(-87.705772, 41.874489, new SpatialReference({wkid:4326}))
var sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(
new Color([255,0,0,0.5]));
var graphic = new Graphic(pt,sms);
map.graphics.add(graphic);
pt = new Point(-87.827278, 41.984440, new SpatialReference({wkid:4326}))
sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(
new Color([0,255,0,0.5]));
graphic = new Graphic(pt,sms);
map.graphics.add(graphic);
})
var extent = new Extent(-87.827278, 41.874489, -87.705772, 41.984440, new SpatialReference({ wkid:4326 }));
map.setExtent(extent, true);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
The solution that worked for me was:
const geoPoint = new Point(Longitude, Latitude);
if (!map.extent.contains(geoPoint)) {
// point not in view
}
I am working on a php application where I used 'arcgis' API for loading a map. please find the URL below:
http://js.arcgis.com/3.11/
In order to load an arcgis map in my application, I must use
dojo.require("esri.map");
So In my single page PHP application I added this require statement as below:
<script type="text/javascript">
dojo.require("esri.map");
</script>
And in a js file I gave the map is loaded as shown below:
var myOptions = {
maxZoom: 20,
minZoom: 3,
zoom:5,
isZoomSlider: false,
sliderStyle: "large",
sliderPosition: "top-right"
};
this.map = new esri.Map("mapDiv", myOptions);
But when I run this application, I am getting an error stated "Uncaught TypeError: undefined is not a function" at the line "this.map = new esri.Map("mapDiv", myOptions);"
If I open developer tools run the same code by keeping breakpoints at require and esri.Map statements, I could see the map is getting loaded. But If I run it without opening developer tools then I am facing this issue.
Why dojo.require statement is not working as expected?
Whats wrong am I doing??
Kindly reply
You are trying to load map module with legacy module require. Try require Map using AMD syntax as shown in docs:
require(["esri/map"], function(Map) { /* code goes here */ });
You need to wrap your JavaScript code in a call to dojo.ready.
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>JavaScript in Separate File</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#mapDiv{padding:0;}
</style>
<script>var dojoConfig = {parseOnLoad: true};</script>
<script src="//js.arcgis.com/3.11/"></script>
<script src="code.js"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.layers.agstiled");
</script>
</head>
<body class="claro" >
<div id="mapDiv"></div>
</body>
</html>
code.js file:
dojo.ready(function() {
var myOptions = {
maxZoom: 20,
minZoom: 3,
zoom:5,
isZoomSlider: false,
sliderStyle: "large",
sliderPosition: "top-right"
};
this.map = new esri.Map("mapDiv", myOptions);
var layer = new esri.layers.ArcGISTiledMapServiceLayer(
"http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
this.map.addLayer(layer);
});
I have created a exact sample example and when trying to run it . I am getting lots of errors. Can someone show me how to fix this?
https://developers.arcgis.com/javascript/jssamples/gp_popuplink.html
here is one of the Error:
NS_ERROR_DOM_BAD_URI: Access to restricted URI denied { response={...}, xhr=XMLHttpRequest, code=1012, mor
I am also including the entire working code below:
<!DOCTYPE html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html,body,#mapDiv,.map.container{
padding:0;
margin:0;
height:100%;
}
#legendDiv{
background-color: #fff;
position: absolute !important;
z-index: 99;
top:10px;
right:20px;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.11compact/"></script>
<script>
var map,
webmapId = "1a40fa5cc1ab4569b79f45444d728067";
require([
"esri/map",
"esri/arcgis/utils",
"esri/dijit/Legend",
"dojo/domReady!"
], function (Map, arcgisUtils, Legend) {
arcgisUtils.createMap(webmapId, "mapDiv").then(function (response) {
map = response.map;
var legend = new Legend({
map: map,
layerInfos:(arcgisUtils.getLegendLayers(response))
}, "legendDiv");
legend.startup();
});
});
</script>
</head>
<body>
<div id="mapDiv"></div>
<div id="legendDiv"></div>
</body>
</html>
You're missing an essential part of configuration. As can be seen in the error you're getting, your esrimap is fetching a bad url. That's because you haven't setup your server as can be seen in the example you're referring to:
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
config.defaults.geometryService = new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
Here's a simple stripped down example on Plunker.
var map;
require([
"esri/map",
"esri/arcgis/utils",
"esri/tasks/GeometryService",
"esri/config",
], function(
Map,
arcgisUtils,
GeometryService,
config
) {
config.defaults.geometryService = new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
config.defaults.io.proxyUrl = "/proxy/";
arcgisUtils.createMap("a193c5459e6e4fd99ebf09d893d65cf0", "mapDiv").then(function(response){
window.map = response.map;
});
});