mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 19:01:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

app updates

Browse Source
This commit is contained in:
Brandon Liu
2022-06-01 10:46:38 +08:00
parent f865bd9899
commit 9309f42ced
10 changed files with 1420 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/src/MaplibreMap.tsx
View File

@@ -8,33 +8,33 @@ const MapContainer = styled("div", {
height: "calc(100vh - $4)",
});
const rasterStyle = (file:string) => {
const rasterStyle = (file: PMTiles) => {
return {
version: 8,
sources: {
source: {
type: "raster",
tiles: ["pmtiles://" + file + "/{z}/{x}/{y}"],
maxzoom:4
tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
maxzoom: 4,
},
},
layers: [
{
id: "raster",
type: "raster",
source: "source"
source: "source",
},
],
};
};
const vectorStyle = (file:string) => {
const vectorStyle = (file: PMTiles) => {
return {
version: 8,
sources: {
source: {
type: "vector",
tiles: ["pmtiles://" + file + "/{z}/{x}/{y}"],
tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
maxzoom: 7,
},
},
@@ -62,11 +62,12 @@ const vectorStyle = (file:string) => {
};
};
function MaplibreMap(props: { file: string, tileType: string | null }) {
function MaplibreMap(props: { file: PMTiles; tileType: string | null }) {
let mapRef = useRef<HTMLDivElement>(null);
useEffect(() => {
let cache = new ProtocolCache();
maplibregl.addProtocol("pmtiles", cache.protocol);
cache.add(props.file);
const map = new maplibregl.Map({
container: "map",
@@ -74,6 +75,7 @@ function MaplibreMap(props: { file: string, tileType: string | null }) {
center: [0, 0],
style: rasterStyle(props.file) as any,
}); // TODO maplibre types (not any)
map.addControl(new maplibregl.NavigationControl({}));
map.on("load", map.resize);
return () => {