Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with style.json and tiles vector declarations in HTML #1322

Open
raphael10-collab opened this issue Jul 18, 2024 · 0 comments
Open

Issue with style.json and tiles vector declarations in HTML #1322

raphael10-collab opened this issue Jul 18, 2024 · 0 comments

Comments

@raphael10-collab
Copy link

raphael10-collab commented Jul 18, 2024 •
edited
Loading

Hi!
As asked in maplibre-gl-js discussions forum: maplibre/maplibre-gl-js#4417 , in StackOverflow : https://stackoverflow.com/questions/78759874/maplibre-issue-with-style-json-and-tiles-vector-url and in GIS StackExchange : https://gis.stackexchange.com/questions/483886/maplibre-issue-with-style-json-and-tiles-vector-declarations-in-html I'm having an issue in visualizing, locally, the map

I want to use this TileServer: https://tileserver.linuxbabe.com/ with MapLibre

The style.json should be this: https://tileserver.linuxbabe.com/styles/basic-preview/style.json and, based on https://tileserver.linuxbabe.com/data/v3.json

image

the tiles vector URL should be this: https://tileserver.linuxbabe.com/data/v3/{z}/{x}/{y}.pbf

But If I put those two URLs in their fields in the HTML, I do not get any output :
image

This is the complete map.html file :

<!DOCTYPE html>
<html>
    <head>
     <meta charset="utf-8">
     <title>Vector Tile Map with MapLibre</title>
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
     <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' />
     <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
     </style>
   </head>
   <body>
        <div id="map"></div>
        <script>
            var map = new maplibregl.Map({
                container: 'map',
                style:
                    'https://tileserver.linuxbabe.com/styles
/basic-preview/style.json',
                    zoom: 5.43,
                    center: [-3.9, 54.5]
            });


            map.on('load', function () {
              // Add a new vector tile source with ID 'linuxbabe'.
              map.addSource('linuxbabe', {
                     'type': 'vector',
                     'tiles': [
                          'https://tileserver.linuxbabe.com/data/v3/{z}/{x}/{y}.pbf'
                      ],
                      'minzoom': 6,
                      'maxzoom': 14
                });
                map.addLayer(
                   {
                        'id': 'default', // Layer ID
                        'type': 'line',
                        'source': 'linuxbabe', // ID of the tile source created above
                           // Source has several layers. We visualize the one with name 'sequence'.
                        'source-layer': 'sequence',
                        'layout': {
                                  'line-cap': 'round',
                                  'line-join': 'round'
                         },
                        'paint': {
                                   'line-opacity': 0.6,
                                   'line-color': 'rgb(53, 175, 109)',
                                   'line-width': 2
                         }
                  },
               );
            });

            map.addControl(new maplibregl.NavigationControl());

            //set max zoom level (0-24)
            map.setMaxZoom(19);
    </script>
    </body>
</html>

What am I missing and / or am I doing wrong?

I've put the code in:
jsfiddle: https://jsfiddle.net/RaphyCollab/oq19abd4/2/
jsbin repo : https://jsbin.com/dekujuz/edit?html,output
github gist : https://gist.github.com/raphael10-collab/2c1676a37c2193c79b110ecdfe33215d

OS: Ubuntu 23.10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@raphael10-collab