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
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'm trying to import a GeoJSON file on NextJS but it says:
Module parse failed: Unexpected token (2:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
It worked fine when the project was in ReactJS with create-react-app but now that we migrate to NextJS it doesn't.
Maybe I need to configure some loaders on next.config.js but I don't know how to do it
Here is my next.config.js:
const withCSS = require("#zeit/next-css")
const withLess = require('#zeit/next-less');
const withImages = require('next-images')
module.exports = withCSS(withLess({
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
return config;
},
lessLoaderOptions: {
javascriptEnabled: true,
},
}));
Can someone help me achieve this?
Okay guys, I managed to do it!
I will try to explain what I wanted to accomplish, what was happening and what do I did.
I wanted to load a geojson data from a file into google maps api to load some layers, so I wanted to use it on map.data.loadGeoJson(imported_file.geojson)
First, I needed to make Nextjs load my file from the source so I installed json-loader
npm i --save-dev json-loader
And then added it to next.config.js
const withCSS = require("#zeit/next-css")
const withLess = require('#zeit/next-less');
const withImages = require('next-images')
module.exports = withCSS(withLess({
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
config.module.rules.push({
test: /\.geojson$/,
use: ["json-loader"]
});
return config;
},
lessLoaderOptions: {
javascriptEnabled: true,
},
}));
And then, no more error message importing the geojson file!
But now, another problem. The layers didn't load! So I read Google Maps API and tried another method to load the geojson.
map.data.addGeoJson(imported_file.geojson)
And it worked! Hope it can help who is in trouble.
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>
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 Mapquest's Javascript API for leaflet.
My code looks like this:
dir = MQ.routing.directions()
.on('success',
function (data) {
console.log(data);
var legs = data.route.legs;
var maneuvers;
if (legs && legs.length) {
maneuvers = $.map(legs[0].maneuvers,
function(m) {
return new Maneuvers(m);
});
self.maneuvers(maneuvers);
}
});
dir.route({
locations: [
self.from(),
self.to()
]
});
map.addLayer(MQ.routing.routeLayer({
directions: dir,
fitBounds: true
}));
The results I get looks like this:
Although, this looks good, the icons don't look anything like the Get Direction module on mapquest.com
How can I change the icons so that they look more modern?
Our new static map v5 is now in beta, this includes a new customizable icon service. check it out:
https://developer.mapquest.com/documentation/static-map-api/v5/getting-started/
There is a new icon service coming in the not too distant future with more modern icons. It will be a companion to a new static map version. Sorry, no eta yet.