uber/react-map-gl getMap & exposed Mapbox API
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
mapbox-gl-js uber-api react-map-gl
asked Nov 23 '18 at 7:33
user519274
3621619
add a comment |
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
mapbox-gl-js uber-api react-map-gl
asked Nov 23 '18 at 7:33
user519274
3621619
add a comment |
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
mapbox-gl-js uber-api react-map-gl
asked Nov 23 '18 at 7:33
user519274
3621619
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
mapbox-gl-js uber-api react-map-gl
mapbox-gl-js uber-api react-map-gl
asked Nov 23 '18 at 7:33
user519274
3621619
asked Nov 23 '18 at 7:33
user519274
3621619
edited Nov 23 '18 at 23:31
asked Nov 23 '18 at 7:33
user519274
3621619
asked Nov 23 '18 at 7:33
user519274
3621619
asked Nov 23 '18 at 7:33
user519274
3621619
3621619
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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.
answered Dec 8 '18 at 0:04
Hiwa
375312
The getMap() function is inherited from static map, according to the react-map-gl docs. that's the reason you have no access to getStyle or getSource
– Mario
Dec 8 '18 at 16:49
add a comment |
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.
answered Dec 8 '18 at 16:48
Mario
15811
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442394%2fuber-react-map-gl-getmap-exposed-mapbox-api%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Dec 8 '18 at 0:04
Hiwa
375312
The getMap() function is inherited from static map, according to the react-map-gl docs. that's the reason you have no access to getStyle or getSource
– Mario
Dec 8 '18 at 16:49
add a comment |
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.
answered Dec 8 '18 at 0:04
Hiwa
375312
The getMap() function is inherited from static map, according to the react-map-gl docs. that's the reason you have no access to getStyle or getSource
– Mario
Dec 8 '18 at 16:49
add a comment |
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.
answered Dec 8 '18 at 0:04
Hiwa
375312
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.
answered Dec 8 '18 at 0:04
Hiwa
375312
answered Dec 8 '18 at 0:04
Hiwa
375312
answered Dec 8 '18 at 0:04
Hiwa
375312
answered Dec 8 '18 at 0:04
Hiwa
375312
375312
The getMap() function is inherited from static map, according to the react-map-gl docs. that's the reason you have no access to getStyle or getSource
– Mario
Dec 8 '18 at 16:49
add a comment |
The getMap() function is inherited from static map, according to the react-map-gl docs. that's the reason you have no access to getStyle or getSource
– Mario
Dec 8 '18 at 16:49
The getMap() function is inherited from static map, according to the react-map-gl docs. that's the reason you have no access to getStyle or getSource
– Mario
Dec 8 '18 at 16:49
The getMap() function is inherited from static map, according to the react-map-gl docs. that's the reason you have no access to getStyle or getSource
– Mario
Dec 8 '18 at 16:49
add a comment |
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.
answered Dec 8 '18 at 16:48
Mario
15811
add a comment |
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.
answered Dec 8 '18 at 16:48
Mario
15811
add a comment |
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.
answered Dec 8 '18 at 16:48
Mario
15811
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.
answered Dec 8 '18 at 16:48
Mario
15811
answered Dec 8 '18 at 16:48
Mario
15811
answered Dec 8 '18 at 16:48
Mario
15811
answered Dec 8 '18 at 16:48
Mario
15811
15811
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442394%2fuber-react-map-gl-getmap-exposed-mapbox-api%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
