Add some styling to help our users differentiate from the 'read-only' mapillary layer with our new one.

[Bonkles]

Let's differentiate our new layer from the old one by adding some styling.

we use .css to style all of our features. One idea would be to put an outline or background color of our rapid magenta.

The rapid magenta .css hex code for the color is '#da26d3'. It can be found defined here: https://github.com/facebookincubator/RapiD/blob/main/modules/core/rapid_context.js#L87

In your new renderer for this layer (the file you created in #4) there should be a block of code in the update() method that affixes some CSS classes to each and every map feature that gets rendered:

const enter = mapFeatures.enter()
            .append('g')
            .attr('class', 'icon-map-feature icon-detected')
            .on('click', click);

The two .css classes here are icon-map-feature and icon-detected. See if you can't affix a third class and then write some .css for it that will use the magenta color to differentiate each icon from the old ones some way. (be sure to add any new .css rules to the file css/65_data_fb.css).

One simple idea could be to simply add a transparent magenta border to each icon. See if you can get that working first!

Extra credit: Try to get each icon to be filled with the rapid magenta color. HINT: This will take you down a bit of a rabbit hole! Inspect the features using the devtools, and try to figure out where their fill colors come from.

[hieule21]

I am working on getting each icon to be filled with the rapid magneta color and would love to receive feedback.

By adding the below script in package.json, rapid-object-sprite.svg is created (same file content as mapillary-object-sprite.svg, but different file name):

dist:svg:rapid:objects": "svg-sprite --symbol --symbol-dest . --symbol-sprite dist/img/rapid-object-sprite.svg node_modules/mapillary_sprite_source/package_objects/*.svg

When RapiD Features is on, this new sprite will be added by the addSprites method (in the file modules/svg/defs.js). In this prite, the icon color is changed to the rapid magneta color and the icon id is concatenated with -rapid.

The renderer for the new RapiD layer will render objects by referencing to icons from the new sprite with the -rapid id.

I'm thinking this implementation is the best compared to my other ideas:

• Pros:
  • We can decouple the new layer from the mapillary features layer.
  • With two separate sprites, each will be appened to the DOM only once without any further modifications.
• Cons:
  • We now have two duplicate files with different name.

[Bonkles]

SOLID WORK. Definitely Two duplicate files is an acceptable 'con' that we can tackle later. In engineering parlance, this is so-called 'Technical debt'. Something that you know needs fixing but isn't a hugely pressing concern right now.

I recommend opening issues in the repo whenever you have something like this crop up. Go ahead and go to the repo issues tab and create your own 'TODO' style issue to maybe clean up the duplicate file.