Ufdjrw

How are presidential pardons supposed to be used?

How did the audience guess the pentatonic scale in Bobby McFerrin's presentation?

Can smartphones with the same camera sensor have different image quality?

How should I replace vector<uint8_t>::const_iterator in an API?

How can I protect witches in combat who wear limited clothing?

Is it ethical to upload a automatically generated paper to a non peer-reviewed site as part of a larger research?

How do you keep chess fun when your opponent constantly beats you?

How many people can fit inside Mordenkainen's Magnificent Mansion?

Simulating Exploding Dice

Relations between two reciprocal partial derivatives?

High Q peak in frequency response means what in time domain?

ELI5: Why do they say that Israel would have been the fourth country to land a spacecraft on the Moon and why do they call it low cost?

He got a vote 80% that of Emmanuel Macron’s

Does Parliament need to approve the new Brexit delay to 31 October 2019?

Cooking pasta in a water boiler

Arduino Pro Micro - switch off LEDs

How to test the equality of two Pearson correlation coefficients computed from the same sample?

Sort a list of pairs representing an acyclic, partial automorphism

Is above average number of years spent on PhD considered a red flag in future academia or industry positions?

Segmentation fault output is suppressed when piping stdin into a function. Why?

Can undead you have reanimated wait inside a portable hole?

Take groceries in checked luggage

Do warforged have souls?

Who or what is the being for whom Being is a question for Heidegger?

Openlayers 5 icons are not showing on the map

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I'm using OpenLayers 5 to create a simple map with icons on it. I have followed the Icon Colors example and it works. Now, I changed the source data from an array. I have, for example, four points to show on the map.

window.locs = [
 "y": "52,51241",
 "x": "13,38961"
 , 
 "y": "52,52107",
 "x": "13,38773"
 , 
 "y": "52,52488",
 "x": "13,40369"
 , 
 "y": "52,54902",
 "x": "13,41655"
 ];

I only change the part where we create the vector source, from manually setting one by one to using a loop.

for (var i in window.locs) 
 var data = window.locs[i];
 iconFeature = new ol.Feature(
 geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(data.x.replace(",", ".")), parseFloat(data.y.replace(",", "."))]))
 );

 iconFeature.setStyle(new ol.style.Style(
 image: new ol.style.Icon(/** @type module:ol/style/Icon~Options */(
 color: [113, 140, 0],
 crossOrigin: 'anonymous',
 src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
 ))
 ));
 window.iconFeatures.push(iconFeature);

var vectorSource = new ol.source.Vector(
 features: window.iconFeatures
 );

Unfortunately, the icons are not showing on the map. If I don't use the loop, the icons are shown. I have a lot of data and cannot assign the value one by one.

This is my JSFiddle: Fiddle

How can I resolve this?

javascript html openlayers openlayers-5

share|improve this question

edited Mar 8 at 13:58

User2018

asked Mar 8 at 13:42

User2018User2018

68111

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  Your fiddle needs map.addLayer(vectorLayer); Apart from that it seems to be working correctly.
  
  – Mike
  Mar 8 at 14:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Mike Wow. Thank you! Why don't they use 'addLayer' in the example though? There is no explanation about it there. And can you post this as an answer so I can accept it?
  
  – User2018
  Mar 8 at 14:23
  
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  The map is created after the layers so both layers can be included in the setup.
  
  – Mike
  Mar 8 at 14:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi @Mike, can you post your comment as an answer so I can accept it?
  
  – User2018
  Mar 14 at 13:46
  

  
  
  
  

add a comment | 

0

I'm using OpenLayers 5 to create a simple map with icons on it. I have followed the Icon Colors example and it works. Now, I changed the source data from an array. I have, for example, four points to show on the map.

window.locs = [
 "y": "52,51241",
 "x": "13,38961"
 , 
 "y": "52,52107",
 "x": "13,38773"
 , 
 "y": "52,52488",
 "x": "13,40369"
 , 
 "y": "52,54902",
 "x": "13,41655"
 ];

I only change the part where we create the vector source, from manually setting one by one to using a loop.

for (var i in window.locs) 
 var data = window.locs[i];
 iconFeature = new ol.Feature(
 geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(data.x.replace(",", ".")), parseFloat(data.y.replace(",", "."))]))
 );

 iconFeature.setStyle(new ol.style.Style(
 image: new ol.style.Icon(/** @type module:ol/style/Icon~Options */(
 color: [113, 140, 0],
 crossOrigin: 'anonymous',
 src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
 ))
 ));
 window.iconFeatures.push(iconFeature);

var vectorSource = new ol.source.Vector(
 features: window.iconFeatures
 );

Unfortunately, the icons are not showing on the map. If I don't use the loop, the icons are shown. I have a lot of data and cannot assign the value one by one.

