nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

viewing a OS basemap gallery using javascript api 3.20

MartynLe_Butt

How do I use the javascript api 3.20 to add a basemap gallery to my js app so that I can see the Ordnance Survey Open Data basemaps? At the moment I can see and select the non-OS ones and then when I select an OS basemap it tells me that the 27700 Geometry cannot be converted to the SR of the map (102100) which is the default of the gallery.

I don't mind if the gallery only contains the OS basemaps. Thanks

Trouver plus de publications taguées avec

Accepted answers

All comments

MartynLe_Butt

Thanks for the sugestions everyone, I think I have what I need now. Shame that ESRI UK didn't offer a rewritten Basemap Gallery sample when they issued the new maps to help newbies like me!

prashantnigam

You can see basemaps of different spatial references using Basemap Gallery by destroying the map object and recreating it inside selection-change event when the new basemap has different spatial reference than the current one.

khutchins

All the basemaps in the Basemap Gallery need to share the same spatial reference. Here's a blurb from the help that explains this.

All basemaps added to the gallery need to have the same spatial reference. If the default ArcGIS.com basemaps are used then all additional items added to the gallery need to be in Web Mercator (wkids: 102100, 102113 and 3857). If the default basemaps are not used you can add basemaps in any spatial reference as long as all the items added to the gallery share that spatial reference. For best performance, it is recommended that all basemaps added to the gallery are cached (tiled) layers.

You can add the OS basemaps to a new group in ArcGIS Online and then use the basemapsGroup constructor option to specify the group id.

HemingZhu

To test what i have said, i wrote a piece of code on ESRI BasemapGallery sample. Here is part of it:

var basemaps = [];
basemapLayer = new BasemapLayer({ url: "http://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Carto_2/MapServe" });
baseMap = new Basemap({
layers: [basemapLayer],
title: "OS_Open_Carto_2",
thumbnailUrl: "Tulips.jpg"
});
basemaps.push(baseMap);

map = new Map("map", {
basemap: "OS_Open_Carto_2",
//center: [0.1278, 51.5074],
center:[-77.0369,38.9072],
zoom: 15
});

//add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: false,
map: map,
basemaps: basemaps
}, "basemapGallery");
basemapGallery.startup();

basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
});

The code won't work on the sevices, it thrown this message: "esri.dijit.BasemapGallery: Unable to switch basemap because new basemap is a tiled service and cannot be loaded as a dynamic layer". If i Change url to any map serivce, for example, World_Street_Map (MapServer) , my code will work. So i would l guess the url you list is not work or you list tile info for this searvices or something else. Note that the title of Basemap is the one you should put it map's basemap property. hope this will help you a little bit.

MartynLe_Butt

The problem now seems to be that I can't find either the correct rest endpoint or the correct basemap name to use. These are free basemaps produced by ESRI UK and are in 27700 format but I cannot find the appropriate info. Here is a code snippet that adds one basemap to a gallery:

var bm1 =new BasemapLayer({url:"http://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Carto_2/MapServer" }); // not sure if this is correct, copied from ArcGIS Online

var basemap = new Basemap({
layers: [bm1],
title: "bm1",
// thumbnailUrl: "esri/images/basemap/terrain.jpg"
})

map = new Map("map", {
basemap: "os-open-carto", // nothing I try here is recognized
zoom: 13
});

var basemapGallery = new BasemapGallery({
showArcGISBasemaps: false,
map: map
}, "basemapGallery");

basemapGallery.add(basemap);
basemapGallery.startup();

MartynLe_Butt

Thanks very much, I'll give that a try.

HemingZhu

you can construct a BasemapGallery easily by define your own BasemapLayer and push it into basemap array which is one of BasemapGallery constructor parameters.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.