custom marker ignored

[agrimpard]

Hi,

i tried to create a custom marker like described here : http://examples.webglearth.com/#markers The custom marker is just ignored and the default blue marker is shown.

I try to use it on this page : http://worldisbeautiful.net/carte/?Y=-8.65163&X=119.58&P=20160425 See sources around line 130, there are a lot of markers and one of them has a custom one which doesn't work. You can still see a custom marker on the earthgl, but it's a javascript wordkaround i added under the markers : $('.html-pop-content[data-y="2016"][data-m="04"][data-d="25"]').parent().parent().parent().parent().find(".we-pm-icon").css("background-image", "url('../tpl/img/icon-marker-focus.png')"); I have to use data inserted in the popup to reach a parent and then change the marker.

By the way, it would be usefull to add a specific class to the container of .we-pm-icon and .we-pp :)

[klokan]

BTW Your app is beautiful...

The code from http://examples.webglearth.com/#markers, when copied to your server does not show the custom marker?

It seems to me like a problem in your code - not in the WebGL Earth API...

[agrimpard]

Thanks for your kind words :)

This is the code i use for the custom marker : var marker1 = WE.marker([-8.65163, 119.58], '../tpl/img/icon-marker-focus.png', 25, 41).addTo(earth); marker1.bindPopup( '<div class="html-pop-content" data-titre="Komodo National Park" data-y="2016" data-m="04" data-d="25" data-img="Indonesia _ Komodo National Park" data-pays="Indonesia" data-iso="id"></div>' );

This is the one from the doc example : var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);

Except adding a popup i can't see any difference. I'll try to watch it more closely when i have some times !

[HiranChathuranga]

{ marker = WE.marker([39.962710, -74.258580]).addTo(earth); marker.bindPopup("Guadeloupe & Martinique
Banana producing country", { maxWidth: 150, closeButton: true }); img(); }

function img() { $(".we-pp-content:contains(Banana)").parent().parent().parent().children(".we-pm-icon").css("background-image", "url(Banana_2_25x40.png)"); }

jquary referred .I used that code for check popup content Include Banana then marker should change as png image. limitation point image size referred 25x40 that ratio. you can attach multiple markers relevant to content.

[gilmotta]

Sorry to bother you so many years later but I am having a similar issue. Please How did you solve the issue with the custom marker?

Here is my code: // car location var markerCustom = WE.marker([33.827284, -87.538893], 'images/car_west_small.png', 128, 125).addTo(earth);

No matter what I do, I always see the blue default blue marker. the file exists in the path and I tried varying the size to see if it was an issue with its size but still the same.

For another test I did, I also copied the original line and the png to my local server.

var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);

I changed the Lat/Long to and the path var markerCustom = WE.marker([33.827284, -87.538893], '/images/logo-webglearth-white-100.png', 100, 24).addTo(earth);

I made sure that http://localserver/images/logo-webglearth-white-100.png gets the png correctly and it did.

Then I launched the page and I still got the issue.

[gilmotta]

@klokan Ok I found the issue. The api.js stored in the repo is old, it is version 2.0 and the version hosted by the website is version 2.4.2. I was able to download the api.js from the website and tested it on my local server and then it started to show the custom marker but there is a new problem. It does not render well on Android using Chrome. The earth does not spin anymore. I see the custom marker but the earth is static.

[nishd8]

Not sure if anyone still uses this or faces the same problem, I figured out the issue

.we-pm-icon { position: absolute; z-index: 64; background-image: url(data:image/png;base64,iVBORw0.....rkJggg==); }

this the default class, modifying the css class in your own application to override the default CSS to the following

.we-pm-icon { background-size: contain; background-repeat: no-repeat; position: absolute; z-index: 64; background-image: url(data:image/png;base64,iVBORw0.....rkJggg==); }

fixes the issue when using custom images for markers with WebGL Earth