search

keplergl / kepler.gl

Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.
http://kepler.gl
MIT License
10.39k stars 1.74k forks source link

How to put new custom icons in Kepler? #892

Open MosheMalin opened 4 years ago

MosheMalin commented 4 years ago

Hi,

We see that there is an icon layer. Unfortunately we need to use icons which do not come with Kepler set of icons. Is there a way to use our own icons? maybe to provide a factory or something?

And a second level question - can we manipulate the angle of the icon? Say we want to put an beacon icon, and want to have it point to a certain direction (say it can be any angle); can we also do such manipulation?

Thanks Moshe

heshan0131 commented 4 years ago

https://github.com/keplergl/kepler.gl/issues/898

bhavik-joyride commented 4 years ago

Hello all, I'm trying to add custom marker icon on Kepler icon layer. If there is a way to currently do this that I'm overlooking or other suggestions I'd love to hear them. Thanks in advance

super25k commented 2 years ago

Hi, I have the same question. I've made some attempts to get this working, but so far no luck. Any guidance/tips would be much appreciated. I'm running kepler locally on my PC. My first attempt was to see if I could make kepler run properly as-is but referencing my own copy of the svg icons rather than the one hosted at https://d1a3f4spazzrp4.cloudfront.net/kepler.gl. With the changes I made, Kepler.gl will load but freezes up and does not display any icons. When I change things back to original code it works just fine. The changes I made are to two files as referenced files below:

\node_modules\kepler.gl\dist\constants\default-settings.js

var CLOUDFRONT = 'https://d1a3f4spazzrp4.cloudfront.net/kepler.gl'; exports.CLOUDFRONT = CLOUDFRONT; // following two lines added by me var COPY_OF_ICONS = 'https://my_website.com'; exports.COPY_OF_ICONS = COPY_OF_ICONS; var ICON_PREFIX = "".concat(CLOUDFRONT, "/geodude"); exports.ICON_PREFIX = ICON_PREFIX;

\node_modules\kepler.gl\dist\layers\icon-layer\icon-layer.js

var SVG_ICON_URL = "".concat(_defaultSettings.COPY_OF_ICONS, "/icons/svg-icons.json"); //var SVG_ICON_URL = "".concat(_defaultSettings.CLOUDFRONT, "/icons/svg-icons.json");

Could be something basic that I just don't understand about javascript much more that I don't understand than what I do understand.

Any help would be much appreciated. Thanks, Mike