OpenLayers 3 Beginner’s Guide

Adding dynamic tags to your map

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>
    <div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px; background-color: rgba(255,255,255,0.5);">
      <input type="text" placeholder="Search photos by tag(s)" style="width: 200px">
      <button type="button">Search</button>
    <div id="photo-info"></div>
    <script src=""></script>
    <script src="../assets/ol3/js/ol.js"></script>
    var flickrSource = new ol.source.Vector();

    var cache = {};

    function photoStyle(feature, scale) {
      var url = feature.get('url');
      var key = scale + url;
      if (!cache[key]) {
        cache[key] = new{
          image: new{
            scale: scale,
            src: url
      return cache[key];

    function flickrStyle(feature) {
      return [photoStyle(feature, 0.10)];

    function selectedStyle(feature) {
      return [photoStyle(feature, 0.50)];

    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({
      renderer: 'canvas',
      target: 'map',
      layers: [layer, flickrLayer],
      view: view

    function photoContent(feature) {
      var content = $('#photo-template').html();
      var keys = ['author','author_id','date_taken','latitude','longitude','link','url','tags','title'];
      for (var i=0; i<keys.length; i++) {
        var key = keys[i];
        var value = feature.get(key);
        content = content.replace('{'+key+'}',value);
      return content;

    var select = new ol.interaction.Select({
      layers: [flickrLayer],
      style: selectedStyle


    var selectedFeatures = select.getFeatures();

    selectedFeatures.on('add', function(event) {
      var feature =;
      var content = photoContent(feature);

    selectedFeatures.on('remove', function(event) {

    function successHandler(data) {
      var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
      data.items.forEach(function(item) {
        var feature = new ol.Feature(item);
        var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
        var geometry = new ol.geom.Point(coordinate);

    // by moving the data loading into a function, we can call it with the user's
    // search term and construct a new URL getting photos for the relevant tags.
    // we can also clear existing features and selected features.
    function loadFlickrFeed(tags) {
        url: '',
        data: {
          format: 'json',
          tags: tags
        dataType: 'jsonp',
        jsonpCallback: 'jsonFlickrFeed',
        success: successHandler

    // use jQuery to handle the user clicking the search button
    $(document).on('click', '#search button', function() {
      var value = $('#search input').val();
      var tags = value.split(' ').join(',');


    <script type="text/html" id="photo-template">
      <a href="{link}" target="_blank" title="Click to open photo in new tab"><img src="{url}" style="float: left"></a><br>
      <p>Taken by <a href="{author_id}" target="_blank" title="Click to view author details in new tab">{author}</a> on {date_taken} at lat: {latitude} lon: {longitude}</p><br>
      <p>Tagged in <b>{tags}</b></p>