did recently anyone try to render Style-optimized vector tiles in react-leaflet v3?
I tried following the good examples found here in an old post , but they worked only in v2.
With v3 I get
Attempted import error: 'GridLayer' is not exported from 'react-leaflet'.
And GridLayer is no more there indeed. Any idea?
Thanks
Luca
I solved like that
I created this custom component "StyleLayer"
import { useEffect } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import {} from "mapbox-gl-leaflet";
export default function StyleLayer({ styleUrl }) {
const map = useMap();
useEffect(() => {
L.mapboxGL({
style: `${styleUrl}`,
}).addTo(map);
});
return null;
}
And then I used it inside my "Map" component
<MapContainer center={coordinates} zoom={zoom} scrollWheelZoom={scroll}>
<StyleLayer styleUrl="https://myStyleCloudEndpoint.com"></StyleLayer>
</MapContainer>
The main differences with the old examples linked above hence are:
functional component instead of class (and "useEffect" hook)
"useMap" hook by react-leaflet v3, which gives direct access to the map
I made an NPM package for this: https://www.npmjs.com/package/react-leaflet-vector-tile-layer
It exposes a <VectorTileLayer> component which can also be embedded inside the react-leaflet <LayersControl>
Related
I have a tableau dashboard that I am trying to embed into a react website using the tableau-api npm package. Although it looks fine on tableau public, the layout changes when I embed it. How do I ensure that the layout stays the same when I embed it in react?
Edit: here is my code. I used this answer as reference
import React, { Component } from 'react';
import tableau from 'tableau-api';
class Visualization extends Component {
componentDidMount() {
this.initTableau()
}
initTableau() {
const vizUrl = 'url';
const vizContainer = this.vizContainer;
let viz = new window.tableau.Viz(vizContainer, vizUrl)
}
render() {
return (
<div ref={(div) => { this.vizContainer = div }}>
</div>
)
}
}
export default Visualization;
There are a couple of options you should take a look at
Change the size of your dashboard from automatic to fixed (reference here). This will help if you have floating elements in your dashboard
Add your preferred device to the dashboard panel
Change the fit option to entire view
If none of these options work, I would recommend you share a photo of your dashboard and your code to be able to debug
I would like to use Leaflet.VectorGrid plugin and I have a question. Is there an example how to create custom component in react-leaflet?
React-Leaflet aims to provide all the controls and layers provided by Leaflet, but it does not support any Leaflet plugin.
To create a custom components requires the following steps,
1.) Extend an Abstract class provided by React-Leaflet
2.) Implement createLeafletElement (props: Object): Object method to create Leaflet-element. For example,
createLeafletElement(opts) {
const MapInfo = L.Control.extend({
onAdd: (map) => {
this.panelDiv = L.DomUtil.create('div', 'info');
return this.panelDiv;
}
});
return new MapInfo({ position: 'bottomleft' });
}
3.) Using withLeaflet - Wrap your component. For example,
export default withLeaflet(MapInfo);
This Example will help you - https://codesandbox.io/s/p5zzmnlk8j
Also Please refer to this documentation https://react-leaflet.js.org/docs/en/custom-components.html
I'm using the following code snippet to try to access the MapBox API from uber react-map-gl: 4.0.2 using mapbox-gl v0.50.0.
import MapGL from 'react-map-gl';
export default class App extends Component
{
constructor(props) {
super(props);
this.mapRef= React.createRef();
}
componentDidMount()
{
let data = this.mapRef.getMap().getBounds(); <----
}
render() {
<MapGL
{...viewport}
width="100%"
height="100%"
mapStyle={MapStyle}
onViewportChange={this._updateViewport}
ref={map => this.mapRef = map}
mapboxApiAccessToken={TOKEN} >
}
}
if I try to access any other methods like getStyle/getSource and others raise an error "is not a function" & "Cannot read property 'version' of undefined". Am i Doing something wrong or Not all MapBox Api methods are not available through the getMap() method ?
Thanks
If you can get the map object correctly then all the functions should be exposed including getStyle. getSource didn't work for me either, it could be that using mapStyle is not counted as a source? Not sure about this last bit.
I use this to get the initial map boundaries.
getMapBoundaries = () => {
// Get map boundaries
const myMap = this.mapRef.getMap();
console.log(myMap.getBounds());
const mapBoundaries = myMap.getBounds();
this.setState({ mapBoundaries })
}
componentDidMount = () => this.getMapBoundaries();
I also noticed that the import for 'react-map-gl' should be
import ReactMapGL from 'react-map-gl';
Why the error?
It seems you are not using a return function in the componentDidMount method.
Originally, I had it working fine.
Then I did this and now I can't get it to work
ClipboardField.js
import React from 'react';
export default (props) => {
return(
<div id="clip" data-clipboard-text={props.code} onClick={props.onClick}>
<p> Copy to clipboard.</p>
</div>
);
}
Field.js
class DashWizardTwoCore extends Component {
componentDidMount(){
const btns = document.getElementById('clip');
const clipboard = new Clipboard(btns);
}
componentDidUpdate() {
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
}
render(){
const someCode = "const foo = 1"
return (
<div>
<ClipboardField code={this.someCode} /> }
</div>
);
}
}
If you take the code out of ClipboardField and into Field it works. It's mostly, how do I use document.getElementById() in my parent component to find something in my child?
Their examples:
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19
Your code is fine you just have a few issues:
you are binding clipboard.on in componentDidUpdate which won't trigger here since you are not really changing anything (in the ClipboardField component) that triggers this event.
You are passing {this.someCode} in the code prop which would be undefined should just be {someCode}
So it's just a matter of moving your clipboard.on to the componentDidMount right after the new Clipboard and use code={someCode}
https://jsfiddle.net/yy8cybLq/
--
In React whenever you want to access the actual dom element of your component we use what react calls as refs, I would suggest you do this rather than using getElementById as this is the "best practice".
However stateless components (like your ClipboardField component above) can't have refs so you just need to change it to be a normal component.
Here's a fiddle with your code but using refs instead: https://jsfiddle.net/e5wqk2a2/
I tried including links to the react docs for stateless components and refs but apparently don't have enough "rep" to post more than 2 links, anyways quick google search should point you in the right direction.
I adjusted your code and created a simple integration of clipboard.js with React.
Here's the fiddle: https://jsfiddle.net/mrlew/ehrbvkc1/13/ . Check it out.
Putting Mapbox in React-Starter-Kit , Im having trouble implementing MapBox in react-starter-kit. I dont know how I could make a component out of a client.
Im using this for npm package of mapbox
I wish I could do
MapBoxComponent extends Component{
static propTypes = {
path: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
title: PropTypes.string,
};
static contextTypes = {
onSetTitle: PropTypes.func.isRequired,
};
}
Is this possible?
Disclaimer: This is my first time actually, so please bear with me.
There are a couple of React components that wrap mapbox.js and mapboxgl-js:
react-mapbox
react-map-gl
react-leaflet
Here is a related discussion on github: https://github.com/mapbox/mapbox.js/issues/951