AnsweredAssumed Answered

Trying to use own basemap

Question asked by azariaszt on Oct 12, 2017
Latest reply on Nov 6, 2017 by azariaszt

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?

Outcomes