I am trying to reproduce the esri/dijit/Search tutorial that is new in the 3.13 release of the ArcGIS API for JavaScript with one of my own layers.
Esri Sample
<!DOCTYPE html>
<html><link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<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>ArcGIS API for JavaScript | Search widget with multiple sources</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/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: 74px;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
require([
"esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/SpatialReference", "esri/geometry/Extent", "dojo/domReady!"
], function (Map, Search, FeatureLayer, InfoTemplate, SpatialReference, Extent) {
var map = new Map("map", {
basemap: "gray",
center: [-97, 38], // lon, lat
zoom: 5
});
var s = new Search({
enableButtonMode: true, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: false,
map: map
}, "search");
var sources = [];
sources.push({
featureLayer: new FeatureLayer("http://maps.eastriding.gov.uk/arcgis/rest/services/GISIntranet/MapServer/0"),
searchFields: ["ADDRESS_WITHOUT_BREAKS"],
displayField: "ADDRESS_WITHOUT_BREAKS",
exactMatch: false,
name: "ADDRESS_WITHOUT_BREAKS",
outFields: ["*"],
placeholder: "ADDRESS_WITHOUT_BREAKS",
maxResults: 6,
maxSuggestions: 6,
enableSuggestions: true,
minCharacters: 0
});
//Set the sources above to the search widget
s.set("sources", sources);
s.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
I am having with the suggestions part if it. If I use the default source for this it will for fine. I will enter the first few character in the textbox and it will produce a number of suggestion that I can choose from. When I use my own source (as above) there is no suggestions that appear. I have check for errors and there are none. I have also checked the network in my Dev tools and the suggestions part is not firing off a query like the default source does.
I am wondering if I need something special setting up on my layer or should it just work
Thanks
From the API documentation
Working with suggestions is only available if working with a 10.3 geocoding service that has the suggest capability loaded or a 10.3 feature layer that supports pagination, i.e. supportsPagination = true.
Looking at your server you are running 10.2.2 so you need to move to 10.3 and make sure you allow pagination for your service in order to get this capability.
Related
I'm developing new web and I want to consume WMTS services with ArcGIS javascript API4
WMTSLayer in Javascript API 4.11 seems not working when spatialReference EPSG:25830 is selected.
The problem is that the request is generating by the API is incorrect, Tilerow parameter is wrong.
The request is being sent is this. http://www.ign.es/wmts/ign-base?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=IGNBaseTodo&STYLE=default&FORMAT=image%2Fjpeg&TILEMATRIXSET=EPSG%3A25830&TILEMATRIX=18&TILEROW=236256&TILECOL=32268
And must be...
http://www.ign.es/wmts/ign-base?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=IGNBaseTodo&STYLE=default&FORMAT=image%2Fjpeg&TILEMATRIXSET=EPSG%3A25830&TILEMATRIX=18&TILEROW=32374&TILECOL=32268
Here is my code example.
JSFIDDLE
or
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<title>Select WMTSLayer sublayer - 4.11</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 95%; /* allow space for sublayer switcher */
width: 100%;
}
select,
label {
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
#selectDiv {
background-color: lightgrey;
padding: 10px;
}
#theLabel {
visibility: hidden; /* hide until populated */
}
.esri-layer-list {
width: 310px;
}
</style>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
var map, view;
require([
"esri/Map",
"esri/Basemap",
"esri/Viewpoint",
"esri/geometry/Extent",
"esri/views/MapView",
"esri/layers/WMTSLayer",
"esri/widgets/LayerList",
"esri/core/watchUtils"
], function(
Map,
Basemap,
Viewpoint,
Extent,
MapView,
WMTSLayer,
LayerList,
watchUtils
) {
var layerBase = {baseMapLayers: [{id: "basemap-layer", opacity: 1, title: "aaaaa", url: "http://arcgis.bizkaia.eus/arcgis/rest/services/ORTOFOTOS/GOBIERNO_VASCO_2016_AMPLIADO/MapServer", visibility: true, layerType:"ArcGISTiledMapServiceLayer"}], title: "Basemap"}
layer = new WMTSLayer({
url: "http://www.ign.es/wmts/ign-base"
});
map = new Map({
basemap: Basemap.fromJSON(layerBase),
});
view = new MapView({
container: "viewDiv",
map: map
});
view.when(function() {
layerList = new LayerList({
view: view
});
view.ui.add(layerList, "bottom-left");
layer.load();
layer.when(function() {
// add all sublayers to the select element
layer.sublayers.forEach(function(sublayer, i) {
if (sublayer.id === "IGNBaseOrto" || sublayer.id === "IGNBaseTodo" )
selectSublayer.options[ selectSublayer.options.length ] = new Option("(" + i + ") " + sublayer.title, sublayer.id);
});
// once populated, show the select element
var theDiv = document.getElementById("theLabel");
theDiv.style.visibility = "visible";
}); // end layer.load function
});
// if sublayer is changed, recreate map, view, and widgets using new activeLayer
document.getElementById("selectSublayer").onchange = function(event) {
map.removeAll();
if(event.target.value!==""){
layer.activeLayer = layer
.findSublayerById(event.target.value)
.clone();
map.layers.add(layer);
}
};
});
</script>
</head>
<body>
<div id="selectDiv">
<label id="theLabel">
Pick a layer from the WMTS catalog
<select id="selectSublayer"><option value="">No Layers Selected</option></select>
</label>
</div>
<div id="viewDiv"></div>
</body>
</html>
To reproduce the error one of the WMTSLayer must be selected from the select box.
There is a workaround to solve this problem?
Your basemap layer type is ArcGISTiledMapServiceLayer, which in the new API 4.11 is a TileLayer.
According to the documentation of the TileLayer from ESRI:
https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-TileLayer.html
Known Limitations
When adding a TileLayer to a map in a SceneView, the following
limitations exist:
This layer needs to be published from ArcGIS Server 10.3 and later or
ArcGIS Server 10.2.2 with this applied fix. If viewingMode is global,
then only services with ArcGIS Online/Bing Maps/Google Maps (Web
Mercator) or WGS84 Geographic Coordinate System, Version 2 tiling
scheme are supported. If viewingMode is local, then only services with
projected coordinate systems are supported. Only Tile layers with the
following tiling scheme specifications are supported:
256x256 or 512x512 pixel tiles Scale levels must increase or decrease
by a power of two At level 0 there shouldn't be more than 30 root
tiles. All tiled layers must have the same tiling scheme and
SpatialReference.
Please find the fiddle here and example which does not work but does not fail either (does not show 400 bad request when loading the layer)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<title>Select WMTSLayer sublayer - 4.11</title>
<style>
html,body,
#viewDiv {
padding: 0;
margin: 0;
height: 95%; /* allow space for sublayer switcher */
width: 100%;
}
select, label {
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
#selectDiv {
background-color: lightgrey;
padding: 10px;
}
#theLabel {
visibility: hidden; /* hide until populated */
}
.esri-layer-list {
width: 310px;
}
</style>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
var map, view, layer;
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WMTSLayer",
"esri/widgets/LayerList",
"esri/layers/TileLayer"
], function(Map,Basemap,MapView,WMTSLayer,LayerList,TileLayer) {
var basemap = new Basemap({
baseLayers: [
new TileLayer({
url: "http://arcgis.bizkaia.eus/arcgis/rest/services/ORTOFOTOS/GOBIERNO_VASCO_2016_AMPLIADO/MapServer"
})]
});
var layerBase = {
title: "Basemap",
baseMapLayers: [{
url: "http://arcgis.bizkaia.eus/arcgis/rest/services/ORTOFOTOS/GOBIERNO_VASCO_2016_AMPLIADO/MapServer",
visibility: true,
layerType:"ArcGISTiledMapServiceLayer"}]};
layer = new WMTSLayer({
url: "http://www.ign.es/wmts/ign-base"
});
map = new Map({
//basemap: Basemap.fromJSON(layerBase),
//basemap: "streets",
basemap: basemap,
layers: [layer]
});
view = new MapView({
container: "viewDiv",
map: map
});
view.when(function() {
view.extent = layer.fullExtent;
var layerList = new LayerList({
view: view
});
view.ui.add(layerList, "bottom-left");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I think the problem is in the reference system (which is readonly), the above layer is not re-projected to fit over the basemap.
In this image you can check what projections are supported on IGNBaseTodo layer the layer that I am trying to use.
I have load this layer on QGIS with EPSG:28530 spatial reference and I have captured the requests and compare with the requests that arcgis API4 is doing, the unique difference is tilerow parameter, everything else is ok.
image
I have a feature layer with specific countries on top of another feature layer showing all the countries of the world.
If you click on these specific countries an info window pops up. The info window should show the name of the country. But it doesn't.
The code is as follows. What is wrong with it?
<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>Feature Layer Only Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
require([
"dojo/dom-construct",
"esri/map",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"dojo/domReady!"
], function(
domConstruct,
Map,
InfoTemplate,
FeatureLayer,
Extent
) {
var bounds = new Extent({
"xmin":-20037509,
"ymin":-8283276,
"xmax":20037509,
"ymax":17929239,
"spatialReference":{"wkid":102100}
});
var map = new Map("map", {
extent: bounds
});
var url = "https://services8.arcgis.com/qruYQAspohLtOguC/ArcGIS/rest/services/englishspeakingcountries/FeatureServer/0";
var template = new InfoTemplate("Country", "${ADMIN}");
var fl = new FeatureLayer(url, {
id: "englishspeakingcountries_0",
infoTemplate: template
});
map.addLayer(fl);
var url_2 = "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries/FeatureServer/0"
var fl2 = new FeatureLayer(url_2);
map.addLayer(fl2, 0);
}
);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Using the Network tab in the Chrome developer tools, I found that queries to the feature services returned only the ObjectId field and geometry for each feature. Use the outFields property to fix this:
var fl = new FeatureLayer(url, {
id: "englishspeakingcountries_0",
outFields: "*",
infoTemplate: template
});
First of all I am not a programmer / coder, I'm a total noob HTML / JavaScript wise. So if possible please keep any answers simple ;-)
I'm working on a sort of hobby-art project. The goal is to compare Streetview panos of different dates and to create a photo gallery of these. I want to have a Streetview pano that is as clear as possible, so no UI.
What I have now:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View controls</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 40.717215, lng: -74.0061689},
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
addressControl: false,
panControl: false,
enableCloseButton: false
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAA3Rw1Ei8m79RwB_oapYe4rK5LgAbE7cg&signed_in=true&callback=initPano">
</script>
</body>
</html>
This HTML produces a nice clear Streetview pano without any UI. But I now would like to pull up a SV pano from a specific date.
I found this:
https://github.com/amenadiel/google-maps-documentation/blob/master/docs/StreetViewPanoramaData.md
and
https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaData
I have no idea how / where to put this piece of code in my HTML.
- Can you show me where it needs to go?
- Perhaps you can create a HTML template where I only have to specify the latlongs / sv pano date?
You can not select a specific date.
The StreetViewPanoramaData object REPRESENTS the data of Street View that is matched with panorama ID.
It means:
copyright : Who copyright for this photo has.
imageDate : When this photo was taken.
links : What the next pano IDs are.
location : Where this is.
tiles: Tile data.
The StreetViewPanoramaData is used for creating custom street view typically.
You can find the code in the link below.
Sample running Code
${NAME} in the infoTemplate displays County name.
I want to add a alert box which displays the county name. I can create a alert box but not able to display the county name.
What am I doing wrong?
well, to show alert you have to attach click event on the feature or you have to use any event to propagate alert message.
In Above sample url I used feature layer click event to show "NAME" in the alert.
Below is the working code:
<!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>Class Breaks Renderer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map{
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/InfoTemplate", "esri/symbols/SimpleFillSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/Color", "dojo/dom-style", "dojo/on", "dojo/domReady!"
], function(
Map, FeatureLayer,
InfoTemplate, SimpleFillSymbol,
ClassBreaksRenderer,
Color, domStyle, on
) {
map = new Map("map", {
basemap: "streets",
center: [-98.215, 38.382],
zoom: 7,
slider: false
});
var symbol = new SimpleFillSymbol();
symbol.setColor(new Color([150, 150, 150, 0.5]));
// Add five breaks to the renderer.
// If you have ESRI's ArcMap available, this can be a good way to determine break values.
// You can also copy the RGB values from the color schemes ArcMap applies, or use colors
// from a site like www.colorbrewer.org
//
// alternatively, ArcGIS Server's generate renderer task could be used
var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");
renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
var infoTemplate = new InfoTemplate("${NAME}", "${*}");
var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"],
infoTemplate: infoTemplate
});
featureLayer.setDefinitionExpression("STATE_NAME = 'Kansas'");
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
on(featureLayer, "click", function(evt){
alert(evt.graphic.attributes.NAME)
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
In this code i have used above sample code with feature layer click event.
Hope this will help you :)
Let me know if any clarifications required !
We can access $NAME outside the infotemplate in the following way...
var t = "${NAME}Incidents:";+inc // String substitution method
var content = esriLang.substitute(evt.graphic.attributes,t);
Looked over the example can NOT figure out how to set basemap MANUALLY. I don't want a dijit widget, or any other libraries or anything like that. Just want to manually set a basemap to any of the already available types like Topographic, Satellites, Streets, etc.
Following this API reference:
Object: esri/basemaps
The part I can't figure out is marked with question marks. If some could help me out, would really appreciate it.
require([
"esri/basemaps",
"esri/map",
"dojo/domReady!"
], function (esriBasemaps, Map) {
/* ------------------------------------- */
/* Basemap add one of the existing maps. */
/* ------------------------------------- */
esriBasemaps.myBasemap = {
baseMapLayers ???
};
var map = new Map("map", {
basemap: "myBasemap",
center: [-118, 34.5],
zoom: 8
});
});
The code in the esri/basemaps documentation works fine, combined with the create a map sample.
Here's the part you wondered about:
esriBasemaps.myBasemap = {
baseMapLayers: [
{
url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"
}
],
title: "My Basemap"
};
Here's a full example. Copy and paste the following into the ArcGIS API for JavaScript Sandbox to see how it works.
<!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="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map;
require(["esri/basemaps", "esri/map", "dojo/domReady!"], function(esriBasemaps, Map) {
esriBasemaps.myBasemap = {
baseMapLayers: [
{
url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"
}
],
title: "My Basemap"
};
map = new Map("map", {
basemap: "myBasemap",
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>