To achieve your task, combine our knowledge and just follow these instructions:
Let's make a map mashup that consists of a different tiles layer, a WMS layer. We will also play with the visibility to display a basic layer switcher.
First, we need to reuse the usual template that call OpenLayers 3 CSS and JavaScript for our code and put it on a local server:
<!doctype html> <html lang="en"> <head> <title>Playing with various sources and layers </title> <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" /> <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" /> </head> <body> <div id="map" class="map"></div> <script src="../assets/ol3/ol.js" ></script> <script> </script> </body> </html>
Now, we can begin to add our layers between the empty
<script>...