CartoCSS point marker-type

[Joel Masselink]

Hi All,

I don't know if technical questions are commonly asked on this forum, but I'm quite sure someone on this list might be able to give me a pointer. I've looked around on MapBox & GitHub sites and not found a really helpful answer. Feel free to follow up with me off list if you prefer. Thanks!

Questions: 

Using CartoCSS syntax, are there simple ways to access other marker-types (ex. like boxes/rectangles, triangles) for point features? I've come across only two default point symbol options <marker-type: ellipse & arrow>. 

What is the simplest way to access additional point marker-type options and integrate them into my CartoCSS?

I'm messing around with it in the context of a simple CartoDB visualization and trying to symbolize a few categories of points. Here is the URL: 

Here is a snippet, with yellow highlighting what makes this a point and an ellipse marker-type:

#city_data[category='New Markets'][decarbonize='Yes']{

  marker-fill-opacity: 0.8;

  marker-line-color: #3E7BB6;

  marker-line-width: 8;

  marker-line-opacity: 0.8;

  marker-placement: point; 

  marker-type: ellipse; /**(other options here?)*/

  marker-width: 8;

  marker-height: 8;

  marker-fill: #5e5353;

  marker-allow-overlap: true;

  marker-comp-op: color-burn;

}

[Matt]

Hi Joel,

You can use Maki icons to create lots of different custom markers, here is an example of some Red Cross markers I made by stacking hospital-24 and square-24  icons (in this case I repeated the same CSS for the square icon below the hospital icon) :



Here is more info on using Maki:  https://www.mapbox.com/maki/

Cheers,

Matt

--

Matt Stevenson
CORE GIS
206-782-1734
206-218-8097 (cell)
www.coregis.net

[Matt]

Dear CUGOSians,

My apologies for that last post, apparently the screenshot did not come through as I intended.

Here it is again:  http://coregis.net/assets/images/red_cross_screenshot.jpg

And here is the CartoCSS for a stacked Maki point marker:

#red-cross-v2 {
  [zoom >= 11][zoom <= 13]{
      marker-file: url(maki/hospital-24.svg);
      marker-width:15;
      marker-fill:#de1a00;
      marker-line-color:transparent;
      marker-allow-overlap:true;
    }
  [zoom >= 14][zoom <= 15]{
      marker-file: url(maki/hospital-24.svg);
      marker-width:17;
      marker-fill:#de1a00;
      marker-line-color:transparent;
      marker-allow-overlap:true;
    }
  [zoom >= 16][zoom <= 17]{
      marker-file: url(maki/hospital-24.svg);
      marker-width:20;
      marker-fill:#de1a00;
      marker-line-color:transparent;
      marker-allow-overlap:true;
    }
   }    
 
#red-cross-background {
  [zoom >= 11][zoom <= 13]{
      marker-file: url(maki/square-24.svg);
      marker-width:18;
      marker-fill:#fff;
      marker-line-color:#6a6969;
      marker-allow-overlap:true;
    }
  [zoom >= 14][zoom <= 15]{
      marker-file: url(maki/square-24.svg);
      marker-width:20;
      marker-fill:#fff;
      marker-line-color:#6a6969;
      marker-allow-overlap:true;
    }
  [zoom >= 16][zoom <= 17]{
      marker-file: url(maki/square-24.svg);
      marker-width:23;
      marker-fill:#fff;
      marker-line-color:#6a6969;
      marker-allow-overlap:true;
    }
   }

Cheers,

Matt

On Monday, March 16, 2015 at 10:06:23 AM UTC-7, Joel Masselink wrote:

[Joel Masselink]

Matt,

Thank you very much for your helpful guidance. Maki symbols have pushed me towards TileMill along with more extensive CartoCSS functionality.

Best wishes,

Joel

[Seth Fitzsimmons]

Hi Joel.

With CartoDB, you can reference external SVGs with `marker-file: url(http://...);` and it will fetch and incorporate them into your map.  The typical use-case seems to be putting SVGs in public Dropbox folders, but anything web-accessible will work.

seth

--
You received this message because you are subscribed to the Google Groups "Cascadia Users of Geospatial Open Source" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cugos+un...@googlegroups.com.
To post to this group, send email to cu...@googlegroups.com.
Visit this group at http://groups.google.com/group/cugos.
For more options, visit https://groups.google.com/d/optout.