An Introduction to OpenLayers 3, Part II

Last week, we created a basic web map by loading a basemap from OpenStreetMap using OpenLayers 3 (OL3).  If you missed last week's post, below are links to the code:

• Click to view the text file
• Click for the HTML file 

This week I will cover copying OL3's JavaScript libraries to a web hosting service. Also, note that you can run basic OpenLayers code off your computer--it simply depends on where the sources of data are located and how the code is written.

In order to get your map visible on the web, you will need a web hosting service or your own server.  After setting up an account, you will have a chance to upload files. Before that, there are a few things you need to know:

• You will upload folders and files from the OL3 JavaScript library to the public or root directory of your web hosting service.  
• In some cases, this is simply a matter of placing files in a folder; for some services you may have to set permission levels to public/everyone.
• An additional step for uploading and accessing layers.
•  In the next post, we will upload, use, and symbolize this uploaded layer.  
• OL3 runs client-side (vs the server) so keep that in mind, so you won't want to use this method for large layers.
• You don't need to do this step or the next one if you are accessing layers using a web map service or WMS.
• Later I will also look at using GeoServer for more complex layers.
• In addition, you will have to create a simple web config file to access files on your web hosting service. 
• This can be done in a text editor, like Notepad. 
• For example if you plan to use KML files, you will have upload a file with the following code for particular media or MIME types. 
• Click to magnify the screenshot below for an example for a *.kml file.

You can find code for other MIME types by searching the web.
Save this code as web.config and upload to the root directory of your web hosting service.

After downloading and unpacking the *.zip file from OL3 (or OL2), you will see several folders and files. 

• Consider copying all the folders and files over to see examples and understand how the code works
• Keep in mind how you copy folders and files over, since this will affect how you write code and reference directories.
• Lastly, the ol.js file you need is in the build folder.  In the first example that I showed (in the code above), you need to change the link to the OL3 website from "http://ol3js.org/en/master/build/ol.js" to "build/ol.js."  The same goes for the css stylesheet.

Next time, we will look at uploading, using, and symbolizing a KML.

For serious developers, be sure to check out the OL3 wiki at: https://github.com/openlayers/ol3/wiki