Open Layers - Photos as Point Icon not displaying

This is my first foray into both javascript and openlayers after the purchase of the Packt Open Layers book.

In summary I am looking to return thumbnails of georeferenced photos to markers on the map, in a similar fashion similar to this example (http://dev.openlayers.org/examples/georss-flickr.html) by using the code example from the book.

I modified the script from the book to

use the flickr.photos.search API;
1. created the photo urls out of the photos constituent parts
  ('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')

both of which seem to work fine and worked when using a standard point marker.

The piece I am stuck on is the display of the georeferenced thumbnails as markers. I believe I properly created an array of (Long,lat) to assign to each photo, but the thumbnails are not showing up as intended, despite my best efforts.

Thanks for any advice on getting the thumbnails to display!

My code is as follows:

    <!doctype html>

    <html>

      <head>

        <title>Flickr Search</title>

        <link rel="stylesheet" href="../assets/ol4/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="photo-info"></div>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

        <script src="../assets/ol4/js/ol-debug.js"></script>

        <script>



        var flickrSource = new ol.source.Vector();



        var cache = {};



        function photoStyle(feature, scale) {

          console.log(feature)

        var url = feature.get('url');

          var key = scale + url;

          if (!cache[key]) {

            cache[key] = new ol.style.Style({

              image: new ol.style.Icon({

                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([-8159524.043141224, 5036079.453856719], 'EPSG:4326', 'EPSG:4326');



        var view = new ol.View({

          center: center,

          zoom: 12

        });



        var map = new ol.Map({

          renderer: 'canvas',

          target: 'map',

          layers: [layer, flickrLayer],

          view: view

        });



        function photoContent(feature) {

          var content = $('#photo-template').html();

          var keys = ['url','owner','date_taken','latitude','longitude','tags','title','description'];

          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

        });



        map.addInteraction(select);



        var selectedFeatures = select.getFeatures();



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

          var feature = event.target.item(0);

          var content = photoContent(feature);

          $('#photo-info').html(content);

        });



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

          $('#photo-info').empty();

        });



        function successHandler(data) {

          var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

         data.photos.photo.forEach(function(item) {

            var feature = new ol.Feature(item);

        var longurl=document.createTextNode('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg');



        var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);



        item["url"] = longurl;



            var geometry = new ol.geom.Point(coordinate);

            feature.setGeometry(geometry);

            flickrSource.addFeature(feature);

          });

        }



        // the only change is to point at the remote URL for the feed

        $.ajax({

          url: 'https://api.flickr.com/services/rest/',

        type: 'GET',

          data: {

          api_key:'8aeb07270bee5086ce1a08605fc22c6f',

          method: 'flickr.photos.search',   

          format: 'json',

          tags: 'bird',

          per_page: 100,

          extras:'geo,date_taken,tags,description',

          bbox:'-73.48965402624748,41.088712779781275,-73.10684915564202,41.23268393804162',

          page: 1},

          dataType: 'jsonp',

          jsonpCallback: 'jsonFlickrApi',

          success: successHandler

        });



        </script>









  <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="http://www.flickr.com/people/{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>

    </script>



</body>

</html>

edited Nov 27 '18 at 17:53

asked Nov 27 '18 at 17:41

user17104

284

try and check if the coordinates are correct, just adding not styled features, if the features with default styles appear, than probably the issue that the images are not loaded yet

– line88
Nov 28 '18 at 14:21

add a comment |

This is my first foray into both javascript and openlayers after the purchase of the Packt Open Layers book.

I modified the script from the book to

use the flickr.photos.search API;
1. created the photo urls out of the photos constituent parts
  ('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')

both of which seem to work fine and worked when using a standard point marker.

Thanks for any advice on getting the thumbnails to display!

My code is as follows:

    <!doctype html>

    <html>

      <head>

        <title>Flickr Search</title>

        <link rel="stylesheet" href="../assets/ol4/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="photo-info"></div>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

        <script src="../assets/ol4/js/ol-debug.js"></script>

        <script>



        var flickrSource = new ol.source.Vector();



        var cache = {};



        function photoStyle(feature, scale) {

          console.log(feature)

        var url = feature.get('url');

          var key = scale + url;

          if (!cache[key]) {

            cache[key] = new ol.style.Style({

              image: new ol.style.Icon({

                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([-8159524.043141224, 5036079.453856719], 'EPSG:4326', 'EPSG:4326');



        var view = new ol.View({

          center: center,

          zoom: 12

        });



        var map = new ol.Map({

          renderer: 'canvas',

          target: 'map',

          layers: [layer, flickrLayer],

          view: view

        });



        function photoContent(feature) {

          var content = $('#photo-template').html();

          var keys = ['url','owner','date_taken','latitude','longitude','tags','title','description'];

          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

        });



        map.addInteraction(select);



        var selectedFeatures = select.getFeatures();



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

          var feature = event.target.item(0);

          var content = photoContent(feature);

          $('#photo-info').html(content);

        });



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

          $('#photo-info').empty();

        });



        function successHandler(data) {

          var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

         data.photos.photo.forEach(function(item) {

            var feature = new ol.Feature(item);

        var longurl=document.createTextNode('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg');



        var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);



        item["url"] = longurl;



            var geometry = new ol.geom.Point(coordinate);

            feature.setGeometry(geometry);

            flickrSource.addFeature(feature);

          });

        }



        // the only change is to point at the remote URL for the feed

        $.ajax({

          url: 'https://api.flickr.com/services/rest/',

        type: 'GET',

          data: {

          api_key:'8aeb07270bee5086ce1a08605fc22c6f',

          method: 'flickr.photos.search',   

          format: 'json',

          tags: 'bird',

          per_page: 100,

          extras:'geo,date_taken,tags,description',

          bbox:'-73.48965402624748,41.088712779781275,-73.10684915564202,41.23268393804162',

          page: 1},

          dataType: 'jsonp',

          jsonpCallback: 'jsonFlickrApi',

          success: successHandler

        });



        </script>









  <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="http://www.flickr.com/people/{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>

    </script>



</body>

</html>

edited Nov 27 '18 at 17:53

asked Nov 27 '18 at 17:41

user17104

284

try and check if the coordinates are correct, just adding not styled features, if the features with default styles appear, than probably the issue that the images are not loaded yet

– line88
Nov 28 '18 at 14:21

add a comment |

This is my first foray into both javascript and openlayers after the purchase of the Packt Open Layers book.

I modified the script from the book to

use the flickr.photos.search API;
1. created the photo urls out of the photos constituent parts
  ('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')

both of which seem to work fine and worked when using a standard point marker.

Thanks for any advice on getting the thumbnails to display!

My code is as follows:

    <!doctype html>

    <html>

      <head>

        <title>Flickr Search</title>

        <link rel="stylesheet" href="../assets/ol4/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="photo-info"></div>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

        <script src="../assets/ol4/js/ol-debug.js"></script>

        <script>



        var flickrSource = new ol.source.Vector();



        var cache = {};



        function photoStyle(feature, scale) {

          console.log(feature)

        var url = feature.get('url');

          var key = scale + url;

          if (!cache[key]) {

            cache[key] = new ol.style.Style({

              image: new ol.style.Icon({

                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([-8159524.043141224, 5036079.453856719], 'EPSG:4326', 'EPSG:4326');



        var view = new ol.View({

          center: center,

          zoom: 12

        });



        var map = new ol.Map({

          renderer: 'canvas',

          target: 'map',

          layers: [layer, flickrLayer],

          view: view

        });



        function photoContent(feature) {

          var content = $('#photo-template').html();

          var keys = ['url','owner','date_taken','latitude','longitude','tags','title','description'];

          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

        });



        map.addInteraction(select);



        var selectedFeatures = select.getFeatures();



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

          var feature = event.target.item(0);

          var content = photoContent(feature);

          $('#photo-info').html(content);

        });



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

          $('#photo-info').empty();

        });



        function successHandler(data) {

          var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

         data.photos.photo.forEach(function(item) {

            var feature = new ol.Feature(item);

        var longurl=document.createTextNode('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg');



        var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);



        item["url"] = longurl;



            var geometry = new ol.geom.Point(coordinate);

            feature.setGeometry(geometry);

            flickrSource.addFeature(feature);

          });

        }



        // the only change is to point at the remote URL for the feed

        $.ajax({

          url: 'https://api.flickr.com/services/rest/',

        type: 'GET',

          data: {

          api_key:'8aeb07270bee5086ce1a08605fc22c6f',

          method: 'flickr.photos.search',   

          format: 'json',

          tags: 'bird',

          per_page: 100,

          extras:'geo,date_taken,tags,description',

          bbox:'-73.48965402624748,41.088712779781275,-73.10684915564202,41.23268393804162',

          page: 1},

          dataType: 'jsonp',

          jsonpCallback: 'jsonFlickrApi',

          success: successHandler

        });



        </script>









  <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="http://www.flickr.com/people/{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>

    </script>



</body>

</html>

edited Nov 27 '18 at 17:53

asked Nov 27 '18 at 17:41

user17104

284

This is my first foray into both javascript and openlayers after the purchase of the Packt Open Layers book.

I modified the script from the book to

use the flickr.photos.search API;
1. created the photo urls out of the photos constituent parts
  ('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')

both of which seem to work fine and worked when using a standard point marker.

Thanks for any advice on getting the thumbnails to display!

My code is as follows:

    <!doctype html>

    <html>

      <head>

        <title>Flickr Search</title>

        <link rel="stylesheet" href="../assets/ol4/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="photo-info"></div>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

        <script src="../assets/ol4/js/ol-debug.js"></script>

        <script>



        var flickrSource = new ol.source.Vector();



        var cache = {};



        function photoStyle(feature, scale) {

          console.log(feature)

        var url = feature.get('url');

          var key = scale + url;

          if (!cache[key]) {

            cache[key] = new ol.style.Style({

              image: new ol.style.Icon({

                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([-8159524.043141224, 5036079.453856719], 'EPSG:4326', 'EPSG:4326');



        var view = new ol.View({

          center: center,

          zoom: 12

        });



        var map = new ol.Map({

          renderer: 'canvas',

          target: 'map',

          layers: [layer, flickrLayer],

          view: view

        });



        function photoContent(feature) {

          var content = $('#photo-template').html();

          var keys = ['url','owner','date_taken','latitude','longitude','tags','title','description'];

          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

        });



        map.addInteraction(select);



        var selectedFeatures = select.getFeatures();



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

          var feature = event.target.item(0);

          var content = photoContent(feature);

          $('#photo-info').html(content);

        });



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

          $('#photo-info').empty();

        });



        function successHandler(data) {

          var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

         data.photos.photo.forEach(function(item) {

            var feature = new ol.Feature(item);

        var longurl=document.createTextNode('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg');



        var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);



        item["url"] = longurl;



            var geometry = new ol.geom.Point(coordinate);

            feature.setGeometry(geometry);

            flickrSource.addFeature(feature);

          });

        }



        // the only change is to point at the remote URL for the feed

        $.ajax({

          url: 'https://api.flickr.com/services/rest/',

        type: 'GET',

          data: {

          api_key:'8aeb07270bee5086ce1a08605fc22c6f',

          method: 'flickr.photos.search',   

          format: 'json',

          tags: 'bird',

          per_page: 100,

          extras:'geo,date_taken,tags,description',

          bbox:'-73.48965402624748,41.088712779781275,-73.10684915564202,41.23268393804162',

          page: 1},

          dataType: 'jsonp',

          jsonpCallback: 'jsonFlickrApi',

          success: successHandler

        });



        </script>









  <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="http://www.flickr.com/people/{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>

    </script>



</body>

</html>

gis openlayers

edited Nov 27 '18 at 17:53

asked Nov 27 '18 at 17:41

user17104

284

edited Nov 27 '18 at 17:53

asked Nov 27 '18 at 17:41

user17104

284

edited Nov 27 '18 at 17:53

asked Nov 27 '18 at 17:41

user17104

284

asked Nov 27 '18 at 17:41

user17104

284

asked Nov 27 '18 at 17:41

user17104

284

try and check if the coordinates are correct, just adding not styled features, if the features with default styles appear, than probably the issue that the images are not loaded yet

– line88
Nov 28 '18 at 14:21

add a comment |

try and check if the coordinates are correct, just adding not styled features, if the features with default styles appear, than probably the issue that the images are not loaded yet

– line88
Nov 28 '18 at 14:21

try and check if the coordinates are correct, just adding not styled features, if the features with default styles appear, than probably the issue that the images are not loaded yet

– line88
Nov 28 '18 at 14:21

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53505262%2fopen-layers-photos-as-point-icon-not-displaying%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl