GEOG 863:
Web Application Development for Geospatial Professionals

4.3 Separate Your HTML, CSS and JS Source Code Using CodePen


4.3 Separate Your HTML, CSS and JS Source Code Using CodePen

The samples in the SDK are written with the CSS and JavaScript code embedded within the HTML code. This is fine for simple apps, but for more complex apps it is recommended that you write the CSS and JavaScript in separate files. Among the benefits to this approach are:

  • improved organization, making it easier to find your CSS or JS code rather than having to hunt in your HTML code for it;
  • the ability to reuse code that is applicable across projects;
  • shorter page load time through caching of the external files; and
  • the ability to “minify” the code, making it a smaller download for client devices.

Let's revisit the Intro to MapView (2D) sample in CodePen, looking to follow a code separation approach.  

  1. Return to CodePen.  (Here's the CodePen homepage if you no longer have the earlier samples open.)
  2. If you don’t yet have a CodePen account, click the Sign Up button and supply the info needed to establish a free account.

    After signing up, your browser window should open up to a new Pen (environment for authoring a new web page).
  3. Click the Change View button in the upper right and select your preferred Editor Layout option.
  4. Click the Save button. This will give your pen a randomly generated name (in the upper left).
  5. Click on the pencil icon to the right of the pen name and assign it a new name of hello_map.
  6. Go back to the Intro to MapView (2D) sample sandbox. Copy and Paste the three components of the sample into their respective panels in CodePen. Note the following:
    - You should omit the DOCTYPE declaration from the HTML piece.
    - Do not include the style and script tags surrounding the CSS and JS code, respectively.
    - Make sure that the <script src=....></script> tag is in the HTML window
    - You may find it most convenient to copy the complete sample (CSS and JS included) to the HTML panel, then cut and paste the CSS and JS pieces to their respective panels. (You can remove the empty style and script elements from your HTML when done.)
    - The code panels are resizable; if you’ve set the Editor Layout such that the code panels are arranged vertically to the side of the Preview panel, note that you can double-click on any of the panel headings to maximize that panel.