2

I am designing my map with tilemill. Now I am struggling with data visualization. I would like to visualize the road name like the 1st image instead of the second image. I have loaded the data source of tilemill from shapefile which contain Road name that field I want to visualize. Can anybody help me on this issue, whether it is possible or not to make the annotation from data?

I like to visualize

But it is showing like this

underdark
  • 84,148
  • 21
  • 231
  • 413
Devils Dream
  • 3,179
  • 9
  • 44
  • 78

1 Answers1

1

I found the Tilemill/Mapbox documentation a little tough to navigate for beginners as well. Having just figured this out, a few clarifications:

a) Start with the mapbox/tilemill guide to styling labels. LINK Note that you call the desired table (layer) with the # (for example #roads). Use the layers button to find which column in the table contains the road names (for example 'ROAD_NAME'). You'll then use that column info to create labels like so:

#roads {
   **text-name: [ROAD_NAME];**     
   text-size: 16;
   text-fill: #fff;
}

b) To get the effect you reference in the first attached image, you'll probably want to align your labels to the road lines (follow the same tutorial link above). 

#roads {
   text-name: [ROAD_NAME];     
   text-size: 16;
   text-fill: #fff;
   **text-placement: line;**
}

c) Sometimes you want to get more specific with what you're styling. A common example: road types defined as residential, motorway, highway or bikepath in a column called ROAD_TYPE.

#roads [ROAD_TYPE = "motorway"] {
   text-name: [ROAD_NAME];     
   text-size: 16;
   text-fill: #fff;
   text-placement: line;
}

The style mark-up between the {} will only apply to roads of ROAD_TYPE "motorway".

d) Finally, the tutorial on Advanced Label Placement should help with further issues once you're comfortable with the basics. LINK

Hope it helps!

NallyRoll
  • 158
  • 6