Creating custom builds

In this section we're going to create a custom build for the map you created at the last chapter.

  1. Start with the map.html file you created previously:

     <!doctype html>
     <html lang="en">
       <link rel="stylesheet" href="/ol.css" type="text/css">
       #map {
         height: 256px;
         width: 512px;
       <title>OpenLayers example</title>
       <script src="/loader.js" type="text/javascript"></script>
       <h1>My Map</h1>
       <div id="map"></div>
       <script type="text/javascript">
         var style = (function() {
           var stroke = new{
             color: 'black'
           var textStroke = new{
             color: '#fff',
             width: 3
           var textFill = new{
             color: '#000'
           return function(feature, resolution) {
             return [new{
               stroke: stroke,
               text: new{
                 font: '12px Calibri,sans-serif',
                 text: feature.get('key'),
                 fill: textFill,
                 stroke: textStroke
         var map = new ol.Map({
           target: 'map',
           layers: [
             new ol.layer.Tile({
               source: new ol.source.OSM()
             new ol.layer.Vector({
               title: 'Buildings',
               source: new ol.source.Vector({
                 url: '/data/layers/buildings.kml',
                 format: new ol.format.KML({
                   extractStyles: false
               style: style
           view: new ol.View({
             center: ol.proj.fromLonLat([-122.79264450073244, 42.30975194250527]),
             zoom: 16
  2. Create a build configuration file ol-custom.json for that map:

  "exports": [
  "jvm": [],
  "umd": true,
  "compile": {
    "externs": [
    "define": [
    "jscomp_error": [
    "jscomp_off": [
    "extra_annotation_name": [
      "api", "observable"
    "compilation_level": "ADVANCED",
    "warning_level": "VERBOSE",
    "use_types_for_optimization": true,
    "manage_closure_dependencies": true
  1. Create the custom build using OpenLayers's build.js Node script:

    $ node node_modules/openlayers/tasks/build.js ol-custom.json ol-custom.js

    This will generate the ol-custom.js custom build at the root of the the project.

  2. Now change map.html to use the custom build (ol-custom.js) rather than the development loader.

    So change

       <script src="/loader.js" type="text/javascript"></script>


       <script src="/ol-custom.js" type="text/javascript"></script>

The page should now load much faster than before!