This is my JSFiddle: Fiddle

How can I resolve this?

javascript html openlayers openlayers-5

share|improve this question

edited Mar 8 at 13:58

User2018

asked Mar 8 at 13:42

User2018User2018

68111

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  Your fiddle needs map.addLayer(vectorLayer); Apart from that it seems to be working correctly.
  
  – Mike
  Mar 8 at 14:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Mike Wow. Thank you! Why don't they use 'addLayer' in the example though? There is no explanation about it there. And can you post this as an answer so I can accept it?
  
  – User2018
  Mar 8 at 14:23
  
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  The map is created after the layers so both layers can be included in the setup.
  
  – Mike
  Mar 8 at 14:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi @Mike, can you post your comment as an answer so I can accept it?
  
  – User2018
  Mar 14 at 13:46
  

  
  
  
  

add a comment | 

I'm using OpenLayers 5 to create a simple map with icons on it. I have followed the Icon Colors example and it works. Now, I changed the source data from an array. I have, for example, four points to show on the map.

window.locs = [
 "y": "52,51241",
 "x": "13,38961"
 , 
 "y": "52,52107",
 "x": "13,38773"
 , 
 "y": "52,52488",
 "x": "13,40369"
 , 
 "y": "52,54902",
 "x": "13,41655"
 ];

I only change the part where we create the vector source, from manually setting one by one to using a loop.

for (var i in window.locs) 
 var data = window.locs[i];
 iconFeature = new ol.Feature(
 geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(data.x.replace(",", ".")), parseFloat(data.y.replace(",", "."))]))
 );

 iconFeature.setStyle(new ol.style.Style(
 image: new ol.style.Icon(/** @type module:ol/style/Icon~Options */(
 color: [113, 140, 0],
 crossOrigin: 'anonymous',
 src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
 ))
 ));
 window.iconFeatures.push(iconFeature);

var vectorSource = new ol.source.Vector(
 features: window.iconFeatures
 );

Unfortunately, the icons are not showing on the map. If I don't use the loop, the icons are shown. I have a lot of data and cannot assign the value one by one.

This is my JSFiddle: Fiddle

How can I resolve this?

javascript html openlayers openlayers-5

share|improve this question

edited Mar 8 at 13:58

User2018

asked Mar 8 at 13:42

User2018User2018

68111

window.locs = [
 "y": "52,51241",
 "x": "13,38961"
 , 
 "y": "52,52107",
 "x": "13,38773"
 , 
 "y": "52,52488",
 "x": "13,40369"
 , 
 "y": "52,54902",
 "x": "13,41655"
 ];

for (var i in window.locs) 
 var data = window.locs[i];
 iconFeature = new ol.Feature(
 geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(data.x.replace(",", ".")), parseFloat(data.y.replace(",", "."))]))
 );

 iconFeature.setStyle(new ol.style.Style(
 image: new ol.style.Icon(/** @type module:ol/style/Icon~Options */(
 color: [113, 140, 0],
 crossOrigin: 'anonymous',
 src: 'https://openlayers.org/en/v3.20.1/examples/data/dot.png'
 ))
 ));
 window.iconFeatures.push(iconFeature);

var vectorSource = new ol.source.Vector(
 features: window.iconFeatures
 );

share|improve this question

edited Mar 8 at 13:58

User2018

asked Mar 8 at 13:42

User2018User2018

68111

share|improve this question

edited Mar 8 at 13:58

User2018

asked Mar 8 at 13:42

User2018User2018

68111

asked Mar 8 at 13:42

User2018User2018

68111

asked Mar 8 at 13:42

User2018User2018

68111

1 Answer
1

active

oldest

votes

1

The layer needs to be added to the map

map.addLayer(vectorLayer);

share|improve this answer

answered Mar 14 at 13:49

MikeMike

2,9302211

add a comment | 

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55064467%2fopenlayers-5-icons-are-not-showing-on-the-map%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

The layer needs to be added to the map

map.addLayer(vectorLayer);

share|improve this answer

answered Mar 14 at 13:49

MikeMike

2,9302211

add a comment | 

1

The layer needs to be added to the map

map.addLayer(vectorLayer);

share|improve this answer

answered Mar 14 at 13:49

MikeMike

2,9302211

add a comment | 

The layer needs to be added to the map

map.addLayer(vectorLayer);

share|improve this answer

answered Mar 14 at 13:49

MikeMike

2,9302211

map.addLayer(vectorLayer);

share|improve this answer

answered Mar 14 at 13:49

MikeMike

2,9302211

answered Mar 14 at 13:49

MikeMike

2,9302211

answered Mar 14 at 13:49

MikeMike

2,9302211