Public
Script
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/** @jsx jsx */
/** @jsxFrag Fragment */
import { jsx, Fragment } from 'https://deno.land/x/hono/middleware.ts'
import Mapbox from 'npm:mapbox-gl';
interface MapboxProps {
city: string;
}
export default function MapboxComponent({ city }: MapboxProps) {
const mapContainer = <div id="map" style={{ width: '100%', height: '400px' }}></div>;
const initializeMap = () => {
Mapbox.accessToken = 'MAPBOX_ACCESS_TOKEN';
const map = new Mapbox.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [0, 0],
zoom: 2
});
fetch(`https://iamseeley-Map.web.val.run?city=${encodeURIComponent(city)}`)
.then(response => response.json())
.then(mapData => {
if (mapData.error) {
console.error('Error:', mapData.error);
return;
}
map.setCenter(mapData.center);
map.setZoom(mapData.zoom);
mapData.markers.forEach(marker => {
new Mapbox.Marker()
.setLngLat(marker.coordinates)
.setPopup(new Mapbox.Popup().setText(`${marker.title}: ${marker.description}`))
.addTo(map);
});
});
};
setTimeout(initializeMap, 0);
return mapContainer;
}
May 17, 2024