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!

Recent Answers

Lex on Does Google Analytics track 404 page responses as valid page views?
haakon.io on Why fry rice before boiling?
Joshua Engel on Why fry rice before boiling?
Peter Machado on Why fry rice before boiling?
Jon Church on Why fry rice before boiling?