Posts

Showing posts from October, 2017

Angular Carto: Compound basemaps

This post is part of a series covering how to create reusable Carto map components. Read the introduction to learn why one would even want to do such a thing. The previous post in the series was voluminous, so I will change things up and describe a minor enhancement to basemap switching : basemaps that consist of more than one tile layer. This is particularly useful for adding labels to a basemap. Enhancing the basemap prototype This post builds off of the previous post on basemap selection. I will describe how specific components will change to accommodate multiple tile layers in a basemap. You may find it helpful to read the previous post to understand how the other components work. First, consider the basemap prototype that requires exactly one tile layer. Its public interface exposes addToMap() and removeFromMap() methods. Accommodating multiple tile layers in the basemap is as simple as adding a for loop to both methods. Note that after each tile layer is added to the m...

Angular Carto: Switching Basemaps

This post is part of a series covering how to create reusable Carto map components. Read the introduction to learn why one would even want to do such a thing. In this post, we will discuss how to give the user control of the basemap and how to do some customizations on the basemap selector. Manipulating the basemap Before we begin, we need to ask ourselves: what is a basemap, and what does it do? In the context of a Carto map, a basemap is a layer of map tiles that sits under the informational layers. In order to be able to switch between different basemaps, each basemap should know how to add itself to the Carto map and how to remove itself from the Carto map. This functionality is implemented in the basemap prototype, cleverly named basemapProto . The prototype has two properties and two methods: tileLayer The Leaflet tile layer for the basemap. map The Carto/Leaflet map whose basemap is to be manipulated. addToMap() Add the basemap to the Carto/Leaflet map object. remove...