Open OhMaley opened 4 months ago
Isn't the GeoJson component exactly what you are searching for?
Yes and I finally figured out how to make things work. The only issue that I have it that I am not able to integrate the geojon-vt functionality in this implementation.
So far I have done that:
mainComponent.jsx
, in the render method
<CustomPigeonMap defaultCenter={[50.879, 4.6997]} defaultZoom={5} height={600} isOffline={offline} provider={this.cutomProvider}>
<GeoJson data={offlineGeojsonData} />
</CustomPigeonMap>
CustomPigeonMap.jsx
:
class CustomPigeonMap extends Map {
constructor(props) {
super(props);
this.onlineRenderTilesFunc = this.renderTiles;
this.offlineRenderTilesFunc = () => { };
if (props.isOffline) {
this.renderTiles = this.offlineRenderTilesFunc;
} else {
this.renderTiles = this.onlineRenderTilesFunc;
}
}
componentDidUpdate(prevProps) {
if (prevProps.isOffline !== this.props.isOffline) {
if (this.props.isOffline) {
this.renderTiles = this.offlineRenderTilesFunc;
} else {
this.renderTiles = this.onlineRenderTilesFunc;
}
}
}
}
I will play a bit more to see if I find a way to use the geojon-vt in this implementation.
Thanks for the help !
Hello,
For an application I need to handle both online and offline mode. When in offline mode I wish to render the map using data stored in a json file that follows the Geojson format:
offlineMap.json:
I was looking at a way to render only the necessary tiles, may be using the
tileComponent
prop of<Map />
combined with the geojson-vt library.I manage to extract the coordinates of the tile I want to render from the
tile
argument of thetileComponent
function and then get myTile
object using thegeojson
library. But now I am unsure how use this object to return a dom element from thetileComponent
function.Here what I have done so far (only the necessary code in included):
Is there a way to achieve this using this library without the need to code low rendering layer like
<svg>
or<g>
elements?Or does anyone already faced this issue?
Any insight is welcome 😃