Open Layers - Photos as Point Icon not displaying
0
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;
- created the photo urls out of the photos constituent parts
('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')
- created the photo urls out of the photos constituent parts
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>
gis openlayers
asked Nov 27 '18 at 17:41
user17104user17104
284
add a comment |
0
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;
- created the photo urls out of the photos constituent parts
('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')
- created the photo urls out of the photos constituent parts
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>
gis openlayers
asked Nov 27 '18 at 17:41
user17104user17104
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 |
0
0
0
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;
- created the photo urls out of the photos constituent parts
('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')
- created the photo urls out of the photos constituent parts
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>
gis openlayers
asked Nov 27 '18 at 17:41
user17104user17104
284
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;
- created the photo urls out of the photos constituent parts
('https://farm'+item.farm+'.staticflickr.com/'+item.server+'/'+item.id+'_'+item.secret+'.jpg')
- created the photo urls out of the photos constituent parts
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>
gis openlayers
gis openlayers
asked Nov 27 '18 at 17:41
user17104user17104
284
asked Nov 27 '18 at 17:41
user17104user17104
284
edited Nov 27 '18 at 17:53
user17104
asked Nov 27 '18 at 17:41
user17104user17104
284
asked Nov 27 '18 at 17:41
user17104user17104
284
asked Nov 27 '18 at 17:41
user17104user17104
284
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
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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