OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Mapbox: Create a Rectangle with border-radius (Layer)

  • Thread starter Thread starter rediz
  • Start date Start date
R

rediz

Guest
I've been trying to get the same layer as you can see here. But I can't find a right type and options for it. For now I was only using a circle, but I can't give a different padding to X and Y axis.

This is the expected layer (For unclustered-point)

enter image description here

And this is my code:

Code:
    map.addLayer({
    id: 'unclustered-point',
    type: 'circle',
    source: 'places',
    filter: ['!', ['has', 'point_count']],
    paint: {
        'circle-color': '#486fd1',
        'circle-radius': 20,
    }
});

map.addLayer({
    id: 'unclustered-point-count',
    type: 'symbol',
    source: 'places',
    filter: ['!', ['has', 'point_count']],
    layout: {
        'text-field': ['get', 'price'],
        'text-font': ['DIN Offc Pro Bold'],
        'text-size': 11,
    },
    paint: {
        'text-color': "#fff",
    }
});

And this is what I have at the moment:

enter image description here

<p>I've been trying to get the same layer as you can see here. But I can't find a right type and options for it. For now I was only using a circle, but I can't give a different padding to X and Y axis.</p>
<p>This is the expected layer (For unclustered-point)</p>
<p><a href="https://i.sstatic.net/3Os7g.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/3Os7g.png" alt="enter image description here" /></a></p>
<p>And this is my code:</p>
<pre><code> map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'places',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#486fd1',
'circle-radius': 20,
}
});

map.addLayer({
id: 'unclustered-point-count',
type: 'symbol',
source: 'places',
filter: ['!', ['has', 'point_count']],
layout: {
'text-field': ['get', 'price'],
'text-font': ['DIN Offc Pro Bold'],
'text-size': 11,
},
paint: {
'text-color': "#fff",
}
});
</code></pre>
<p>And this is what I have at the moment:</p>
<p><a href="https://i.sstatic.net/wA3Nz.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/wA3Nz.png" alt="enter image description here" /></a></p>
 

Latest posts

D
Replies
0
Views
1
Dhanushka Amarakoon
D
S
Replies
0
Views
1
Shikhar Ambashta
S
Top