0

I'm creating a custom map using TileMill to show local walks.

I want to show Points Of Interest along the path. I've exported the points from Google Maps using KML and I want to show an icon on a background for each.

I have a pin icon and the icon for each location but I can't work out how to display one on top of the other.

I've looked into using a point and a marker but point doesn't allow color styling and I would like to color the background pin as well as the icon.

0

EDIT: Got a winner! You can use instances to do this. Like attachments, naming is arbitrary but order is not

#layer {
  background/marker-allow-overlap: true;
  background/marker-file: url('path/to/background.svg');
  background/marker-fill: #111;
  background/marker-line-color: #111;
  background/marker-line-width: 9;
  background/marker-width: 26;
  marker-allow-overlap: true;
  marker-file: url('path/to/foreground.svg');
  marker-fill: #fff;
  marker-width: 18;
}

My previous "answer" was not great, but some may still find it applicable:

The closest thing I could think of to a solution (not for me since I'm using CartoDB and not MapBox) is to use font icons, which MapBox Studio now supports. You could bring in something like IcoMoon or FontAwesome if you have relatively standard icons, in which case you could use a marker as your background and the font icon as your foreground, both of which could be styled.

I couldn't tell from your "can't work out how to display one on top of the other" sentence if you already tried stacking markers, but if not then try something like this:

#layer {
  ::background {
    marker-width: 26;
    marker-fill: #111;
    marker-file: url('path/to/background.svg');
    marker-allow-overlap: true;
  }
  ::foreground {
    marker-width: 18;
    marker-fill: #fff;
    marker-file: url('path/to/foreground.svg');
    marker-allow-overlap: true;
  }
}

Great manual on CartoCSS here. Hope this helps, keep us posted if you find something!

| improve this answer | |
  • I'll give this a go and see what happens! – Ben Mar 17 '15 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.