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 · ‎11-06-2017

Azariasz,

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

AzariaszTrzciński · ‎11-06-2017

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

AzariaszTrzciński · ‎11-06-2017

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