Configuring L.MaptilerLayer for Local Maptiler Tile Server Usage

naimGur commented 10 months ago

Hello,

Firstly, I appreciate the good work on this library. I'm currently looking to integrate it with a local Maptiler map server, which I have operational using the official maptiler/tileserver-gl image. The standard configuration from the documentation is as follows:

const mtLayer = new L.MaptilerLayer({
  // Get your free API key at https://cloud.maptiler.com
  apiKey: "YOUR_MAPTILER_API_KEY",
}).addTo(map);

However, this setup seems to only allow API key authentication and doesn't provide an option to specify custom URLs for the tile provider. Since I am working with a local server, I don't have an API key. I would like to configure the L.MaptilerLayer to point to localhost:8080, where my Maptiler's tile server is hosted. Is there a way to achieve this with your library and use it in conjunction with a locally hosted tile server?

jonathanlurie commented 10 months ago

Hello @naimGur , thanks for your feedback! I don't have experience with tilserver-gl but if you have a custom StyleJSON file that you have locally and refers to your local data sources, then it's possible to use it as follow:

const mtLayer = L.maptilerLayer({
  // For the example, the file custom-style.json is hosted at the same location as your html file
  style: "custom-style.json"
}).addTo(map);

This custom StyleJSON defines your custom map style, but I'm not sure if tileserver-gl comes with some built-in styles already. If so, you have a property called sources. It's an object (key-value) where the key are the IDs of the source (later referenced by layer definition) and values are URLs of where to find this source. Typically, the MapTiler Cloud styles such as streets-v2 have a sources property that looks like this:

{
  // ...

  "sources": {

    "maptiler_planet": {
      // This is the part you want to replace for a localhost equivalent
      "url": "https://api.maptiler.com/tiles/v3/tiles.json?key=API_KEY",
      "type": "vector"
    },

    // ...
  },

  // ...
}

Let me know if that helps!

bolollo commented 10 months ago

Hi @naimGur, here you can find the options and methods of the layer https://github.com/maptiler/leaflet-maptilersdk#api-and-options.

deaw0003 commented 8 months ago

@naimGur Hi. Do you have the final solution for this topic.

bolollo commented 8 months ago

Hi, @deaw0003 and @naimGur. Here is an example of how to use it with tileserver-gl locally

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Display a map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v1.2.0/maptiler-sdk.umd.js"></script>
    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v1.2.0/maptiler-sdk.css" rel="stylesheet" />
    <script src="https://cdn.maptiler.com/leaflet-maptilersdk/v2.0.0/leaflet-maptilersdk.js"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = L.map('map').setView([0, 0], 1); //starting position
      const mtLayer = L.maptilerLayer({
        style: 'http://[::]:8080/styles/basic-preview/style.json', // optional
      }).addTo(map);
    </script>
  </body>
</html>

sambhavdhyani commented 5 months ago

Hi @bolollo, thank you it works very well, but do you know how we can apply the street style? With the basic preview I get the house numbers and everything, but how can I add restaurant names and all the other stuff which I can see here when zoomed in? https://data.maptiler.com/downloads/dataset/osm/#13.88/51.48907/-0.09245

bolollo commented 5 months ago

Hi @sambhavdhyani, here https://openmaptiles.org/styles/ you can see how to generate other styles.

maptiler / leaflet-maptilersdk

Configuring L.MaptilerLayer for Local Maptiler Tile Server Usage #5