Select to view content in your preferred language

Add OpenStreetMap to basemapgallery - manually

4590
1
Jump to solution
12-17-2012 12:30 AM
DavidRaijmakers
Regular Contributor
I dont know how to add the OpenStreetMap to the basemapgallery. I want to do this manually because when i use ShowARCGIS basemaps:true i get too many basemaps i dont use.

Here's my code:

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

var basemapRoad = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsRoad"
          })],
          id: "bmRoad",
          title: "Bing Maps Wegen",
      thumbnailUrl:"images/basemap_streets.jpg"

        });
        basemapGallery.add(basemapRoad);
        var basemapAerial = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsAerial"
          })],
          id: "bmAerial",
          title: "Bing Maps Luchtbeelden",
      thumbnailUrl:"images/basemap_imagery.jpg"

        });
       basemapGallery.add(basemapAerial);
        var basemapHybrid = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            type: "BingMapsHybrid"
          })],
          id: "bmHybrid",
          title: "Bing Maps Hybride",
      thumbnailUrl:"images/basemap_imagery_with_labels.png"

        });
        basemapGallery.add(basemapHybrid);



var layer5 = new esri.dijit.BasemapLayer({
  url:"http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"
});
var basemap5 = new esri.dijit.Basemap({
  layers:[layer5],
  title:"Lichtgrijs Canvas",
  thumbnailUrl:"images/light_gray.png"
});
basemapGallery.add(basemap5);

var layer6 = new esri.dijit.BasemapLayer({
  url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
});
var basemap6 = new esri.dijit.Basemap({
  layers:[layer6],
  title:"Topografisch",
  thumbnailUrl:"images/basemap_topographic.jpg"
});
basemapGallery.add(basemap6);

        basemapGallery.startup();
 
       
        dojo.connect(basemapGallery, "onError", function(msg) {alert(msg)});

      }
0 Kudos
1 Solution

Accepted Solutions
DavidRaijmakers
Regular Contributor
I already found the answer:

http://help.arcgis.com/EN/WEBAPI/JAVASCRIPT/ARCGIS/help/jsapi_start.htm#jsapi/basemaplayer.htm

var openstreetmap = new esri.dijit.Basemap({
      layers: [new esri.dijit.BasemapLayer({
        type: "OpenStreetMap"
      })],
      id: "OpenStreetmap",
      title: "Open Street Map",
        thumbnailUrl:"images/OpenStreetMap.png"

    });
    basemapGallery.add(openstreetmap);

View solution in original post

0 Kudos
1 Reply
DavidRaijmakers
Regular Contributor
I already found the answer:

http://help.arcgis.com/EN/WEBAPI/JAVASCRIPT/ARCGIS/help/jsapi_start.htm#jsapi/basemaplayer.htm

var openstreetmap = new esri.dijit.Basemap({
      layers: [new esri.dijit.BasemapLayer({
        type: "OpenStreetMap"
      })],
      id: "OpenStreetmap",
      title: "Open Street Map",
        thumbnailUrl:"images/OpenStreetMap.png"

    });
    basemapGallery.add(openstreetmap);
0 Kudos