Crater Lake National Park

NPMap

Digital maps for the National Park Service

Setting up a development environment

Visual learner? This tutorial is also available as a video walkthrough.

You'll need to setup a development environment before you get started building maps with NPMap. Luckily, NPMap utilizes standard web technologies (HTML, CSS, and JavaScript) and has no server-side dependencies, so setting up a development environment is easy. In fact, you may already have all of the tools you need to start building web maps installed on your computer.

This tutorial is meant to serve as a set of general recommendations and not as hard-and-fast rules. Everybody has their own favorite tools, so feel free to substitute a personal favorite in for any of the tools we talk about below. While building our list, we placed an emphasis on high quality, open source tools.

The Technologies

First of all, you should become as familiar as possible with the following technologies/languages:

Familiarity with HTML, CSS, and JavaScript will make it easier for you to become proficient with NPMap.

If you're looking for a good place to start learning about HTML, CSS, and JavaScript, you might want to take a look at Google's "HTML, CSS, and JavaScript from the Ground Up" series in the Google Code University.

The Tools

  • Text editor: HTML, CSS, and JavaScript can all be written with a basic text editor. In fact, we recommend using a basic text editor for building NPMap web maps, as doing so allows you to become more familiar with what is going on "behind the scenes". Using development tools like Dreamweaver and Visual Studio may seem easier at first, but they make it easier for you to develop bad habits and write shoddy code. Recommended tools: Notepad++ for Windows and Kod for OS X.
  • Web browser: Being that you are writing code for the web, you're going to need a web browser to help you design and debug. In fact, you'll likely spend the majority of your time in the browser, viewing and modifying CSS/HTML and debugging JavaScript. Recommended tools: Google Chrome, Firefox, or Safari.
  • Web server: A web server is not required for most NPMap development, but there are a few things that require serving your web page from an actual web server rather than just running it from your local file system. This may or may not be possible for you, depending on IT security restrictions, etc. Recommended tool: If you're running Windows, Mongoose is an open source and cross-platform web server that does not require an installation. If you're looking for a quick-and-dirty web server, you may want to take a look at it. OS X comes with Apache installed.

Other Helpful Tools

These tools are useful if you need to do graphic design or manipulate geospatial datasets. These are absolutely not required for developing web apps, but we wanted to list them here, as they are critical tools in our workflow:

Next Step

Now that you have a development environment setup and ready to go, you are ready to create an HTML page.