OpenLayers 3 Beginner’s Guide

Creating a map

Open sample in a new windows

<!doctype html>
<html>
  <head>
    <title>OpenLayers Components</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>
    <div id="overlay" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;"></div>
    <script src="../assets/ol3/js/ol-debug.js"></script>
    <script>
        // create a layer with the OSM source
        var layer = new ol.layer.Tile({
          source: new ol.source.OSM()
        });

        // create an interaction to add to the map that isn't there by default
        var interaction = new ol.interaction.DragRotateAndZoom();

        // create a control to add to the map that isn't there by default
        var control = new ol.control.FullScreen();

        // center on london, transforming to map projection
        var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

        // an overlay to position at the center
        var overlay = new ol.Overlay({
          position: center,
          element: document.getElementById('overlay')
        });

        // view, starting at the center
        var view = new ol.View({
          center: center,
          zoom: 6
        });

        // finally, the map with our custom interactions, controls and overlays
        var map = new ol.Map({
          target: 'map',
          layers: [layer],
          interactions: [interaction],
          controls: [control],
          overlays: [overlay],
          view: view
        });
    </script>
  </body>
</html>