Last active
November 13, 2024 13:41
-
-
Save gabriel-russo/0446657f2da16ef42e0fa3cdcb368d8f to your computer and use it in GitHub Desktop.
BetterWMS for React-Leaflet v4.x
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import L from "leaflet"; | |
| import "./L.TileLayer.BetterWMS"; | |
| import { | |
| createTileLayerComponent, | |
| createElementObject, | |
| updateGridLayer | |
| } from "@react-leaflet/core"; | |
| const BetterWMS = createTileLayerComponent( | |
| function createBetterWMSLayer({options, url, layers, ...props}, context) { | |
| const layer = L.TileLayer.betterWms(url, {layers, ...props}) | |
| return createElementObject(layer, context) | |
| }, | |
| (layer, props, prevProps) => { | |
| updateGridLayer(layer, props, prevProps); | |
| if (props.params != null && props.params !== prevProps.params) { | |
| layer.setParams(props.params); | |
| } | |
| } | |
| ); | |
| export default BetterWMS |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Credits to https://gist.github.com/rclark/6908938 | |
| import L from 'leaflet' | |
| L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({ | |
| onAdd: function (map) { | |
| // Triggered when the layer is added to a map. | |
| // Register a click listener, then do all the upstream WMS things | |
| L.TileLayer.WMS.prototype.onAdd.call(this, map); | |
| map.on('click', this.getFeatureInfo, this); | |
| }, | |
| onRemove: function (map) { | |
| // Triggered when the layer is removed from a map. | |
| // Unregister a click listener, then do all the upstream WMS things | |
| L.TileLayer.WMS.prototype.onRemove.call(this, map); | |
| map.off('click', this.getFeatureInfo, this); | |
| }, | |
| getFeatureInfo: function (evt) { | |
| // Make an AJAX request to the server and hope for the best | |
| var url = this.getFeatureInfoUrl(evt.latlng), | |
| showResults = L.Util.bind(this.showGetFeatureInfo, this); | |
| console.log(url) | |
| // UNCOMMENT HERE AND INSTALL JQUERY | |
| // $.ajax({ | |
| // url: url, | |
| // success: function (data, status, xhr) { | |
| // var err = typeof data === 'string' ? null : data; | |
| // showResults(err, evt.latlng, data); | |
| // }, | |
| // error: function (xhr, status, error) { | |
| // showResults(error); | |
| // } | |
| // }); | |
| }, | |
| getFeatureInfoUrl: function (latlng) { | |
| // Construct a GetFeatureInfo request URL given a point | |
| const point = map.latLngToContainerPoint(latlng); | |
| const size = map.getSize(); | |
| // https://docs.geoserver.org/latest/en/user/services/wms/reference.html#wms-getfeatureinfo | |
| params = { | |
| request: 'GetFeatureInfo', | |
| service: 'WMS', | |
| crs: 'EPSG:4326', | |
| styles: this.wmsParams.styles, | |
| transparent: this.wmsParams.transparent, | |
| version: this.wmsParams.version, | |
| format: this.wmsParams.format, | |
| bbox: this._map.getBounds().toBBoxString(), | |
| height: size.y, | |
| width: size.x, | |
| layers: this.wmsParams.layers, | |
| query_layers: this.wmsParams.layers, | |
| info_format: 'text/html' | |
| }; | |
| params[params.version === '1.3.0' ? 'i' : 'x'] = point.x; | |
| params[params.version === '1.3.0' ? 'j' : 'y'] = point.y; | |
| return this._url + L.Util.getParamString(params, this._url, true); | |
| }, | |
| showGetFeatureInfo: function (err, latlng, content) { | |
| if (err) { console.log(err); return; } // do nothing if there's an error | |
| // Otherwise show the content in a popup, or something. | |
| L.popup({ maxWidth: 800}) | |
| .setLatLng(latlng) | |
| .setContent(content) | |
| .openOn(this._map); | |
| } | |
| }); | |
| L.TileLayer.betterWms = function (url, options) { | |
| return new L.TileLayer.BetterWMS(url, options); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'leaflet/dist/leaflet.css' | |
| import {MapContainer, TileLayer} from "react-leaflet"; | |
| import BetterWMS from "./BetterWMS"; | |
| function Map() { | |
| const wmsLayer = { | |
| id: '777', | |
| url: "http://localhost:8080/geoserver/ows?", | |
| layers: "public:my_layer", | |
| props: { | |
| version: "1.3", | |
| format: "image/png", | |
| transparent: true, | |
| tiles: true, | |
| zIndex: 150, | |
| uppercase: true, | |
| opacity: '0.8' | |
| } | |
| } | |
| return ( | |
| <MapContainer center={[-15.795, -47.890]} zoom={8} scrollWheelZoom={true}> | |
| <TileLayer | |
| attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" | |
| /> | |
| {/* DON'T FORGET TO UNCOMMENT AJAX REQUEST ON L.TileLayer.BetterWMS.js OR CHANGE TO AXIOS*/} | |
| <BetterWMS | |
| key={wmsLayer.id} | |
| id={wmsLayer.id} | |
| url={wmsLayer.url} | |
| layers={wmsLayer.layers} | |
| {...wmsLayer.props} | |
| /> | |
| </MapContainer> | |
| ); | |
| } | |
| export default Map; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks for this!