Trying to use own basemap

2349
12
Jump to solution
10-12-2017 04:00 AM
AzariaszTrzciński
New Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

12 Replies
PanagiotisPapadopoulos
Esri Regular Contributor
0 Kudos
AzariaszTrzciński
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Regular Contributor

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
New Contributor III

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 :(

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

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>
0 Kudos
ThomasSolow
Regular Contributor

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
MVP Esteemed Contributor

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>