topic Re: Trying to use own basemap in ArcGIS JavaScript Maps SDK Questions

Trying to use own basemap

AzariaszTrzciński — Sat, 11 Dec 2021 08:12:07 GMT

Hello, i'm trying to use MapImageLayer instead of basemap, but it doesn't work.

<!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">
<title>Map Edit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">

<style>
#info {
     top: 20px;
     color: #444;
     height: auto;
     font-family: arial;
     right: 20px;
     margin: 5px;
     padding: 10px;
     position: absolute;
     width: 115px;
     z-index: 40;
     border: solid 2px #666;
     border-radius: 4px;
     background-color: #fff;
}
html, body, #mapDiv {
     padding:0;
     margin:0;
     height:100%;
}
button {
     display: block;
}
</style>

<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map, tb;

require([
     "esri/map",
     "esri/layers/MapImageLayer",
     "esri/toolbars/draw",
     "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
     "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", 
     "esri/graphic", 
     "esri/geometry/webMercatorUtils",
     "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
     Map, MapImageLayer,Draw,
     SimpleMarkerSymbol, SimpleLineSymbol,
     PictureFillSymbol, CartographicLineSymbol, 
     Graphic, webMercatorUtils,
     Color, dom, on
) {

     map = new Map("mapDiv", {
     basemap: "osm",
     center: [23.354527,54.556371],
     zoom:14
});
/* DOESN'T WORK
var layer = new MapImageLayer({
     url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
});
map.add(layer);

var view = new MapView({
     container: "viewDiv",  
     map: map,
     center: [23.675000, 54.665000],
     zoom: 14
});
*/

     map.on("load", initToolbar);
     // lineSymbol used for freehand polyline, polyline and line. 
     var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
     );

     // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
     // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
     var fillSymbol = new PictureFillSymbol(
          "images/mangrove.png",
          new SimpleLineSymbol(
               SimpleLineSymbol.STYLE_SOLID,
               new Color('#000'),1
          ), 42, 42
     );

     function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);
          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
               if ( evt.target.id === "info" ) {
                    return;
               }
               var tool = evt.target.id.toLowerCase();
               map.disableMapNavigation();
               tb.activate(tool);
          });
     }

     function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol = fillSymbol;
          
          map.graphics.add(new Graphic(evt.geometry, symbol));
          evt.geometry = webMercatorUtils.webMercatorToGeographic(evt.geometry);
          var obj=evt.geometry.rings;          
          punkty="";
          for ( var path = 0; path <obj.length; path ++ ) {
               //For each point in the path...
               for ( var pt = 0; pt < obj[path].length; pt++ ) {
                    punkty+=obj[path][pt][0].toFixed(6)+' \n';
                    punkty+=obj[path][pt][1].toFixed(6)+' \n';
               }
               punkty+='#\n';
          }
          document.getElementById('cords').value += punkty;
     }
          
});
</script>
</head>

<body>
     <div id="info">
          <button id="Polygon">New polygon</button>
     </div>
     <div id="mapDiv"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I want to have only one basemap (MapsLT/MapServer), but if will be added layer, will be ok. It is possible to do thist? If yes - how to do this?

Re: Trying to use own basemap

PanagiotisPapadopoulos — Thu, 12 Oct 2017 11:03:09 GMT

This sample may help you

Dynamic map service | ArcGIS API for JavaScript 3.22

Re: Trying to use own basemap

AzariaszTrzciński — Thu, 12 Oct 2017 11:23:01 GMT

Didn't help. The problem is: when added new layer, I can't add new polygon (click on button).

Re: Trying to use own basemap

RobertScheitlin__GISP — Thu, 12 Oct 2017 12:48:59 GMT

Azariasz,

You are attempting to use MapImageLayer which is a esri JS API 4.x class when the rest of your code is 3.x. You can not mix 3.x api classes and 4.x classes.

Re: Trying to use own basemap

ThomasSolow — Thu, 12 Oct 2017 12:52:59 GMT

