CesiumGS/cesium

Cannot use CSS sprites in ProviderViewModel

Open

#3792 opened on Mar 30, 2016

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (11,758 stars) (3,324 forks)batch import
category - widgetsgood first issuetype - enhancement

Description

When creating a ProviderViewModel, the iconUrl points to a single image.

For example, as per the documentation:

imageryViewModels.push(new Cesium.ProviderViewModel({
     name : 'Open\u00adStreet\u00adMap',
     iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
     tooltip : 'OpenStreetMap (OSM) is a collaborative project to create a free editable \
map of the world.\nhttp://www.openstreetmap.org',
     creationFunction : function() {
         return Cesium.createOpenStreetMapImageryProvider({
             url : '//a.tile.openstreetmap.org/'
         });
     }
 }));

However as a class cannot be specified, it is not possible to use CSS sprites (i.e. bundling multiple icons in the same image).

A possible fix would be that of modifying Widgets/BaseLayerPicker/BaseLayerPicker.js, so that instead of

    providerIcon.className = 'cesium-baseLayerPicker-itemIcon';

the assigned class were something like:

    providerIcon.className = 'cesium-baseLayerPicker-itemIcon <uniqueClassName>';

I can create a Pull Request if I get guidance on how to generate the unique class.

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptCSS spritesCesium library basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The issue was opened in 2016 and has not been acted upon. The proposed fix involves modifying Widgets/BaseLayerPicker/BaseLayerPicker.js to allow a unique CSS class for icon elements, enabling CSS sprites. The user requested guidance on generating unique class names. Review the current state of BaseLayerPicker.js in the repository to see if any changes have been made. Examine comments for any suggested approach. A simple implementation could use a counter or unique identifier per provider. Ensure the change is backward compatible.