Trying to use MapboxOverlay and need help troubleshooting why map will not display #9507
Unanswered
alaws-USGS
asked this question in
Q&A
Replies: 3 comments
-
|
By "map will not display" are you referring to the deck layers or the Maplibre map as well? Does the same data render for you when you use the DeckGL component standalone? |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Thanks for responding so quickly! As to your first question, my browser page will be completely blank/white and no errors are showing in the console. I have tried in both Edge and Chrome. As to your second question, it does render when I use the DeckGL component standalone and even when I wrap the Map component inside the DeckGL component. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
@Pessimistress, figured I would show you what is happening. Like I said, using the script above results in a white page with no rendering. When I use the following script, my map appears: // modules
import { Map } from "react-map-gl/maplibre";
import { GeoJsonLayer } from "@deck.gl/layers";
import { DeckGL } from "@deck.gl/react";
import { ZoomWidget } from "@deck.gl/react";
import { colorBins } from "@deck.gl/carto";
// types
import type { MapViewState, PickingInfo } from "@deck.gl/core";
import type { Feature, Geometry } from "geojson";
// css
import "maplibre-gl/dist/maplibre-gl.css";
import "@deck.gl/widgets/stylesheet.css"; // needed for widgets to render properly
const INITIAL_VIEW_STATE: MapViewState = {
longitude: -93.0612,
latitude: 44.98330486450931,
zoom: 8,
};
type PSWDGWProperties = {
states: string;
name: string;
huc12: string;
year: string;
pswdgw: string;
huc12_id: string;
};
export default function DeckMap() {
const data = "ramsey.geojson";
const layers = [
new GeoJsonLayer<PSWDGWProperties>({
id: "public-water-supply",
data: data,
stroked: true,
getLineColor: [254, 224, 210],
getLineWidth: 200,
filled: true,
getFillColor: [237, 248, 177]
}),
];
return (
<>
<DeckGL
layers={layers}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
>
<Map
reuseMaps
mapStyle={{
version: 8,
sources: {
usgs: {
type: "raster",
tiles: [ "https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/WMTS/tile/1.0.0/USGSImageryOnly/default/GoogleMapsCompatible/{z}/{y}/{x}",
],
tileSize: 256,
},
},
layers: [
{
id: "usgs-imagery",
type: "raster",
source: "usgs",
minzoom: 0,
maxzoom: 20,
},
],
}}
></Map>
<ZoomWidget />
</DeckGL>
</div>
);
}
And here is an example of the data |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello, I am exploring the capabilities of DeckGL and having a hard time getting MapboxOverlay and Map from react-map-gl/maplibre to display my map. I previously had used the DeckGL object from @deck.gl/react with the Map as a child prop display. Any thoughts or pointers where I should look to further troubleshoot this would be most appreciated.
I referenced the Maplibre and GeoJSON layer examples while writing this script.
I wrote this using React, TypeScript, DeckGl v9.1.4, and react-map-gl v8.0.1.
Beta Was this translation helpful? Give feedback.
All reactions