The 3.X API has no concept of a MapView, which you reference in your code. This is a new concept with with 4.X.

Your map service has a spatial reference with wkid 2600 so you can't deal with WGS84 geometries in the client. You should work with the projected coordinate system of the basemap. You can add your basemap like this: https://codepen.io/solowt/pen/YrjxoY?editors=1000

Re: Trying to use own basemap

AzariaszTrzciński — Fri, 13 Oct 2017 21:58:00 GMT

Wow, you helped me a lot! Thank you! But why the map isn't in the center? No matter I'm writing in:

basemap: "myCustomBasemap",
center: [23.354527,54.556371],
zoom:5

nothing happens 😞

Re: Trying to use own basemap

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:12:10 GMT

When I use a custom basemap I specify the center as a point class using the spatial refrence of my custom basemap:

    map = new Map("map", {
      zoom: 1,
      logo: false,
      showAttribution: false,
      slider: false,
      center: new Point({"x": 654661.637354886, "y": 1187279.83575856, "spatialReference": {"wkid": 102629}})
    });‍‍‍‍‍‍‍

Re: Trying to use own basemap

AzariaszTrzciński — Sat, 11 Dec 2021 08:12:13 GMT

I emigrated to v4.5, did as simple as possible, but isn't work. I do not understand this. I just want to use a basemap, add some polygons and that's it. Must it be so complicated? :'-(

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Map</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
     "esri/Basemap",
     "esri/Map",
     "esri/views/MapView",
     "dojo/domReady!"
], function(Basemap, Map, MapView){

  var myBasemap = new Basemap({
      baseLayers: [{
          url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
     }],
     thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",
     title: "Custom Basemap",
     id: "myMap"
    });
     var map = new Map({
          basemap: myBasemap
     });
     var view = new MapView({
          container: "viewDiv",  // Reference to the scene div created in step 5
          map: map,  // Reference to the map object created before the scene
          center: [54, 23]  // Sets center point of view using longitude,latitude
          zoom: 4,  // Sets zoom level based on level of detail (LOD)
     });
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Trying to use own basemap

ThomasSolow — Mon, 23 Oct 2017 12:54:42 GMT

In 4.5 it looks like you need to explicitly create a TileLayer using your URL like this: https://codepen.io/solowt/pen/wrbWgd?editors=1010

Re: Trying to use own basemap

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:12:15 GMT

I don;t see in the docs where it mentions that the baseLayers will autocast so I change your code below and it worked fine:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  <script src="https://js.arcgis.com/4.5/"></script>
  <script>
    require([
      "esri/layers/TileLayer",
      "esri/Basemap",
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(TileLayer, Basemap, Map, MapView) {

      var layer = new TileLayer({
       url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
      });
      var myBasemap = new Basemap({
        baseLayers: [layer],
        thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",
        title: "Custom Basemap",
        id: "myMap"
      });
      var map = new Map({
        basemap: myBasemap
      });
      var view = new MapView({
        container: "viewDiv", // Reference to the scene div created in step 5
        map: map, // Reference to the map object created before the scene
        center: [54, 23],  // Sets center point of view using longitude,latitude
        zoom: 4
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Trying to use own basemap

RobertScheitlin__GISP — Mon, 06 Nov 2017 21:32:17 GMT

Azariasz,

Don't forget to mark this question as answered by click on "Mark Correct" on the reply that answered your question.

Re: Trying to use own basemap

AzariaszTrzciński — Mon, 06 Nov 2017 21:37:53 GMT

Thanks boys!!! You helped me a lot. Maybe someone could add these files as an example? I think they may be useful to others in the future

Show a map and polygon on it

Add polygon to map by Toolbar

Re: Trying to use own basemap

AzariaszTrzciński — Mon, 06 Nov 2017 21:42:30 GMT

I mean here: https://developers.arcgis.com/javascript/3/jssamples/ or https://developers.arcgis.com/javascript/latest/sample-code/index.html