BearPanther.com

Extend the esri JavaScript BasicViewer

Introduction

user

panther


LATEST POSTS

Install Atom behind corporate proxy 08th July, 2016

Simple editing using an ArcGIS Online web map 08th April, 2013

Blog

Extend the esri JavaScript BasicViewer

Posted on .

Esri was kind enough to put out the BasicViewer for working with ArcGIS online web application. Although this may or not be designed as a starting point for developers it might be a time saver depending on your project. I believe the true intention was that it is just another view for your online application. That being said you can download the files and host the code on your own server which means that you will most likely want to add or change a few things. In this post I will show you how to incorporate esri draw tools into the viewer template. In order to get started you will need to download the zip file and open them up in your text editor/ide of choice.

The general layout is simple enough. Index.html is the main html file,  javascript/layout.js is the JavaScript file, and css/layout.css is the main css file. There are also supporting css files depending on the theme color you choose. The goal here is to put the esri draw tools from this sample into the viewer template. Nothing more. That is important as this is meant as a starting point than anything else. In order to accomplish this we will take the logic that is used for the measurement widget and reuse as much as possible to get a draw tool widget. This will give us a starting point for everything we need – toggle, floating, size, etc. With that we can fine tune it a bit and we will be good to go.

I will leave going through all of the layout.js as an exercise to the reader and for this sample we will create bearpanther.js in the sample folder. (javascript/bearpanther.js) with that file created the first step is adding it into the index.html file.


Under that you will find the config section.

var configOptions;
function init() {
configOptions = {

We will use this to hook into our draw tool logic in bearpanther.js Add this line to the config section – Remember to use a comma unless it is the last item.

displaydraw:"true",

the style of the file we will create (bearpanther.js) will be a bit different than layout.js. This is not important and is simply another way of writing JavaScript. Here is the  entire file contents which we will then talk about.

  dojo.require("esri.toolbars.draw");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");

  var bearpanther, toolbar;

  bearpanther = {

      addDrawToolbar:function addDrawToolbar() {

          var fp = new dojox.layout.FloatingPane({
              title:"Draw",
              resizable:false,
              dockable:false,
              closable:false,
              style:"position:absolute;top:0;left:150px;width:600px;height:80px;z-index:100;visibility:hidden;",
              id:'float4draw'
          }, dojo.byId('float4draw'));
          fp.startup();

          var titlePane = dojo.query('#float4draw .dojoxFloatingPaneTitle')[0];
          //add close button to title pane
          var closeDiv = dojo.create('div', {
              id:"closeBtn",
              innerHTML:'<a title="Close" href="JavaScript:bearpanther.toggleDraw();"><img src="images/close.png" alt="" /></a>'
          }, titlePane);

          var drawButton = new dijit.form.ToggleButton({
              label:'Draw',
              title:"Draw",
              id:"drawButton",
              iconClass:"esriMeasureIcon"
          });

          toolbar = new esri.toolbars.Draw(map);

          dojo.connect(toolbar, "onDrawEnd", bearpanther.addToMap);

          dojo.connect(drawButton, "onClick", function () {
              bearpanther.toggleDraw();
          });

          dojo.byId('webmap-toolbar-center').appendChild(drawButton.domNode);

          esri.show(dojo.byId('drawtoolsDiv'));

          var pointButton = dojo.byId("point");
          dojo.connect(pointButton, "onclick", function () {
              bearpanther.draw("point");
          });
          var multiPointButton = dojo.byId("multipoint");
          dojo.connect(multiPointButton, "onclick", function () {
              bearpanther.draw("multipoint");
          });
          var lineButton = dojo.byId("line");
          dojo.connect(lineButton, "onclick", function () {
              bearpanther.draw("line");
          });
          var polylineButton = dojo.byId("polyline");
          dojo.connect(polylineButton, "onclick", function () {
              bearpanther.draw("polyline");
          });
          var polygonButton = dojo.byId("polygon");
          dojo.connect(polygonButton, "onclick", function () {
              bearpanther.draw("polygon");
          });
          var freehandPolygonButton = dojo.byId("freehandpolygon");
          dojo.connect(freehandPolygonButton, "onclick", function () {
              bearpanther.draw("freehandpolygon");
          });
          var freehandPolylineButton = dojo.byId("freehandpolyline");
          dojo.connect(freehandPolylineButton, "onclick", function () {
              bearpanther.draw("freehandpolyline");
          });

      },

      toggleDraw:function () {
          if (dojo.byId('float4draw').style.visibility !== 'hidden') {
              dijit.byId('float4draw').hide();
              enablePopups(); //enable map popup windows
              dijit.byId('drawButton').set('checked', false); //uncheck the draw toggle button
              //deactivate the tool and clear the results
              toolbar.deactivate();
          } else {
              dijit.byId('float4draw').show();
              disablePopups(); //disable map popups otherwise they interfere with measure clicks

          }
      },

      drawActive: function(){

              var measure = dijit.byId('measureTool');
              measure.clearResult();
              if (measure.activeTool) {
                  measure.setTool(measure.activeTool, false);
              }

      },

      draw:function (type) {
          switch (type) {
              case "point":
                  bearpanther.drawActive();
                  toolbar.activate(esri.toolbars.Draw.POINT);
                  break;
              case "multipoint":
                  bearpanther.drawActive();
                  toolbar.activate(esri.toolbars.Draw.MULTI_POINT);
                  break;
              case "line":
                  bearpanther.drawActive();
                  toolbar.activate(esri.toolbars.Draw.LINE);
                  break;
              case "polyline":
                  bearpanther.drawActive();
                  toolbar.activate(esri.toolbars.Draw.POLYLINE);
                  break;
              case "polygon":
                  bearpanther.drawActive();
                  toolbar.activate(esri.toolbars.Draw.POLYGON);
                  break;
              case "freehandpolygon":
                  bearpanther.drawActive();
                  toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);
                  break;
              case "freehandpolyline":
                  bearpanther.drawActive();
                  toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
                  break;
          }
      },

      addToMap:function (geometry) {
          toolbar.deactivate();
          map.showZoomSlider();
          switch (geometry.type) {
              case "point":
                  var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
                  break;
              case "polyline":
                  var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
                  break;
              case "polygon":
                  var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
                  break;
              case "extent":
                  var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
                  break;
              case "multipoint":
                  var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), 1), new dojo.Color([255, 255, 0, 0.5]));
                  break;
          }
          var graphic2 = new esri.Graphic(geometry, symbol);
          map.graphics.add(graphic2);
      }

  }

