csergent08

Planning Your Destination

Blog Post created by csergent08 Champion on Jan 5, 2015

The year has just started and as you know I am a Star Wars fan. This weekend mad my plan to watch all the Star Wars movies, one per month leading up to the brand new Star Wars, episode VII. I plan on watching Star Wars Episode IV, V, II, III, and then VI for the first five months. This allows for the surprise twist in The Empire Strikes Back(Episode V) to not be spoiled with a to movie flashback and then completing and then wrapping up the series with Episode VI. Okay, one movie a month. Once that series is complete I plan on watching one episode per month in chronological order. That will allow me to watch one Star Wars movie per month with finale being in December. Why is this important? It means my requirements for enjoying one movie per month until the release of the new Star Wars. It's also manageable as it is in small increments meaning it increases my chances of accomplishing my goal.

 

This is the same reason why I am blogging integrating Esri samples piece by piece. As I build my application I may run into issues and it's a lot easier to manage one problem at a time to build a successful application. For this post, it's a lot to say for little production on the app thus far, but I want to keep the first tool simple so it's easy to follow. So let's take a look. As I said I keep my content, presentation and behavior separate. The first item I added to the template application that I am building is the home button.

 

The Content

      <!-- Map Section Begin -->
        <section id="mapSection">


            <!-- Home Button Begin -->
            <div id="homeButton">


            </div>
            <!-- Home Button End -->
        
        </section>
        <!-- Map Section End -->

 

This provides an example of how I like to document my code with a home button begin which is easy to tell with a div id, but the second div has nothing. As your site grows, the ending comment of <!--- Home Button End --> can be huge when you have a lot of ending div tags. You will see this type of documentation throughout my application development. I also placed the map in an HTML5 section element.

 

Behavior

Another thing that I have done is I am adding references to my require statement in the JavaScript. This will allow me to take out require statements out if I remove all tools that need it. Here is an example:

require(["esri/map",
         "esri/dijit/HomeButton",                   // homeButton
         "esri/layers/ArcGISDynamicMapServiceLayer",
         "dojo/domReady!"],

Now all we have to do is add the functionality for the HomeButton which when clicked on will bring the map to the full extent of the map service or the defined full extent.

// add homeButton begin
             var home = new HomeButton({
                 map: map
             }, "homeButton");
             home.startup();
             // add homeButton end

 

Presentation

You may want to control where you want the Home button to be located for a nicer display of your map application so we can add a little css to position below the zoom in zoom out buttons.

#homeButton
{
    position:absolute;
    top:95px;
    left:20px;
    z-index:50;
}

 

This is just one tool, but this will provide us the foundation to integrating more tools in the application. If you would like to check out the updated application or browse through the complete code, you can look at it or download it here: csergent45/gisTemplate at 70bda01e7a923d1225591732a2855a34eabbc6f4 · GitHub

 

Now that we have this tool complete, the next step will be to add a Locate Button.

Outcomes