OpenLayers 3 Beginner’s Guide

Adding data to your map

Open sample in a new windows

<!doctype html>
<html>
  <head>
    <title>Flickr Search</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/js/ol-debug.js"></script>
    <script>

    // the source of our photos is a KML file
    var flickrSource = new ol.source.KML({
      url: '../assets/data/flickr_data.kml',
      projection: 'EPSG:3857'
    });

    // the vector layer uses the source
    var flickrLayer = new ol.layer.Vector({
      source: flickrSource
    });

    // a tile layer as a base map to provide context
    var layer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

    // center on 0,0 and transform for the view's projection
    var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

    // a suitable starting point for the map's view
    var view = new ol.View({
      center: center,
      zoom: 1
    });

    // the map goes in the map div
    var map = new ol.Map({
      target: 'map',
      layers: [layer, flickrLayer],
      view: view
    });

    </script>
  </body>
</html>