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 React, { useEffect, useState } from "react";
|
||||||
import maplibregl from 'maplibre-gl';
|
import maplibregl from "maplibre-gl";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import { mapOnLoad } from "./layers";
|
import { mapOnLoad } from "./layers";
|
||||||
|
|
||||||
|
|
||||||
export function Map() {
|
export function Map() {
|
||||||
const mapContainer = React.useRef<HTMLDivElement>(null);
|
const mapContainer = React.useRef<HTMLDivElement>(null);
|
||||||
const mapRef = React.useRef<maplibregl.Map | null>(null);
|
const mapRef = React.useRef<maplibregl.Map | null>(null);
|
||||||
|
@ -25,7 +24,29 @@ export function Map() {
|
||||||
container: mapContainer.current,
|
container: mapContainer.current,
|
||||||
center: [lng, lat],
|
center: [lng, lat],
|
||||||
zoom: zoom,
|
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;
|
const map = mapRef.current;
|
||||||
|
|
Ładowanie…
Reference in New Issue