A couple of requires for Dojo just to make sure we have them. I put them in this file so you could see the additional pieces. After that you will notice two global vars we will use in this script. bearpanther and toolbar. The reduced number of vars can sometimes help keep things organized and out of the global world.

The main part of this script is the addDrawToolbar function. We first define the the floating pane – notice how similar this is the layout.js measurement function. The big parts after that are to connect the toolbar to the map and connect the draw button to the toggleDraw function.

We then manually define the draw tools we want to use. Although this is a bit of typing we have total control over the tools and the names we want. This makes it very easy to follow along with what is going on. You will notice that each button (draw tool) makes a call to bearpanther.draw(). bearpanther.draw() contains a switch statement to activate the  draw tool that was selected by the user. You will also notice that part of the switch is calling drawActive(); This is modified from the layout.js script to make sure the meause widget is no longer active if the user was using it before a draw action. This section can definitely be changed a bit. Anywho… Earlier we did the – dojo.connect(toolbar, “onDrawEnd”, bearpanther.addToMap); The add to map is from the sample online so its not very interesting.

The last step was some css. I created float4draw when creating the floating pane so I need the css to match.

#float4draw {
 overflow:hidden;
 background-color:#fff;
 border: solid 1px #999;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius: 3px;
 padding:0px !important;
}

Thats about it. Ask questions if you need any help or if I missed anything. I did this about a month ago and dropped the ball on writing this post. Hopefully our readers can forgive this.

Comments
user

Author bill

Posted at 5:42 pm February 22, 2013.

Would you be able to post your entire code for this project ?
I’m hunting around the web for a draw tool bar complete with icon buttons etc …
Regards, Bill

Reply

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (1) ...