Trying to use own basemap

AzariaszTrzciński · ‎10-12-2017

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?

RobertScheitlin__GISP · ‎10-23-2017

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

PanagiotisPapadopoulos · ‎10-12-2017

This sample may help you

Dynamic map service | ArcGIS API for JavaScript 3.22

AzariaszTrzciński · ‎10-12-2017

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

RobertScheitlin__GISP · ‎10-12-2017

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.

ThomasSolow · ‎10-12-2017

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

AzariaszTrzciński · ‎10-13-2017

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 😞

RobertScheitlin__GISP · ‎10-13-2017

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

AzariaszTrzciński · ‎10-22-2017

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ThomasSolow · ‎10-23-2017

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

RobertScheitlin__GISP · ‎10-23-2017

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