Skip to content

Commit

Permalink
Merge pull request #2 from watergis/feature/add_download_btn
Browse files Browse the repository at this point in the history 
Feature/add download btn
  • Loading branch information
Jin Igarashi authored Dec 25, 2020
2 parents 9261a11 + e078c26 commit ce63944
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 67 deletions.
18 changes: 17 additions & 1 deletion css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,26 @@
border-top: 1px solid #ddd;
}

.mapboxgl-elevation-control
.mapboxgl-elevation-measure-button
{
background: url('data:image/svg+xml;charset=UTF-8,<svg id="Capa_1" enable-background="new 0 0 355.175 355.175" height="355.175" viewBox="0 0 355.175 355.175" width="355.175" xmlns="http://www.w3.org/2000/svg"><g><path d="M346.175,191.576h-46.989l-33.557-36.854c-3.194-3.508-8.563-3.934-12.27-0.975l-20.818,16.62l-54.918-86.747 c-1.65-2.606-4.52-4.186-7.604-4.186s-5.954,1.58-7.604,4.186l-46.893,74.071L97.94,131.962c-1.677-2.454-4.458-3.922-7.431-3.922 s-5.753,1.468-7.431,3.922L42.34,191.576H9c-4.971,0-9,4.029-9,9s4.029,9,9,9h21.039l-7.162,10.479 c-2.805,4.104-1.751,9.704,2.353,12.509c1.553,1.062,3.321,1.57,5.07,1.57c2.873,0,5.696-1.373,7.439-3.923l3.47-5.078 l49.301-72.141l14.529,21.261l-32.212,50.881l-23.292,36.792c-2.659,4.2-1.41,9.759,2.79,12.418 c1.494,0.945,3.159,1.396,4.806,1.396c2.981,0,5.899-1.481,7.612-4.187l4.277-6.756l101-159.536l82.055,129.612l2.049,3.236 c2.658,4.199,8.218,5.448,12.418,2.79c3.822-2.42,5.19-7.24,3.402-11.253c-0.177-0.396-0.373-0.788-0.612-1.165l-27.104-42.813 l15.771-12.591l54.048,59.359l6.299,6.918c1.776,1.951,4.212,2.941,6.657,2.941c2.163,0,4.332-0.775,6.057-2.345 c3.675-3.347,3.942-9.039,0.596-12.714l-16.08-17.66h30.6c4.971,0,9-4.029,9-9S351.146,191.576,346.175,191.576z"/></g></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 70%;
}

.mapboxgl-elevation-download-button
{
background: url('data:image/svg+xml;charset=UTF-8,<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="M382.56,233.376C379.968,227.648,374.272,224,368,224h-64V16c0-8.832-7.168-16-16-16h-64c-8.832,0-16,7.168-16,16v208h-64c-6.272,0-11.968,3.68-14.56,9.376c-2.624,5.728-1.6,12.416,2.528,17.152l112,128c3.04,3.488,7.424,5.472,12.032,5.472 c4.608,0,8.992-2.016,12.032-5.472l112-128C384.192,245.824,385.152,239.104,382.56,233.376z"/></g></g><g><g><path d="M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z"/></g></g></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 70%;
}

.mapboxgl-elevation-clear-button
{
background: url('data:image/svg+xml;charset=UTF-8,<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m317.025 33.131-317.025 317.025 128.835 128.834h132.521l250.765-250.764zm152.67 195.095-84.233 84.233-152.669-152.669 84.232-84.232zm-105.446 105.446-21.247 21.247-152.67-152.669 21.248-21.248zm-115.318 115.318h-107.67l-98.835-98.834 126.693-126.693 152.67 152.669z"/></g></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 70%;
}
Binary file modified demo.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions docs/bundle.js
View file

Large diffs are not rendered by default.

171 changes: 112 additions & 59 deletions lib/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,20 @@ export default class MapboxElevationControl implements IControl

private container: HTMLElement;
private map?: MapboxMap;
private button: HTMLButtonElement;
private measureButton: HTMLButtonElement;
private downloadButton: HTMLButtonElement;
private clearButton: HTMLButtonElement;
private isQuery: boolean;
private markers: mapboxgl.Marker[] = [];
private coordinates : number[][] = [];
private elevations: number[] = [];
private elevLabels : string[]= [];
private url: string;
private labelFormat: Function;
private units: string;

private options: Options = {
tileSize: 512,
font: ['sans'],
font: ['Roboto Medium'],
fontSize: 12,
fontHalo: 1,
mainColor: '#263238',
Expand Down Expand Up @@ -83,38 +84,102 @@ export default class MapboxElevationControl implements IControl
this.container.classList.add('mapboxgl-ctrl');
this.container.classList.add('mapboxgl-ctrl-group');
this.container.classList.add('mapboxgl-elevation-list');
this.button = document.createElement('button');
this.button.classList.add('mapboxgl-elevation-control');
this.button.setAttribute('type', 'button');
this.button.addEventListener("click", () => {
this.measureButton = document.createElement('button');
this.measureButton.classList.add('mapboxgl-elevation-measure-button');
this.measureButton.setAttribute('type', 'button');
this.measureButton.addEventListener("click", () => {
if (this.isQuery) {
this.measuringOff();
} else {
this.measuringOn();
}
});
this.container.appendChild(this.button);
this.container.appendChild(this.measureButton);

this.clearButton = document.createElement('button');
this.clearButton.classList.add('mapboxgl-elevation-clear-button');
this.clearButton.style.display = "none";
this.clearButton.setAttribute('type', 'button');
this.clearButton.addEventListener("click", () => {
this.clearFeatures();
this.initFeatures();
});
this.container.appendChild(this.clearButton);

this.downloadButton = document.createElement('button');
this.downloadButton.classList.add('mapboxgl-elevation-download-button');
this.downloadButton.style.display = "none";
this.downloadButton.setAttribute('type', 'button');
this.downloadButton.addEventListener("click", () => {
if (this.coordinates.length === 0) return;
const points = this.geoPoint(this.coordinates)
points.features.forEach(f=>{
delete f.properties.text;
})
if (this.coordinates.length > 1){
const line = this.geoLineString(this.coordinates);
points.features.push(line);
}
const fileName = "elevations.geojson";
const content = JSON.stringify(points);
this.download(fileName, content)
});
this.container.appendChild(this.downloadButton);

return this.container;
}

download(fileName, content){
const blob = new Blob([ content ], { "type" : "text/plain" });
const CAN_USE_SAVE_BLOB = window.navigator.msSaveBlob !== undefined;
if ( CAN_USE_SAVE_BLOB ) {
window.navigator.msSaveBlob( blob, fileName );
return;
}
const aTag = document.createElement("a");
aTag.href = URL.createObjectURL( blob );
aTag.setAttribute( 'download', fileName );
aTag.dispatchEvent( new MouseEvent( 'click' ) );
}

measuringOn(){
this.markers = [];
this.coordinates = [];
this.elevations = [];
this.elevLabels = [];
this.isQuery = true;
if (this.map){
this.map.getCanvas().style.cursor = 'crosshair';
this.button.classList.add('-active');
this.measureButton.classList.add('-active');
this.clearButton.style.display = "block";
this.downloadButton.style.display = "block";
this.initFeatures();
this.map.on('click', this.mapClickListener);
this.map.fire('elevation.on');
}
}

measuringOff(){
this.isQuery = false;
if (this.map){
this.map.getCanvas().style.cursor = '';
this.measureButton.classList.remove('-active');
this.clearButton.style.display = "none";
this.downloadButton.style.display = "none";
this.clearFeatures();
this.map.off('click', this.mapClickListener);
this.map.fire('elevation.off');
}
}

initFeatures(){
this.markers = [];
this.coordinates = [];
this.elevations = [];
if (this.map){
this.map.addSource(SOURCE_LINE, {
type: 'geojson',
data: this.geoLineString(this.coordinates),
});
this.map.addSource(SOURCE_SYMBOL, {
type: 'geojson',
data: this.geoPoint(this.coordinates, this.elevLabels),
data: this.geoPoint(this.coordinates),
});
this.map.addLayer({
id: LAYER_LINE,
Expand Down Expand Up @@ -144,25 +209,15 @@ export default class MapboxElevationControl implements IControl
'text-halo-width': this.options.fontHalo,
},
});

this.map.on('click', this.mapClickListener);
this.map.fire('elevation.on');
}
}

measuringOff(){
this.isQuery = false;
if (this.map){
this.map.getCanvas().style.cursor = '';
this.button.classList.remove('-active');
this.map.removeLayer(LAYER_LINE);
this.map.removeLayer(LAYER_SYMBOL);
this.map.removeSource(SOURCE_LINE);
this.map.removeSource(SOURCE_SYMBOL);
this.markers.forEach((m) => m.remove());
this.map.off('click', this.mapClickListener);
this.map.fire('elevation.off');
}
clearFeatures(){
this.map?.removeLayer(LAYER_LINE);
this.map?.removeLayer(LAYER_SYMBOL);
this.map?.removeSource(SOURCE_LINE);
this.map?.removeSource(SOURCE_SYMBOL);
this.markers.forEach((m) => m.remove());
}

mapClickListener(event){
Expand All @@ -172,7 +227,7 @@ export default class MapboxElevationControl implements IControl
zoom = 15;
}
zoom = Math.round(zoom);
const lnglat = [event.lngLat.lng, event.lngLat.lat]
const lnglat : number[] = [event.lngLat.lng, event.lngLat.lat]
const trgb = new TerrainRGB(this.url, this.options.tileSize);
trgb.getElevation(lnglat, zoom)
.then(elev=>{
Expand All @@ -191,29 +246,17 @@ export default class MapboxElevationControl implements IControl
}).setLngLat(event.lngLat).addTo(this_.map);
this.markers.push(marker);

this_.coordinates.push(lnglat);
this_.coordinates.push([lnglat[0], lnglat[1], elev]);
this_.elevations.push(elev);
this_.elevLabels = this_.elevationsToLabels();
// @ts-ignore
this_.map.getSource(SOURCE_LINE).setData(this_.geoLineString(this.coordinates));
// @ts-ignore
this_.map.getSource(SOURCE_SYMBOL).setData(this_.geoPoint(this.coordinates, this.elevLabels));
this_.map.getSource(SOURCE_SYMBOL).setData(this_.geoPoint(this.coordinates));
};

})
}

elevationsToLabels() {
const { coordinates, elevations, labelFormat, units } = this;
let sum = 0;
return coordinates.map((coordinate ,index) => {
let elev = elevations[index];
if (index === 0) return labelFormat(0, elev);
sum += distance(coordinates[index - 1], coordinates[index], { units });
return labelFormat(sum, elev);
});
}

private defaultLabelFormat(length: number, elevation: number) {
let lengthLabel = `${length.toFixed(2)} km`;
if (length < 1) {
Expand All @@ -237,25 +280,35 @@ export default class MapboxElevationControl implements IControl
};
}

private geoPoint(coordinates: number[][] = [], labels: string[] = []): any {
private geoPoint(coordinates: number[][] = []): any {
const {labelFormat, units} = this;
let sum = 0;
return {
type: 'FeatureCollection',
features: coordinates.map((c, i) => ({
type: 'Feature',
properties: {
text: labels[i],
},
geometry: {
type: 'Point',
coordinates: c,
},
})),
features: coordinates.map((c, i) => {
if (i > 0){
sum += distance(coordinates[i - 1], coordinates[i], { units });
}
return ({
type: 'Feature',
properties: {
id: i + 1,
text: labelFormat(sum, c[2]),
elevation: c[2],
length: (sum * 1000).toFixed()
},
geometry: {
type: 'Point',
coordinates: c,
},
})
}),
};
}

public onRemove(): void
{
if (!this.container || !this.container.parentNode || !this.map || !this.button) {
if (!this.container || !this.container.parentNode || !this.map || !this.measureButton) {
return;
}
if (this.isQuery) {
Expand All @@ -268,8 +321,8 @@ export default class MapboxElevationControl implements IControl
}

private onDocumentClick(event: MouseEvent): void{
if (this.container && !this.container.contains(event.target as Element) && this.button) {
this.button.style.display = "block";
if (this.container && !this.container.contains(event.target as Element) && this.measureButton) {
this.measureButton.style.display = "block";
}
}
}
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@watergis/mapbox-gl-elevation",
"version": "1.0.0",
"version": "1.0.1",
"description": "This module adds elevation control to mapbox-gl.",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down

0 comments on commit ce63944

Please sign in to comment.