Contacto +52(442)298-0967 msn@swideascom

OpenLayers 3 + Bootstrap 3 – First steps

OpenLayers 3 + Bootstrap 3 – First steps

OpenLayers_Icon[1]Step 1 – Setting the ground

Even if you actually know how to make your Bootstrap test-ground, I highly recommend you give this a try, if not, just go to step 2 (Windows users), if you’re not using .git (shame on you, you should fell bad about that), go to step 2, for the cool ones open your favorite flavor console/terminal and create your dir & gitit :

Just to be shure, check if git folder is really there:

Ok, we should only see the .git folder, now we’re ready to add the dependencies using bower, we only need to request for Bootstrap CDN  and his dependencies (yes I’m talking of jQuery js/css files) will came to us, so type this:

and the result should look like this:

If you prefer to load Bootstrap and OpenLayers scripts using them CDN (rememeber to be testing this as non-local file -any local http server will works-, check out npm local-web-server), just go with it.

Now to the fun part -yeiii-, create our test-file let’s call it ol1-cdn.html, here I recommend go as raw as possible, just with something like this inside our BODY tag will work:

Inside HEAD tag:

Above our closing body tag, the real magic will be inside our ol-cdn.js file (line 5 from below), this is because even for testing purposes, putting your JS code inside your HTML it’s just wrong:

openlayers_monster[1]Step 2 – Displaying the map

Lets start with Immediately Invoked Function Expressions (IIFEs). IIFEs are an ideal solution for locally scoping global variables/properties and protecting your JavaScript codebase from outside interference (e.g. third-party libraries). Real life maps are part of bigger-complex applications so we’re looking for make it as modular and scalable as possible.

OpenLayers maps works using layers -wow-, this layers or array of layers are obects from class ol.layer, we’re using a function to retrieve thos layer(s) before we use them inside the map:

Lets starts with the OnLoad behavior, marked line shows where the result of previus step is being used:

This is the result

Next tutorial we’ll be loading KML files into this puppy. Thanks for reading.

Feeling sceptical about? Wacht it work here, you can download the files from this demo here or go to Github and clone it.


CEO SWFideas pro·gram·mer (n) An organism capable of converting caffeine into code. *RichMedia Developer | *Homodevelopus


Leave a reply