My map is using mapbox-gl and consists of only two layers: a marker and a circle that is centered on a specific point. The distance is dynamic, based on a predefined distance in meters.
The issue I'm facing is that as I zoom in and move away from the center, the layers suddenly disappear from the map render. I've tried setting maxzoom and tolerance to 0 on the geojson source, but the layers still vanish after reaching a certain zoom level or distance from the center.
For a visual demonstration, refer to this GIF showing what happens when you pan: https://i.stack.imgur.com/RIC5A.jpg
Is there a specific attribute that I might have overlooked to improve or extend the rendering distance? I don't plan to use many points, so performance should not be an issue for this particular scenario.
<template>
<div id="mapContainer" class="basemap"></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import mapboxgl, { CircleLayer } from 'mapbox-gl'
export default defineComponent({
name: 'Map',
mounted: function () {
mapboxgl.accessToken =
'abc'
const map: mapboxgl.Map = new mapboxgl.Map({
container: 'mapContainer',
style: 'mapbox://styles/mapbox/streets-v11',
center: [101.58165, 3.03837],
zoom: 13,
maxZoom: 17
})
...
const metersToPixelsAtMaxZoom = (meters: any, latitude: any) => meters / 0.075 / Math.cos((latitude * Math.PI) / 180)
</script>
<style lang="scss">
#mapContainer {
width: auto;
height: 400px;
}
</style>
The code above is written in TypeScript, but removing the types should not impact its functionality.