MapLibre example with symbols and text layer #1144

josemamira · 2024-01-19T12:18:57Z

josemamira
Jan 19, 2024

I have configured a service with Martin that is offering vector tiles of data coming from PostgreSQL-PostGIS views, I have also added some fonts (Open Sans family) and icons coming from a folder with SVG files.

Catalog

The catalog shows perfectly the tiles, sprites and fonts.

{
tiles: {
    comun: {
        content_type: "application/x-protobuf",
        description: "vt.comun.geometria"
    },
    pb_pois: {
        content_type: "application/x-protobuf",
        description: "vt.pb_pois.geometria"
    },
   ...
},
  sprites: {
      icons: {
          images: [
              "bar-15",
              "pc",
              ...
  } ,
fonts: {
    Open Sans Regular: {
          family: "Open Sans",
          style: "Regular",
          glyphs: 883,
          start: 32,
          end: 65533
    },
   ...
 }
}

Endpoint API

In the documentation it is indicated that Martin endpoint API the call to an image is made with:

/sprite/.{png or json}

In my case it is:

http://localhost:3000/sprite/pc.png

And the result is always: Sprite pc not found

Maplibre GL JS

I have also created a web page with MapLibre GL JS to display a polygonal layer that I have symbolized without problems. However I did not know how to add a layer of symbols or text layer
This is my code:

<html>
<head>
<script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>

<div id='map' style='width: 800px; height: 600px;'></div>

   <script>
var map = new maplibregl.Map({
container: 'map',
//style: 'http://localhost/maplibre/style.json',
center: [-0.513794,38.38449],
zoom: 15,
hash: true,
//sprite: 'http://localhost:3000/sprite',
//glyphs: "http://localhost:3000/font/{name}/{start}-{end}"
});

map.addLayer({
  id: 'comun',
    type: 'fill',
      source: {
          type: 'vector',
              url: 'http://localhost:3000/comun'
      },
      'source-layer': 'comun',
        paint: {
            "fill-color": "rgba(240,240,216, 1)",
            'fill-outline-color': 'rgba(226, 197, 197, 1)'
       },
});

map.addLayer({
  id: 'pb_pois',
  type: 'circle',
  source: {
    type: 'vector',
    url: 'http://localhost:3000/pb_pois'
  },
  'source-layer': 'pb_pois',
  paint: {
    'circle-color': 'rgba(0, 0, 255, 1)'
  }
});


/* Symbol layer not working */
map.addLayer({
  id: 'pb_symbols',
  type: 'symbol',
  source: {
    type: 'vector',
    url: 'http://localhost:3000/pb_pois'
  },
  'source-layer': 'pb_pois',
  'layout': {
        'icon-image': 'bar-15'
  }
});


/* Text layer not working */
map.addLayer({
  id: 'pb_pois_text',
  type: 'symbol',
  source: {
    type: 'vector',
    url: 'http://localhost:3000/comun'
  },
  'source-layer': 'pb_pois',  
  'minzoom': 15,
  'layout': {
        'text-field': '{codigo}',
        'text-size': 9,
        'visibility': 'visible',
        'text-font': [
          'Open Sans Italic',
          'Open Sans Regular'
        ]
  },
  'paint': {
        'text-color': 'rgba(41, 132, 55, 1)',
        'text-halo-color': 'rgba(255, 255, 255, 0)',
        'text-halo-width': 2,
        'text-halo-blur': 2
   }
});

</script>
</body>
</html>

I would be very grateful if there was an example in MapLibre GL JS to show a layer with symbols and another layer with text.
Thanks for your attention

nyurik · 2024-01-21T01:03:06Z

nyurik
Jan 21, 2024
Maintainer

@josemamira I just checked sprites work as intended by:

from the root of the project, ran cargo run -- --sprite tests/fixtures/sprites/src1
in the browser, view http://0.0.0.0:3000/sprite/src1.png

It showed the correct sprite image, so not certain why you are seeing issues. Were there any log entries?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MapLibre example with symbols and text layer #1144

{{title}}

Replies: 1 comment

{{title}}

Select a reply

MapLibre example with symbols and text layer #1144

josemamira Jan 19, 2024

Catalog

Endpoint API

Maplibre GL JS

Replies: 1 comment

nyurik Jan 21, 2024 Maintainer

josemamira
Jan 19, 2024

nyurik
Jan 21, 2024
Maintainer