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>
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
});
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 4 years ago.
I am trying to use Google maps API for a website and I can't seem to get multiple locations to populate like Google has it in their example.
Could anyone please let me know what I need to add to get 11 markers to show up that will give a description of what I want.
I can see that Google has multiple locations giving a quick description of what they are.
PS: I already have a key I just need to know how to include "X" number of markers with a description attached.
Attached is the link to googles example:
Google Maps API
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var infowindow;
function initMap() {
var pyrmont = {lat: -33.867, lng: 151.195};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: pyrmont,
radius: 500,
type: ['store']
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
</body>
</html>
You need to try this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
I'm trying to toggle layers of an existing map created on maps.google.com with google V3 API.
To toggle (display / hide) the layer I'm using .setMap function with map/null as argument.
My problem is that I've not found a way to get the list of the existing layers. So I've hardcoded the values in mapLayerNames, but I would have prefer to get them from 'map' variable. Which API am I missing from the doc?
here comes my code: lid are the layer Ids I'm looking for in the url...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var mapLayerNames = [
"http://www.google.com/maps/d/u/1/kml?mid=z_wfVyI764I4.kPvsE6js2GAg&lid=z_wfVyI764I4.kIQKW-gOFhmU",
"http://www.google.com/maps/d/u/1/kml?mid=z_wfVyI764I4.kPvsE6js2GAg&lid=z_wfVyI764I4.k2u4vYNOkUIA",
"http://www.google.com/maps/d/u/1/kml?mid=z_wfVyI764I4.kPvsE6js2GAg&lid=z_wfVyI764I4.kcPBYmgvyhbI"
];
var map;
var ctaLayer = [];
function initialize() {
var paris = new google.maps.LatLng(43.5742118,1.4538968);
var mapOptions = {
zoom: 11,
center: paris
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i=0; i<mapLayerNames.length; i++) {
ctaLayer = new google.maps.KmlLayer({
url: mapLayerNames[i]
});
ctaLayer.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
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.