49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import "maplibre-gl/dist/maplibre-gl.css";
|
|
import { Map, NavigationControl } from "maplibre-gl";
|
|
|
|
import * as network from "./network";
|
|
import * as vehicles from "./vehicles";
|
|
import style from "./assets/style.json";
|
|
|
|
const mapId = "c1309cde-1b6e-4c9b-8b65-48512757d354";
|
|
const mapKey = "6T8Cb9oYBFeDjDhpmNmd";
|
|
|
|
style.sources.openmaptiles.url = style.sources.openmaptiles.url.replace("{key}", mapKey);
|
|
style.glyphs = style.glyphs.replace("{key}", mapKey);
|
|
|
|
const bounds = [
|
|
"3.660507202148437", "43.49552248630757",
|
|
"4.092750549316406", "43.73736766145917",
|
|
];
|
|
|
|
export const create = (target, simulation, onClick) => {
|
|
const map = new Map({
|
|
container: target,
|
|
style,
|
|
bounds,
|
|
|
|
maplibreLogo: true,
|
|
maxPitch: 70,
|
|
});
|
|
|
|
map.addControl(new NavigationControl());
|
|
|
|
const animate = () => {
|
|
simulation.update();
|
|
vehicles.update(map, simulation.courses);
|
|
requestAnimationFrame(animate);
|
|
};
|
|
|
|
map.on("load", () => {
|
|
network.addLayers(map);
|
|
vehicles.addLayers(map);
|
|
|
|
// Move 3D buildings to the front of custom layers
|
|
map.moveLayer("building-3d");
|
|
|
|
animate();
|
|
});
|
|
|
|
return map;
|
|
};
|