|  Login

Map Tools Styled


So today we're going to be doing some really cool stuff.  I don't expect you to remember all of what we do here but what I do expect is that you will be able to reproduce this type of design and structure by stopping back here from time to time and changing up your code to match your desired styles.  By the time we're done here today you should have a good template that works and is flexible enough for you to make your web map personalized and functional.

One of the cool things about working with software APIs is that we often get access to pre-release versions that include updates that are not yet in the current version.  OpenLayers is no different in this respect.  That being said we will grab a pre-release version so that we can do some stuff with the tools that we were not able to do in the current version.  This will require you to download the zip file and extract it to a working directory.  This zip file contains the entire OpenLayers script library, some images and some css classes.  The file is located here for download.  You will want to extract this in the working directory that you have been using.  If you have personalized any images for the site you will not want to overwrite them but all of the other files you will need.  Once you get that done let's just do a quick test map to make sure you have extracted the files properly.  First make sure your directory looks like mine here.  You will see all of my files from the prior map tutorials.

Directory View

Now we can create a test page to make sure the files link properly.  I assume you could figure this part out but just in case you still need a hand with this we will create the beginning map like we did earlier and link it to the openlayer.js in this directory rather than to the online version.

<script src="/imapapps/portals/0/OpenLayers.js"></script>
<style type="text/css">
html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
var map;
  function initialize() {
     map = new OpenLayers.Map("map_canvas");
     var mapbase = new OpenLayers.Layer.ArcGIS93Rest("ArcGIS Server Layer",
           { layers: "show:0", dpi: 96, FORMAT: "png24" });
     map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12); 
<body onload="initialize()">
<div id="map_canvas"></div>

I saved mine as testme.html as we will be deleting it directly after confirming that it works and a map is created.  Simply open your test file in a browser and if a map shows up you are good to go, if not you might have missed something so you might want to reread above.  If you still can't figure it out after rereading please email me and i will help you get it right before you proceed.

We have one more thing that we should do before we start writing code.  That is to get an ftp client setup.  You may notice that in the zip file there are 368 files.  This could be very tedious and annoying to upload individually.  This is why we will use an ftp client.  There are many different free ftp clients.  I am not going to show you all of the different flavors but rather teach you how to setup FileZilla which is free and pretty simple to use.  If you would rather use a different one by all means use what you feel comfortable using.  FileZilla can be downloaded at http://filezilla-project.org/ You will just need to download the Client software and install.  Once you have it installed you will be able to login to your server that you setup back in the Adding KML Layers notice on the account manager page there is a section that says Your Personal FTP Information.  That is what you need to enter in the matching boxes on FileZilla.  You will be able to leave the port box empty then hit Quickconnect.  If you entered the information correctly you will be logged in and should see your files on the right side under the command line box of FileZilla.  You can now drag and drop your files from your desktop folder to this window and it will take care of uploading.  I would suggest leaving the test.html in there to confirm you uploaded it correctly.  After you have confirmed, go ahead and delete that.