How to set the same size between GeoServer and Leaflet?

Geographic Information Systems Asked on September 28, 2021

The right Map is a layer from GeoServer (I set the CRS as 4326) in the left is the result of the Leaflet code (here a linked the GeoServer layer to publish in the leaflet map), as you can see in the map, on the red dot, the size is not the same. How can I resize both?

The Leaflet code is:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.1, maximum-scale=1.0, user-scalable=no">
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <style>
    html, body { height: 100%; padding: 0; margin: 0; }
    #map {
    /* Configuração do Tamanho do Mapa */
    width: 100%;
    height: 100%;  }
    </style>
    </head>
    <body>
    <div id="map"></div> <script>

    // Inicializar o Leaflet - CODIGO ORIGINAL = var map = L.map('map').setView([50.84673, 4.35247], 12); outro var map = L.map('map').setView({lon: 0, lat:0}, 4);
    var map = L.map('map' , {crs: L.CRS.EPSG4326}).setView([-19, 35], 4);
    // Adicionar OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19,
    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }).addTo(map);
    //Inserir layers do Geoserver
    // Create & add WMS-layer.
    var casos_covid_19 = new L.TileLayer.WMS('http://localhost:8080/geoserver/COVID_19/wms', {
    layers: 'moz_casos_covid_19',
    format: 'image/png',
    transparent: true,
    version: '1.1.0',
    crs: L.CRS.EPSG4326
    }).addTo(map);
    var moz_prov = new L.TileLayer.WMS('http://localhost:8080/geoserver/COVID_19/wms', {
    layers: 'moz_provincias',
    format: 'image/png',
    transparent: true,
    version: '1.1.0',
    crs: L.CRS.EPSG4326
    }).addTo(map);
    // show the scale bar on the lower left corner
    L.control.scale().addTo(map);
    // Inserir e visualizar markers no mapa
    //L.marker({lon: 0, lat: 0}).bindPopup('The center of the world').addTo(map);
    //L.marker({lon: 32.5, lat: -25.9}).bindPopup("<b>MAPUTO</b><br>INFECTADOS = 11</b><br>RECUPERADOS = 4</b><br>MORTOS = 0").addTo(map);
    //L.marker({lon: 39.5, lat: -12.5}).bindPopup("<b>CABO DELGADO</b><br>INFECTADOS = 20</b><br>RECUPERADOS = 0</b><br>MORTOS = 0").addTo(map);
    </script>
  </body>
</html>

geoserver leaflet

One Answer

I had to change the CRS in Geoserver to EPSG:4326 and keep the L.CRS.EPSG4326

Is not 100% fitted but is good for know.

Answered by Paulo Martinho on September 28, 2021

Add your own answers!

Ask a Question

Get help from others!