Phpvms maps, re: carto going paid

Announcements
1

Hi all,

Carto has suddenly started to require API keys without notice. I’ve made the vacentral tileserver available now for phpvms (and related) usage:

Usage Instructions

See below for usage with

  • Leaflet with the Leaflet-MapLibre bridge (preferred - vector tiles)
  • Plain Leaflet (raster tiles)

Usage with Leaflet and Leaflet-MapLibre Bridge

First, install the bridge:

npm install leaflet maplibre-gl @maplibre/maplibre-gl-leaflet

Then usage:

import * as L from "leaflet";
import { maplibreGL } from "@maplibre/maplibre-gl-leaflet";

import "leaflet/dist/leaflet.css";
import "maplibre-gl/dist/maplibre-gl.css";

const map = L.map("map", {
  minZoom: 1,
}).setView([32.7767, -96.797], 5);

const light = maplibreGL({
  style: "https://tiles.vacentral.net/styles/light/style.json",
});

const dark = maplibreGL({
  style: "https://tiles.vacentral.net/styles/dark/style.json",
});

light.addTo(map);

L.control
  .layers({
    "Light vector": light,
    "Dark vector": dark,
  })
  .addTo(map);

Usage with Leaflet

import * as L from "leaflet";
import "leaflet/dist/leaflet.css";

const map = L.map("map").setView([32.7767, -96.797], 5);

const attribution =
  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';

const light = L.tileLayer(
  "https://tiles.vacentral.net/styles/light/{z}/{x}/{y}.png",
  {
    minZoom: 0,
    maxZoom: 20,
    attribution,
  },
);

const dark = L.tileLayer(
  "https://tiles.vacentral.net/styles/dark/{z}/{x}/{y}.png",
  {
    minZoom: 0,
    maxZoom: 20,
    attribution,
  },
);

light.addTo(map);

L.control
  .layers({
    Light: light,
    Dark: dark,
  })
  .addTo(map);
2 Likes