mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-26 18:40:37 +01:00
Added HTML export option to export modal.
This commit is contained in:
orangemug
parent
8b766777ac
commit
a6148e5f40
4 changed files with 82 additions and 20 deletions
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -16633,9 +16633,9 @@
|
|||
}
|
||||
},
|
||||
"slugify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.0.tgz",
|
||||
"integrity": "sha512-FtLNsMGBSRB/0JOE2A0fxlqjI6fJsgHGS13iTuVT28kViI4JjUiNqp/vyis0ZXYcMnpR3fzGNkv+6vRlI2GwdQ=="
|
||||
"version": "1.4.5",
|
||||
"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
|
||||
"integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
|
||||
},
|
||||
"snapdragon": {
|
||||
"version": "0.8.2",
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
"react-motion": "^0.5.2",
|
||||
"react-sortable-hoc": "^1.11.0",
|
||||
"reconnecting-websocket": "^4.4.0",
|
||||
"slugify": "^1.3.6",
|
||||
"slugify": "^1.4.5",
|
||||
"string-hash": "^1.1.3",
|
||||
"url": "^0.11.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React from 'react'
|
|||
import PropTypes from 'prop-types'
|
||||
import Slugify from 'slugify'
|
||||
import { saveAs } from 'file-saver'
|
||||
import pkgLockJson from '../../package-lock.json'
|
||||
|
||||
import {format} from '@mapbox/mapbox-gl-style-spec'
|
||||
import FieldString from './FieldString'
|
||||
|
|
@ -13,6 +14,8 @@ import style from '../libs/style'
|
|||
import fieldSpecAdditional from '../libs/field-spec-additional'
|
||||
|
||||
|
||||
const MAPBOX_GL_VERSION = pkgLockJson.dependencies["mapbox-gl"].version;
|
||||
|
||||
|
||||
export default class ModalExport extends React.Component {
|
||||
static propTypes = {
|
||||
|
|
@ -26,23 +29,65 @@ export default class ModalExport extends React.Component {
|
|||
super(props);
|
||||
}
|
||||
|
||||
downloadStyle() {
|
||||
const tokenStyle = format(
|
||||
tokenizedStyle () {
|
||||
return format(
|
||||
style.stripAccessTokens(
|
||||
style.replaceAccessTokens(this.props.mapStyle)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
|
||||
let exportName;
|
||||
exportName () {
|
||||
if(this.props.mapStyle.name) {
|
||||
exportName = Slugify(this.props.mapStyle.name, {
|
||||
replacement: '_',
|
||||
lower: true
|
||||
})
|
||||
return Slugify(this.props.mapStyle.name, {
|
||||
replacement: '_',
|
||||
remove: /[*\-+~.()'"!:]/g,
|
||||
lower: true
|
||||
});
|
||||
} else {
|
||||
exportName = this.props.mapStyle.id
|
||||
return this.props.mapStyle.id
|
||||
}
|
||||
}
|
||||
|
||||
downloadHtml() {
|
||||
const tokenStyle = this.tokenizedStyle();
|
||||
const htmlTitle = this.props.mapStyle.name || "Map";
|
||||
const html = `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>${htmlTitle}</title>
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.js"></script>
|
||||
<link href="https://api.mapbox.com/mapbox-gl-js/v${MAPBOX_GL_VERSION}/mapbox-gl.css" rel="stylesheet" />
|
||||
<style>
|
||||
body { margin: 0; padding: 0; }
|
||||
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
mapboxgl.accessToken = 'access_token';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: ${tokenStyle},
|
||||
});
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
const blob = new Blob([html], {type: "text/html;charset=utf-8"});
|
||||
const exportName = this.exportName();
|
||||
saveAs(blob, exportName + ".html");
|
||||
}
|
||||
|
||||
downloadStyle() {
|
||||
const tokenStyle = this.tokenizedStyle();
|
||||
const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
|
||||
const exportName = this.exportName();
|
||||
saveAs(blob, exportName + ".json");
|
||||
}
|
||||
|
||||
|
|
@ -94,13 +139,21 @@ export default class ModalExport extends React.Component {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<InputButton
|
||||
onClick={this.downloadStyle.bind(this)}
|
||||
title="Download style"
|
||||
>
|
||||
<MdFileDownload />
|
||||
Download
|
||||
</InputButton>
|
||||
<div className="maputnik-modal-export-buttons">
|
||||
<InputButton
|
||||
onClick={this.downloadStyle.bind(this)}
|
||||
>
|
||||
<MdFileDownload />
|
||||
Download Style
|
||||
</InputButton>
|
||||
|
||||
<InputButton
|
||||
onClick={this.downloadHtml.bind(this)}
|
||||
>
|
||||
<MdFileDownload />
|
||||
Download HTML
|
||||
</InputButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -331,3 +331,12 @@
|
|||
.modal-settings {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.maputnik-modal-export-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.maputnik-button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue