Pages: usage of map requires API Key from "carto.com"?

Setup, Configuration and Use Items & Sitemaps
1

recently my map on a page (component: oh-map-page) on which I display locations of cars and people comes up with the information “API KEY REQUIRED - carto.com/basemap/apikey”. The link says, the API key is free of charge.
but: I don’t seem to find the configuration page for that? Is there a way to place an API key somewhere?

image
image586×563 84.5 KB

2

Leaflet, the library the map page uses, providers that require access will need extra options. If this is a recent change, then Leaflet may not have caught up yet. See the description and links titleLayerProvider in the docs:

3

ah! it’s called " tileLayerProvider" → changing that to e.g. openStreetMap is one solution.

but it seems like the change was indeed recently with the default provider CartoDB.

4

I’m sorry, but I don’t understand the solution…

I requested and got an API key here: Request an API key for CARTO Basemaps | CARTO

Then I tried this:

- component: oh-map-marker
  config:
  icon: oh:house
  label: Thuis
  location: <MYHOMELOCATION>
  tileLayerProvider: openStreetMap
  overlayTileLayerProvider: openStreetMap

No luck.

I’ve tried this:

- component: oh-map-marker
  config:
  icon: oh:house
  label: Thuis
  location: <MYHOMELOCATION>
  tileLayerProviderOptions:
    apikey: <MYAPIKEY>
  overlayTileLayerProviderOptions:
    apikey: <MYAPIKEY>

and this:

- component: oh-map-marker
  config:
  icon: oh:house
  label: Thuis
  location: <MYHOMELOCATION>
  tileLayerProvider: openStreetMap
  tileLayerProviderOptions:
    apikey: <MYAPIKEY>
  overlayTileLayerProvider: openStreetMap
  overlayTileLayerProviderOptions:
    apikey: <MYAPIKEY>

Also no luck…

5

tileLayerProvider goes on the page config, not on each oh-map-marker.

something like:

component: oh-map-page
config:
  tileLayerProvider: openStreetMap
slots:
  default:
    - component: oh-map-marker
      config:
        location: <lat>,<lon>

if you keep the default carto provider you need the api key in that same page config (see the oh-map-page docs for the option name). putting it under the marker wont do anything.

6

Sigh… If only I had looked more closely.

Also now, I see openStreetMap is a different “service” than CartoDB altogether, and doesn’t require an API. So this works:

component: oh-map-page
config:
  icon: ""
  initialCenter: <lat>, <lon>
  initialZoom: "15"
  tileLayerProvider: OpenStreetMap
  overlayTileLayerProvider: OpenStreetMap

But just to grasp how it works, I wanted to test the API key with CartoDB. I still can’t get it to work:

component: oh-map-page
config:
  icon: ""
  initialCenter: <lat>, <lon>
  initialZoom: "15"
  tileLayerProvider: CartoDB
  tileLayerProviderOptions:
    apikey: <APIKEY>
  overlayTileLayerProvider: CartoDB
  overlayTileLayerProviderOptions:
    apikey: <APIKEY>

This still complains:

image
image1146×646 141 KB