Untitled

<script>
	import { LMap, LTileLayer, LMarker, LIcon } from "@vue-leaflet/vue-leaflet";
	import "leaflet/dist/leaflet.css";
	import markers from "../assets/citybike.json";
	import L from "leaflet";
	import "leaflet-routing-machine";

	async function getRoute(end) {
		const query = await fetch(`https://api.mapbox.com/directions/v5/mapbox/cycling/${start[0]},${start[1]};${end[0]},${end[1]}?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken}`, { method: "GET" });
		const json = await query.json();
		const data = json.routes[0];
		const route = data.geometry.coordinates;
		const geojson = {
			type: "Feature",
			properties: {},
			geometry: {
				type: "LineString",
				coordinates: route,
			},
		};
		if (map.getSource("route")) {
			map.getSource("route").setData(geojson);
		} else {
			map.addLayer({
				id: "route",
				type: "line",
				source: {
					type: "geojson",
					data: geojson,
				},
				layout: {
					"line-join": "round",
					"line-cap": "round",
				},
				paint: {
					"line-color": "#3887be",
					"line-width": 5,
					"line-opacity": 0.75,
				},
			});
		}
	}

	map.on("load", () => {
		getRoute(start);
		map.addLayer({
			id: "point",
			type: "circle",
			source: {
				type: "geojson",
				data: {
					type: "FeatureCollection",
					features: [
						{
							type: "Feature",
							properties: {},
							geometry: {
								type: "Point",
								coordinates: start,
							},
						},
					],
				},
			},
			paint: {
				"circle-radius": 10,
				"circle-color": "#3887be",
			},
		});
	});

	export default {
		components: {
			LMap,
			LTileLayer,
			LMarker,
			LIcon,
		},
		data() {
			return {
				markers,
				zoom: 13,
				iconUrl: "/src/assets/marker.svg",
				iconSize: [36, 36],
			};
		},
	};
</script>

<template>
	<div class="map">
		<l-map :use-global-leaflet="false" ref="map" v-model:zoom="zoom" :center="[40.7484, -73.9857]">
			<l-marker v-for="(marker, index) in markers.stationBeanList" :key="index" :lat-lng="[marker.latitude, marker.longitude]">
				<l-icon :icon-url="iconUrl" :icon-size="iconSize"></l-icon>
			</l-marker>
			<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap" :max-zoom="18" :min-zoom="12"></l-tile-layer>
		</l-map>
	</div>
</template>

<style scoped lang="css">
	.map {
		height: 600px;
		width: 800px;
	}

	.leaflet-div-icon {
		background: steelblue;
		color: rgba(255, 255, 255, 0.5);
		border-radius: 50%;
		font-weight: bold;
		font-size: large;
		text-align: center;
		line-height: 21px;
	}
</style>