TransWikia.com

Display a layer stored in GeoServer with Leaflet

Geographic Information Systems Asked by user28253 on March 19, 2021

I wanted to display a layer stored in GeoServer with Leaflet, I used this code but it’s not working.

var map = L.map('map').setView([4.477411, 21.309284], 3);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
{ 
attribution: '&copy; <a href="http://www.osm.org">OpenStreetMap</a>' 
})
addTo(map);

// Instantiation de différentes couches provenant de GeoServer

var exemple = L.tileLayer.wms("http://localhost:8080/geoserver/nurc/wms", {
    layers: 'nurc:Arc_Sample',
    format: 'image/png',
    transparent: true
});

exemple.addTo(map);

The error reported is:

Uncaught ReferenceError: L is not defined
geoserverjavascriptleafletwms

2 Answers

  1. press f12, resolve any issue visible in the browser-console.

  2. disable all other libs/packages of javascript to see any cross lib issue.

  3. clear browser cache by using ctrl + f5.

  4. if still happening try to use the latest leaflet package and then reload after clear cache.

Answered by Muhammad Imran Siddique on March 19, 2021

Just add leaflet.js and leaflet.css files to your project:

<html>
<head>
<title>leaflet application</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

Answered by ArashMad on March 19, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP