OpenLayers 3 Beginner’s Guide

Creating a style function

Open sample in a new windows

<!doctype html>
    <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" />
    <div id="map" class="map"></div>
    <script src=""></script>
    <script src="../assets/ol3/js/ol-debug.js"></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',
      extractStyles: false

    // use a style function to replace the styles in the KML file
    // this is a placeholder for now
    function flickrStyle(feature) {
      var style = new{
        image: new{
          radius: 6,
          stroke: new{
            color: 'white',
            width: 2
          fill: new{
            color: 'green'
      return [style];

    var flickrLayer = new ol.layer.Vector({
      source: flickrSource,
      style: flickrStyle

    var layer = new ol.layer.Tile({
      source: new ol.source.OSM()

    var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

    var view = new ol.View({
      center: center,
      zoom: 2

    var map = new ol.Map({
      target: 'map',
      layers: [layer, flickrLayer],
      view: view