Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactored Javascript implementation for easier porting #5

Merged
merged 8 commits into from
Aug 30, 2024
+745 −750
Merged

Refactored Javascript implementation for easier porting #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b65ff22
Initial refactor of polyline implementation.
mbalfour-amzn Aug 23, 2024
7b1ee2a
Ran prettier on the code.
mbalfour-amzn Aug 26, 2024
f39ffd7
More code and comment cleanup.
mbalfour-amzn Aug 26, 2024
67a6498
Reorganized files to make the hierarchy a little clearer.
mbalfour-amzn Aug 26, 2024
1b0d9e3
Adds a demo HTML page showing how the encode and decode APIs are used.
mbalfour-amzn Aug 26, 2024
5a10c9e
Removed external polyline dependencies from package file.
mbalfour-amzn Aug 26, 2024
e604467
Ran prettier on the demo HTML file.
mbalfour-amzn Aug 26, 2024
a87b6b0
Added missing "level" value.
mbalfour-amzn Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions javascript/demo/polyline-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<html>
<head>
<link
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
}
#map {
height: 100vh;
}
</style>
</head>
<body>
<div id="map" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="../dist/polyline.js"></script>

<script>
// Create a simple map using the default MapLibre demo tiles.
const map = new maplibregl.Map({
container: "map",
style: "https://demotiles.maplibre.org/style.json",
});

map.on("load", () => {
try {
// Create a sample route that draws out "Polyline".
const lngLatArray = [
[-28.193, -61.38823],
[-26.78675, -45.01442],
[-9.20863, -43.2583],
[-9.20863, -52.20348],
[-26.78675, -53.26775],
[-28.193, -61.38823],
[-20.10706, -61.21942],
[-19.05238, -57.07888],
[-8.85706, -57.07888],
[-9.20863, -61.21942],
[-20.10706, -61.21942],
[-0.068, -60.70753],
[2.7445, -43.75829],
[-0.068, -60.70753],
[11.182, -60.53506],
[6.96325, -55.11851],
[11.182, -60.53506],
[16.807, -54.51079],
[3.47762, -65.61471],
[11.182, -60.53506],
[22.432, -60.18734],
[25.59606, -42.99168],
[22.432, -60.18734],
[31.22106, -59.83591],
[32.62731, -53.05697],
[31.22106, -59.83591],
[38.25231, -59.65879],
[40.36169, -53.05697],
[40.01012, -54.71438],
[44.22887, -53.26775],
[47.39294, -55.5186],
[46.68981, -59.65879],
[53.72106, -59.30172],
[51.26012, -56.11118],
[56.182, -53.89389],
[60.40075, -56.69477],
[51.26012, -56.11118],
[53.72106, -59.30172],
[58.64294, -59.48073],
];

// Encode and decode the route polyline to demonstrate how the APIs are used.
const routePolyline = polyline.encodeFromLngLatArray(lngLatArray);
var decodedGeoJSON =
polyline.decodeToLineStringFeature(routePolyline);

// Add the decoded GeoJSON to a layer on the map and draw it as a thin red line.
map.addLayer({
id: `route`,
type: "line",
source: {
type: "geojson",
data: decodedGeoJSON,
},
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#FF0000",
"line-width": 2,
},
});
} catch (error) {
console.error(error);
}
});
</script>
</body>
</html>
Loading
Loading