0

I am trying to display Google basemap using leaflet.js on web but getting strange results, screenshot is attached

enter image description here

I have also added the code for react component below

import React, { Component } from 'react';
import L from 'leaflet';

class MapEditor extends Component{
    state={}

    componentDidMount() {
        var map = L.map('map', {
            center:[30.2541,69.703431],
            zoom: 6})
        L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
            maxZoom: 19,
            subdomains:['mt0']
        }).addTo(map);
    };
    
    render(){
        return(
            <div id='mapeditor'>
                    <div id='map'>
                    </div>
                
            </div>
        )
    };
}

export default MapEditor;

How can I fix this issue?

1

1 Answer 1

1

Your L.tileLayer link works for me. I used it in the minmal sample from LeafletJS


<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .leaflet-container {
            height: 400px;
            width: 600px;
            max-width: 100%;
            max-height: 100%;
        }
    </style>

    
</head>
<body>

<div id="map" style="width: 600px; height: 400px;"></div>
<script>
    var map = L.map('map').setView([30.2541,69.703431], 13);

    var tiles =  L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
      maxZoom: 19,
      subdomains:['mt0']
  }).addTo(map);
  
</script>
</body>
</html>

Could be an CSS issue or related to React.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.