AnsweredAssumed Answered

LocateButton and other spatial reference

Question asked by azariaszt on Jun 13, 2018
Latest reply on Jun 14, 2018 by azariaszt

Is it possible to use LocateButton with spatial reference: 2600? Console show me error:

Map: Geometry (wkid: 4326) cannot be converted to spatial reference of the map (wkid: 2600)

Without LocateButton is working.

<!DOCTYPE html>
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta http-equiv="pragma" content="no-cache"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta name="description" content=""/>
     <meta name="author" content=""/>
     <base href="."/>
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
     <title>Teritory</title>
     <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
     <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
     <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, #map {
          padding:0;
          margin:0;
          height:100%;
     }
     button {
          display: block;
          width: 80px;
     }
     </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/Point",
     "esri/basemaps",
     "esri/Color",
     "esri/dijit/LocateButton",
     "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
     Map, MapImageLayer,Draw,
     SimpleMarkerSymbol, SimpleLineSymbol,
     PictureFillSymbol, CartographicLineSymbol,
     Graphic, Point, basemaps,
     Color, LocateButton, dom, on,
) {
     basemaps.myCustomBasemap = {
          baseMapLayers: [{
               url: "https://www.maps.lt/arcgis/rest/services/mapslt/MapServer"
               //url: "https://www.maps.lt/arcgis/rest/services/mapslt_wmerc/MapServer"
          }],
          thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",
          title: "Custom Basemap"
     };

     map = new Map("map", {
          basemap: "myCustomBasemap",
          center: new Point({"x": 518390,  "y": 6138707, "spatialReference": {"wkid": 2600}}),
          //center: new Point({"x": 2599384, "y": 7276508}),
          zoom:4
     });

     geoLocate = new LocateButton({
        map: map
      }, "LocateButton");
      geoLocate.startup();
     
     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
     );

     
     var fillSymbol = new PictureFillSymbol(
          "images/mangrove.png",
          new SimpleLineSymbol(
               SimpleLineSymbol.STYLE_SOLID,
               new Color('#000'), 1
          ), 42, 42
     );

     
      var markerSymbol = new SimpleMarkerSymbol();
          markerSymbol.setColor(new Color("#FF0000"));
          markerSymbol.setPath("m183 552c0 0 0 0 0 0s175-269 175-357c0-130-89-187-175-187-87 0-175 57-175 187 0 88 175 357 175 357s0 0 0 0zm-61-365c0-34 27-61 61-61 34 0 61 27 61 61s-27 61-61 61c-34 0-61-27-61-61z");
        markerSymbol.setSize(30);
     
     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("Point"), "click", function(evt) {
               map.disableMapNavigation();
               map.graphics.clear();
               tb.activate(Draw.POINT);
          });
          on(dom.byId("Point"), "touchstart", function(evt) {
               map.disableMapNavigation();
               map.graphics.clear();
               tb.activate(Draw.POINT);
          });
          
          
     }
     function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics
          tb.deactivate();
          map.enableMapNavigation();
          var symbol = markerSymbol;
          map.graphics.add(new Graphic(evt.geometry, symbol));
          var poz_x=evt.geometry.x;
          var poz_y=evt.geometry.y;
          //document.getElementById('cords').value=poz_x+" "+poz_y
     }
});
</script>
</head>

<body>
     <div id="info">
          <div id="LocateButton"></div>
          <p><button id="Point" class="btn btn-small btn-default"><i class="fas fa-plus-circle"></i> Add new</button></p>
          </div>
     <div id="map" class="map"></div>
</body>
</html>

Outcomes