Use my own map service ArcGIS JavaScript API 3.43

Question 1

I have my own custom service map. I have a base map, layers etc...

I need to use it instead of ArcGIS default basemaps and layers.

For now I trying this:

<!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">
 <link rel="stylesheet" href="https://js.arcgis.com/3.43/esri/css/esri.css">
 <script src="https://js.arcgis.com/3.43/"></script>
 <!-- <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
 <script src="https://js.arcgis.com/3.22compact/"></script> -->
 <style>
 html, body, #map {
 height: 100%;
 padding: 0;
 margin: 0;
 }
 </style>
 
 <title></title>
 </head>
 <body class="claro">
 
 <div id="map"></div>
 <script>
 var map;
 require(["esri/map",], function(Map) {
 const baseMapUrl = 'http.expample/MapaBase_1x/MapServer'
 map = new Map("map", {
 basemap: 'streets',
 center: [-122.45, 37.75],
 zoom: 13
 });
 });
 </script>
 </body>
</html>

The variable baseMapUrl is my custom map server URL, How can I use it with ArcGIS 3.43?

Question 2

Please Edit the Question to clarify what you mean by "custom service". If you are using ArcGIS Server, please specify the actual version in use.

Question 3

Hi @Vince, I mean is a server where we have our own map, layers, etc. This map is not from ArcGis server. I have two urls, one for basemap and another one for custom layer.

Question 4

What map protocol does this server implement? If it isn't a protocol of which the JSAPI is aware, you'd need to write a proxy to wrap it into a functional protocol.

Question 5

It's a REST server.

Question 6

Hi @BPolanco, there are many different REST server protocols, including ArcGIS Server, WMS/WMTS and other OGC etc. Do you you know what specific format it is? Or can you share the URL? Is your server self-made or is it using a specific product? Knowing this well help understand how to consume it it. Also note that you are referencing the old legacy 3x version of the API. Unless it's an existing app, you should probably use version 4x.

Question 7

Yes, you can use your own map service as the basemap instead of one of the out-of-box basemaps. The basic steps are

create the layer,
create a Basemap and set its "baseLayers" to the layer you created in step 1.

<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta
 name="viewport"
 content="initial-scale=1,maximum-scale=1,user-scalable=no"
 />
 <title>Custom Basemap | Sample | ArcGIS Maps SDK for JavaScript 4.26</title>
 <style>
 html,
 body,
 #viewDiv {
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
 }
 </style>
 <link
 href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
 rel="stylesheet"
 type="text/css"
 />
 <script src="https://js.arcgis.com/4.26/"></script>
 <script>
 require([
 "esri/layers/MapImageLayer",
 "esri/layers/TileLayer",
 "esri/Map",
 "esri/Basemap",
 "esri/views/MapView"
 ], (MapImageLayer, TileLayer, Map, Basemap, MapView) => {
 const myBaseLayer = new TileLayer({
 url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer"
 });
 const myBasemap = new Basemap({
 baseLayers: [myBaseLayer]
 });
 const map = new Map({
 basemap: myBasemap
 });
 const view = new MapView({
 container: "viewDiv",
 map: map,
 zoom: 5,
 center: [-122.18, 37.49] // longitude, latitude
 });
 });
 </script>
 </head>
 <body>
 <div id="viewDiv"></div>
 </body>
</html>

See https://codepen.io/bsvensson/pen/rNZgKrr?editors=1000

Read more at https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html and https://developers.arcgis.com/javascript/latest/sample-code/

If your mapservice is not cached, you would use MapImageLayer instead of TileLayer.

Bjorn Svensson Bjorn Svensson 3,58521 silver badges38 bronze badges · Accepted Answer · 2023-03-31 01:14:21Z

Yes, you can use your own map service as the basemap instead of one of the out-of-box basemaps. The basic steps are

create the layer,
create a Basemap and set its "baseLayers" to the layer you created in step 1.

<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta
 name="viewport"
 content="initial-scale=1,maximum-scale=1,user-scalable=no"
 />
 <title>Custom Basemap | Sample | ArcGIS Maps SDK for JavaScript 4.26</title>
 <style>
 html,
 body,
 #viewDiv {
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
 }
 </style>
 <link
 href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
 rel="stylesheet"
 type="text/css"
 />
 <script src="https://js.arcgis.com/4.26/"></script>
 <script>
 require([
 "esri/layers/MapImageLayer",
 "esri/layers/TileLayer",
 "esri/Map",
 "esri/Basemap",
 "esri/views/MapView"
 ], (MapImageLayer, TileLayer, Map, Basemap, MapView) => {
 const myBaseLayer = new TileLayer({
 url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer"
 });
 const myBasemap = new Basemap({
 baseLayers: [myBaseLayer]
 });
 const map = new Map({
 basemap: myBasemap
 });
 const view = new MapView({
 container: "viewDiv",
 map: map,
 zoom: 5,
 center: [-122.18, 37.49] // longitude, latitude
 });
 });
 </script>
 </head>
 <body>
 <div id="viewDiv"></div>
 </body>
</html>

See https://codepen.io/bsvensson/pen/rNZgKrr?editors=1000

Read more at https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html and https://developers.arcgis.com/javascript/latest/sample-code/

If your mapservice is not cached, you would use MapImageLayer instead of TileLayer.

Stack Exchange Network

Use my own map service ArcGIS JavaScript API 3.43

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Use my own map service ArcGIS JavaScript API 3.43

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions