Angular: Leaflet map shows weird outline in Chrome

Discussão em 'Angular' iniciado por Jahir Ahmed, Março 3, 2025.

  1. Jahir Ahmed

    Jahir Ahmed Guest

    the outline / border on my map

    I am using angular 18.2.3 and while i am using leaflet map into my page. and retrive map from url and clicked on my shapeareas in the map. it show this weird shape map only in chrome. but why is this happening i don't figure out.

    this. is my map generation code in dashboard.component.ts:

    this.map = L.map('map_dashboard', {
    center: [23.743356, 90.244998],
    zoom: 7.3,
    minZoom: 7.3,
    maxZoom: 8.3,
    zoomSnap: 0.1,
    wheelPxPerZoomLevel: 100
    });

    L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
    maxZoom: 18,
    attribution: '<span>&copy; <a href="http://www.rimes.int"> RIMES </a>'
    }).addTo(this.map);
    this.mapService.getAdm1Map().subscribe((res:any)=>{
    this.layerGroup.clearLayers()
    let layer = L.geoJSON(res, {
    style: (feature) => (
    color: "#000000",
    weight: 1,
    opacity: 1,
    fillOpacity: 1,
    fillColor: "#b03131",
    stroke: true
    ),
    onEachFeature: function onEachFeature(features, layer) {
    let location = features.properties;
    let tooltipContent = '<table class="table table-striped table-hover m-0 p-0"><tbody>';
    if (location.ADM3_EN) {
    tooltipContent += '<tr class="table-light"><td class="mb-0">Upazila</td><th class="mb-0">' + location.ADM3_EN + '</th></tr>';
    }
    if (location.ADM2_EN) {
    tooltipContent += '<tr class="table-light"><td class="mb-0">Division</td><th class="mb-0">' + location.ADM2_EN + '</th></tr>';
    }
    if (location.ADM1_EN) {
    tooltipContent += '<tr class="table-light"><td class="mb-0">District</td><th class="mb-0">' + location.ADM1_EN + '</th></tr>';
    }
    if (location.ADM0_EN) {
    tooltipContent += '<tr class="table-light"><td class="mb-0">Country</td><th class="mb-0">' + location.ADM0_EN + '</th></tr>';
    }

    tooltipContent += '</tbody></table>';
    layer.bindTooltip(tooltipContent);
    }
    }).addTo(this.layerGroup)
    this.layerGroup.addTo(this.map)
    this.map.flyToBounds(layer.getBounds())
    })


    html:

    <div class="template-demo">
    <div id="map_dashboard" style="height: 750px; width: 100%; border: none"></div>
    </div>


    Can anyone tell me what am i missing here?

    Continue reading...

Compartilhe esta Página