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

WIP: feat(studio): export NOAH Studio output as a downloadable format #239

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

WIP: feat(studio): export NOAH Studio output as a downloadable format #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95fc7c6
added camera icon in map noah studio
bon-carpo Dec 2, 2021
f64773f
add click function
bon-carpo Dec 3, 2021
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
50 changes: 50 additions & 0 deletions src/app/features/noah-playground/components/map-playground/map-playground.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,56 @@
</div>
</div>
</div>
<div class="top-44 absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-4">
<div class="p-2">
<div class="inline-block relative">
<a
class="
bg-white
text-gray-800
font-semibold
py-1
px-1
ml-2
rounded
inline-flex
items-center
hover:bg-gray-200
focus:outline-none
focus:ring-2
focus:ring-gray-600
focus:ring-opacity-50
"
id="imgLink"
download="noah-studio.png"
href=""
target="_blank"
(click)="exportScreenshots()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
Comment on lines +137 to +156
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Save this as an image and use it as a src to an img element

</a>
</div>
</div>
</div>

<!-- //Customizing Mapbox attribution -->
<div class="mapboxgl-ctrl-bottom-right hidden md:block">
Expand Down
9 changes: 9 additions & 0 deletions src/app/features/noah-playground/components/map-playground/map-playground.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ import {
WEATHER_SATELLITE_ARR,
} from '@features/noah-playground/store/noah-playground.store';
import { NOAH_COLORS } from '@shared/mocks/noah-colors';
import { time } from 'console';

type MapStyle = 'terrain' | 'satellite';

Expand Down Expand Up @@ -104,6 +105,7 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
private _graphShown = false;
private _unsub = new Subject();
private _changeStyle = new Subject();
private href: string;

constructor(
private mapService: MapService,
Expand Down Expand Up @@ -655,6 +657,13 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
}
}

exportScreenshots() {
const downloadButton = document.getElementById('imgLink');
const img = this.map.getCanvas().toDataURL('image/png'); // generate image
downloadButton.setAttribute('href', img); // set button href to the img
this.href = img;
}

/**
* All hazard maps except the debris flow and alluvial fan are
* added to the map as layers of FillLayer type with gradations
Expand Down