0

I need to be able to display polygons with uncertain boundaries in a web map I am building. Here is an example: enter image description here

I have styled this example in QGIS using a Gradient Fill.

I cannot find a way to style polygons with Gradient Fill in MapLibre. I also have Geoserver in my stack if there is a way to serve this as WMS. I am also open to using DeckGL as an overlay on top of MapLibre if that helps.

Here is an example of how to add a geojson polygon to MapLibre - (taken from https://maplibre.org/maplibre-gl-js/docs/examples/geojson-polygon/):

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add a GeoJSON polygon</title>
    <meta property="og:description" content="Style a polygon with the fill layer type." />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style:
            'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
        center: [-68.13734351262877, 45.137451890638886],
        zoom: 5
    });

    map.on('load', () => {
        map.addSource('maine', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [-67.13734351262877, 45.137451890638886],
                            [-66.96466, 44.8097],
                            [-68.03252, 44.3252],
                            [-69.06, 43.98],
                            [-70.11617, 43.68405],
                            [-70.64573401557249, 43.090083319667144],
                            [-70.75102474636725, 43.08003225358635],
                            [-70.79761105007827, 43.21973948828747],
                            [-70.98176001655037, 43.36789581966826],
                            [-70.94416541205806, 43.46633942318431],
                            [-71.08482, 45.3052400000002],
                            [-70.6600225491012, 45.46022288673396],
                            [-70.30495378282376, 45.914794623389355],
                            [-70.00014034695016, 46.69317088478567],
                            [-69.23708614772835, 47.44777598732787],
                            [-68.90478084987546, 47.184794623394396],
                            [-68.23430497910454, 47.35462921812177],
                            [-67.79035274928509, 47.066248887716995],
                            [-67.79141211614706, 45.702585354182816],
                            [-67.13734351262877, 45.137451890638886]
                        ]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'maine',
            'type': 'fill',
            'source': 'maine',
            'layout': {},
            'paint': {
                'fill-color': '#088',
                'fill-opacity': 0.8
            }
        });
    });
</script>
</body>
</html>

For reference, this is how I have styled the polygons in QGIS: enter image description here

Improve this question
4
  • Coding question on GIS SE site should include relevant existing code of what has been tried so far, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code. Commented Apr 10, 2024 at 7:19
  • There is no relevent existing code in this case, as I have not found a way to start doing gradient fills, and am asking if this is even possible. I could show an example of how to symbolise polygons as solid colours in maplibre but that is trivial. My code is complex so would just confuse the issue. Commented Apr 10, 2024 at 11:40
  • So you have no map at all with MapLibre? If you have it, post relevant code. Commented Apr 10, 2024 at 12:43
  • 1
    It is a complex React app with layer definitions built dynamically outside of Maplibre, so I would need to post at least 5 files for readers to understand the flow, none of which is relevant to gradient fills. Does that make sense why I dont want to include? I can include a maplibre example for adding solid fill polygons instead. Commented Apr 11, 2024 at 0:39

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.