schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 08:55:25 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added HTML export option to export modal.

Browse source
This commit is contained in:
orangemug 2020-09-09 14:06:48 +01:00
parent 8b766777ac
commit a6148e5f40
4 changed files with 82 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package-lock.json generated
View file

@ -16633,9 +16633,9 @@
} }
}, },
"slugify": { "slugify": {
"version": "1.4.0", "version": "1.4.5",
"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.0.tgz", "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
"integrity": "sha512-FtLNsMGBSRB/0JOE2A0fxlqjI6fJsgHGS13iTuVT28kViI4JjUiNqp/vyis0ZXYcMnpR3fzGNkv+6vRlI2GwdQ==" "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
}, },
"snapdragon": { "snapdragon": {
"version": "0.8.2", "version": "0.8.2",

2
package.json
View file

@ -65,7 +65,7 @@
"react-motion": "^0.5.2", "react-motion": "^0.5.2",
"react-sortable-hoc": "^1.11.0", "react-sortable-hoc": "^1.11.0",
"reconnecting-websocket": "^4.4.0", "reconnecting-websocket": "^4.4.0",
"slugify": "^1.3.6", "slugify": "^1.4.5",
"string-hash": "^1.1.3", "string-hash": "^1.1.3",
"url": "^0.11.0" "url": "^0.11.0"
}, },

85
src/components/ModalExport.jsx
View file

@ -2,6 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Slugify from 'slugify' import Slugify from 'slugify'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import pkgLockJson from '../../package-lock.json'
import {format} from '@mapbox/mapbox-gl-style-spec' import {format} from '@mapbox/mapbox-gl-style-spec'
import FieldString from './FieldString' import FieldString from './FieldString'
@ -13,6 +14,8 @@ import style from '../libs/style'
import fieldSpecAdditional from '../libs/field-spec-additional' import fieldSpecAdditional from '../libs/field-spec-additional'
const MAPBOX_GL_VERSION = pkgLockJson.dependencies["mapbox-gl"].version;
export default class ModalExport extends React.Component { export default class ModalExport extends React.Component {
static propTypes = { static propTypes = {
@ -26,23 +29,65 @@ export default class ModalExport extends React.Component {
super(props); super(props);
} }
downloadStyle() { tokenizedStyle () {
const tokenStyle = format( return format(
style.stripAccessTokens( style.stripAccessTokens(
style.replaceAccessTokens(this.props.mapStyle) style.replaceAccessTokens(this.props.mapStyle)
) )
); );
}
const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"}); exportName () {
let exportName;
if(this.props.mapStyle.name) { if(this.props.mapStyle.name) {
exportName = Slugify(this.props.mapStyle.name, { return Slugify(this.props.mapStyle.name, {
replacement: '_', replacement: '_',
lower: true remove: /[*\-+~.()'"!:]/g,
}) lower: true
});
} else { } 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"); saveAs(blob, exportName + ".json");
} }
@ -94,13 +139,21 @@ export default class ModalExport extends React.Component {
/> />
</div> </div>
<InputButton <div className="maputnik-modal-export-buttons">
onClick={this.downloadStyle.bind(this)} <InputButton
title="Download style" onClick={this.downloadStyle.bind(this)}
> >
<MdFileDownload /> <MdFileDownload />
Download Download Style
</InputButton> </InputButton>
<InputButton
onClick={this.downloadHtml.bind(this)}
>
<MdFileDownload />
Download HTML
</InputButton>
</div>
</section> </section>
</Modal> </Modal>

9
src/styles/_modal.scss
View file

@ -331,3 +331,12 @@
.modal-settings { .modal-settings {
width: 400px; width: 400px;
} }
.maputnik-modal-export-buttons {
display: flex;
justify-content: flex-end;
.maputnik-button {
margin-left: 4px;
}
}