Question

I have an icon that I would like to display in an arbitrary hexadecimal number. The icon samples are below, but since the color can be anything, how would I color it in by feeding an HTML color? The background would have to be transparent since it is going to be a pinpoint on a map. Any idea on how to accomplish this?

Answer 1

Here is the approach I would use.

You need to start with a version of that image that doesn’t have the color–just the black and white required for the outline, the bus, and the gradient. You’ll need the gradient to have alpha transparency so that some pixels are more transparent than others–then you can put any color behind the image, and the colors will change. Success!

The problem is that this would overflow the borders of the pin and you’d lose the ability to have it overlay the map, so you need to find a way to clip the background item so that it is the exact shape of the pin and is transparent beyond the edges of that.

You could try creating a simple SVG image that is the same shape and putting it behind it. I used this tool to create this orange circle:

<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="200" cy="190" rx="30" ry="30" style="fill:orange"/>
</svg>

With a little work you might be able to get the shape to match your pin and then when you place it behind your transparent image, all you need to do is use Javascript or whatnot to change the text from “fill:orange” to whatever color you want.

Another similar approach would be to use the canvas element to draw that shape. You could also try getting creative with CSS border rounding and rotating to make that shape, depending on what your browser support is. Here is a css-generated pin that is close to the shape you need, though not quite there yet: (obviously, code is webkit specific)

​<div style="background-color: blue; -webkit-transform: rotate(-45deg); width:100px; height:100px; border-radius: 50px 60px 50px 0;"></div>

If you wanted to do something that would work in older browsers, you could create a bunch of divs that are all 1px high of varying lengths to create something exactly the size of your transparent pin.

<div class="constructedPin">
    <div style="width: 8px"></div>
    <div style="width: 12px"></div>
    <div style="width: 30px"></div>
    <div style="width: 35px"></div>
    <div style="width: 38px"></div>
    <div style="width: 40px"></div>
    <div style="width: 41px"></div>
                 (etc...)
</div>

<style>
 div.constructedPin div { height: 1px; background-color:whatever; margin: auto;}
</style>

Then it’s a simple matter of changing the background color of the divs. This approach sounds complicated but it wouldn’t be too hard, and would actually load really quickly since you can hard-code the divs, no generating on the fly, and the CSS update would be lightening-fast.

[edit:]
I got carried away and made a little demo. Obviously it would work better if you had a real image–I just quickly erased the color from it to get the idea across.

http://jsfiddle.net/eNfak/8/