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; } } }

Tooltips on BasemapGallery with LocalBasemapsSource from GIS Server

ForrestLin

I created a BasemapGallery with LocalBasemapsSource from map service hosted in GIS Server:

const myBasemaps = [

new TileLayer({
url: "https://myhost.com/arcgis/rest/services/OCPA/Aerials2023/MapServer"

})

];

const basemapGallery = new BasemapGallery({
view: this.view,
container: "basemap-gallery",
source: new LocalBasemapsSource({
basemaps: myBasemaps
})
});

How to setup Tooltips like:

Thanks.

Forrest

Find more posts tagged with

Accepted answers

All comments

ForrestLin

@Egge-Jan_Pollé

Thank you!

Forrest

Egge-Jan_Pollé

Hi @ForrestLin,

Thanks for checking this out. I think it works 'as designed': Esri, of course, wants you to use their portal, and - as you indicate - the summary you set there will appear in the popup.

There is no way, as far as I know, to set this popup text in the code. Can someone from Esri confirm? Code wise, you can only set the title, which will then appear in the popup (like in my code snippet above).

ForrestLin

Hey @Egge-Jan_Pollé

If the source of my TileLayer is from portal and set the summary, then the tooltip works.

I'm wondering if it can be set in code.

ForrestLin

Hey @Egge-Jan_Pollé

The source of TileLayer is from ArcGIS Server, not from ArcGIS Portal.

How/Where to set a description in ArcGIS Server?

Thanks.

Forrest

Egge-Jan_Pollé

Hmmm, what is the source of your TileLayer? Can you set a description in the portal, as indicated in the first part of my answer above...?

ForrestLin

Hey @Egge-Jan_Pollé

I did the same as you did.

const basemap = new Basemap({
id,
title: "Aerial 2023",
thumbnailUrl,
baseLayers: [
new TileLayer({
url,
})]
});

But how to setup tooltip: "Orthos imagery [Date: Jan, 2023]", which is different from title: "Aerial 2023"?

Thanks.

Forrest

Egge-Jan_Pollé

Hi @ForrestLin,

Your LocalBaseMapSource will contain one or more Basemaps. If the Basemap is coming from ArcGIS Online (or ArcGIS Enterprise) then you can edit the tooltip text in your portal: it is the description you give to the item.

Alternatively, if your Basemap is coming from another source, you can give your Basemap a title which will pop up in the tooltip.

See code snippet below. For the Basemap which is based on the WMTSLayer, it is the title "BRT Achtergrondkaart (PDOK)" which will show in the tooltip.

HTH,

Egge-Jan

import Basemap from "@arcgis/core/Basemap";
import WMTSLayer from "@arcgis/core/layers/WMTSLayer";
import LocalBasemapsSource from "@arcgis/core/widgets/BasemapGallery/support/LocalBasemapsSource";
import SpatialReference from "@arcgis/core/geometry/SpatialReference";

const epsg28992 = new SpatialReference({wkid:28992});

// // BRT Achtergrondkaart van PDOK als achtergrondkaart
let brt_Achtergrondkaart_PDOK = new Basemap({
  baseLayers: [
    new WMTSLayer({
      url: "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0?",
      copyright:
        "<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> van <a target='_top' href='https://www.pdok.nl/'>PDOK</a>",
      activeLayer: {
        id: "brtachtergrondkaart"
      }
    })
  ],
  title: "BRT Achtergrondkaart (PDOK)",
  id: "brtachtergrondkaart",
  spatialReference: epsg28992, 
  thumbnailUrl: "brt_achtergrondkaart_pdok.jpg"
});

// Basiskaarten Esri Nederland
let topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}, id: "topo"}); // Topo RD --> https://www.arcgis.com/home/item.html?id=7aea6fa913a94176a1074edb40690318
let hr_Luchtfoto_Actueel = new Basemap({portalItem: {id: "9455a421f9a74887b03593cfa410abdf"}, id: "luchtfoto_hr"}); //Hoge Resolutie Luchtfoto RD
let lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}, id: "lichtgrijs"}); //Lichtgrijze Canvas RD
let darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}, id: "donkergrijs"}); //Donkergrijze Canvas RD
let osm_RD_EsriNL = new Basemap({portalItem: {id: "37292449670841d5bf5d590f4940c368"}, id: "osm_rd"}); //OpenStreetMap in RD via Esri Nederland

let baseMaps  = new LocalBasemapsSource({
  basemaps: [brt_Achtergrondkaart_PDOK, topo_RD_EsriNL, hr_Luchtfoto_Actueel, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL, osm_RD_EsriNL]
});

export { baseMaps };

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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