Points on Map overlapping/covering city and town names

Question

I have a map with many points, these points map incidences of landmine accidents in Colombia. There are thousands of points and cover up parts of city and town names, in some cases the entire lables are covered. How can I get the city and town names to be on top of the data layer, i'd rather the point be overlapped by the city name rather than the other way around.

Note, this problem is only when zoomed out, once the user zooms in on specific areas the points are small enough to not be a problem.

I am mapping on CartoDB, I imported my basemap from Mapbox Studio.

Answer 1

One solution is to make the landmine points transparent. Another is to add the place name labels as a new layer - This assumes you can find a place name layer and reuse it. If you have a map option that hides everything except placenames and another map option that shows a base map without labels, then you could draw the base, then add the landmines, then add the layer that justhas the placenames.

Another approach would be using a clustering algorithm on the placemarks.

A variation of this would be to change the style of the placemarks according to the zoom level of the map, so they are rendered as small as a pixel when you zoom out.

Answer 2

I would suggest managing your data as 3 separate layers and setting their order in Leaflet via MapBox.js. You would essentially have one base layer from MapBox Studio that is just background data like imagery or topography. Next you would have your CartoDB layer. Lastly would be a layer of labels, roads and places from MapBox Studio.

I have done this using both the mapbox.js library and cartodb.js. I found there was some conflict if I loaded both libraries in their entirety so I use a standalone version of MapBox.js and the entire library for CartoDB.js (see below).

<script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.standalone.js'></script>  

//this is the url from CartoDB for the viz
var vizUrl='https://yourAccount.cartodb.com/api/v2/viz/link/viz.json';
//this is your access token for your mapbox layers
L.mapbox.accessToken = 'yourTokenHere';
//the next two variables are the MapBox links to your hosted base and overlay styles
var mapBoxBaseTiles = L.tileLayer('linkToYourBottomTiles' + L.mapbox.accessToken); 
var mapBoxTopTiles = L.tileLayer('linkToYourTopTile' + L.mapbox.accessToken); 

//now create the mapbox map
var map = L.map('map')

map.setView([20,-10],3)
//now add the bottom tiles
map.addLayer(mapBoxBaseTiles)

//next add the middle (CartoDB layer)
cartodb.createLayer(map, vizUrl)
    addTo(map)

//Finally add the top layers of mapBox roads, borders etc and bring it to the front
map.addLayer(mapBoxTopTiles);
mapBoxTopTiles.bringToFront();