kopia lustrzana https://github.com/jakecoppinger/safe-cycling-map
Use cyclosm background
rodzic
728ed63765
commit
cb147dc5a4
27
src/map.tsx
27
src/map.tsx
|
@ -1,9 +1,8 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import maplibregl from 'maplibre-gl';
|
||||
import maplibregl from "maplibre-gl";
|
||||
import "./App.css";
|
||||
import { mapOnLoad } from "./layers";
|
||||
|
||||
|
||||
export function Map() {
|
||||
const mapContainer = React.useRef<HTMLDivElement>(null);
|
||||
const mapRef = React.useRef<maplibregl.Map | null>(null);
|
||||
|
@ -25,7 +24,29 @@ export function Map() {
|
|||
container: mapContainer.current,
|
||||
center: [lng, lat],
|
||||
zoom: zoom,
|
||||
style: "./style.json",
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
"raster-tiles": {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
"https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
|
||||
],
|
||||
tileSize: 256,
|
||||
attribution:
|
||||
'© <a target="_blank" href="https://www.cyclosm.org">CyclOSM</a>, <a target="_blank" href="https://github.com/a-b-street/osm2streets">osm2streets</a>, <a target="_blank" href="https://openstreetmap.org/">OpenStreetMap contributors</a>',
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "simple-tiles",
|
||||
type: "raster",
|
||||
source: "raster-tiles",
|
||||
minzoom: 0,
|
||||
maxzoom: 22,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const map = mapRef.current;
|
||||
|
|
Ładowanie…
Reference in New Issue