Hello Everyone, is it possible to add a featureclass mapservice as a base map in esri basemap gallery with existing basemaps in arcgis js api and also can I see the pop-up information of layer onclick event?
Thanks
Muqit,
Sure see this blog post about custom basemaps:
Using custom basemaps | ArcGIS Blog
If you configure popups for that layer then yes.
Hi Robert, thanks for your suggestions, but your blog example in not my case, because all the examples there is related to arcgis online! I am working on seperate web mapping application made by our own, based on arcgis js api. So is it possible to add a mapservice from arcgis server in existing arcgis api base map gallery as a basemap and it will also act like a map feature thus we can see the onclick popup information...Thanks
Muqit,
Yes it is. Here is a sample:
<!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></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.21/"></script>
<script>
var map, bi;
require([
"esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
"esri/geometry/Extent",
"dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap",
"dijit/registry", "esri/dijit/util/busyIndicator", "dojo/on",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
"dojo/domReady!"
], function(
Map, BasemapGallery, arcgisUtils, Extent,
parser, BasemapLayer, Basemap, registry, busyUtil, on
) {
parser.parse();
var initialExtent = new Extent({
"xmin": -9810056.969652807,
"ymin": 5131134.153249637,
"xmax": -9807827.850611234,
"ymax": 5132506.6820363635,
"spatialReference": {
"wkid": 102100
}
});
map = new Map("map", {
extent: initialExtent,
smartNavigation: false,
logo: false,
showAttribution: false,
zoom: 16,
slider: false
});
map.on("zoom-end", function(evt) {
console.info(evt.level);
});
bi = busyUtil.create({
target: "map",
fadeDuration: 500
});
var basemaps = [];
var myLayer = new BasemapLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer"
});
var myBasemap = new Basemap({
layers: [myLayer],
title: "Community Addresses",
thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tem..."
});
basemaps.push(myBasemap);
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
basemaps: basemaps,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
basemapGallery.on("selection-change", function(evt) {
var pane = registry.byId("bmTitlePane");
if (pane.open) {
pane.toggle();
}
});
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane" id="bmTitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello Robert, thanks for your code, example seems good but the onlick event is not working for the new basemap layer. see my screenshort.
Muqit,
OK a basemap does not have a infotemplate by default so that takes some more coding:
<!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></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.21/"></script>
<script>
var map, bi;
require([
"esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
"esri/geometry/Extent", "esri/InfoTemplate",
"dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap",
"dijit/registry", "esri/dijit/util/busyIndicator", "dojo/on",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
"dojo/domReady!"
], function(
Map, BasemapGallery, arcgisUtils, Extent, InfoTemplate,
parser, BasemapLayer, Basemap, registry, busyUtil, on
) {
parser.parse();
var initialExtent = new Extent({
"xmin": -9810056.969652807,
"ymin": 5131134.153249637,
"xmax": -9807827.850611234,
"ymax": 5132506.6820363635,
"spatialReference": {
"wkid": 102100
}
});
map = new Map("map", {
extent: initialExtent,
smartNavigation: false,
logo: false,
showAttribution: false,
zoom: 16,
slider: false
});
map.on("zoom-end", function(evt) {
console.info(evt.level);
});
bi = busyUtil.create({
target: "map",
fadeDuration: 500
});
var basemaps = [];
var myLayer = new BasemapLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer"
});
var _addressInfoTemplate = new InfoTemplate("Attributes", "${*}");
var myBasemap = new Basemap({
layers: [myLayer],
title: "Community Addresses",
thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tem..."
});
basemaps.push(myBasemap);
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
basemaps: basemaps,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
basemapGallery.on("selection-change", function(evt) {
if(evt.target._selectedBasemap.title === "Community Addresses"){
var lyr = map.getLayer(map.layerIds[0]);
if(lyr && !lyr.infoTemplates){
lyr.setInfoTemplates({
0: { infoTemplate: _addressInfoTemplate }
});
}
}
var pane = registry.byId("bmTitlePane");
if (pane.open) {
pane.toggle();
}
});
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane" id="bmTitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.
Hello Robert, Thanks for your code, but at my side your customized basemap layer is not showing any basemap! Neither my layer, that is what in my last reply I wrote.
Regards
No result if i click on new basemap "community address"
Muqit,
You may need to zoom in on the custom basemap so that the map is beyond the min scale of that layer. Here is a snapshot of what I see:
<!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></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.21/"></script>
<script>
var map, bi;
require([
"esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
"esri/geometry/Extent", "esri/InfoTemplate",
"dojo/parser", "esri/dijit/BasemapLayer", "esri/dijit/Basemap",
"dijit/registry", "esri/dijit/util/busyIndicator", "dojo/on",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
"dojo/domReady!"
], function(
Map, BasemapGallery, arcgisUtils, Extent, InfoTemplate,
parser, BasemapLayer, Basemap, registry, busyUtil, on
) {
parser.parse();
var initialExtent = new Extent({
"xmin": -765808.3553340577,
"ymin": 5736644.734566803,
"xmax": 2533825.281679554,
"ymax": 7375454.621000546,
"spatialReference": {
"wkid": 102100 }
});
map = new Map("map", {
extent: initialExtent,
smartNavigation: false,
logo: false,
showAttribution: false,
zoom: 12,
slider: false
});
map.on("zoom-end", function(evt) {
console.info(evt.level);
});
bi = busyUtil.create({
target: "map",
fadeDuration: 500
});
var basemaps = [];
var myLayer = new BasemapLayer({
url: "https://services.bgr.de/rest/services/boden/buek1000de/MapServer/"
});
var _addressInfoTemplate = new InfoTemplate("Attributes", "${*}");
var myBasemap = new Basemap({
layers: [myLayer],
title: "Community Addresses",
thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/86de95d4e0244cba80f0fa2c9403a7b2/info/thumbnail/tem..."
});
basemaps.push(myBasemap);
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
basemaps: basemaps,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
basemapGallery.on("selection-change", function(evt) {
if(evt.target._selectedBasemap.title === "Community Addresses"){
var lyr = map.getLayer(map.layerIds[0]);
if(lyr && !lyr.infoTemplates){
lyr.setInfoTemplates({
0: { infoTemplate: _addressInfoTemplate }
});
}
}
var pane = registry.byId("bmTitlePane");
if (pane.open) {
pane.toggle();
}
});
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane" id="bmTitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>