ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-25 15:40:00 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #727 from orangemug/feature/added-html-option-to-export

Browse Source 
Added HTML export option to export modal.
This commit is contained in:
Orange Mug
2020-09-10 19:20:40 +01:00
committed by GitHub
parent 34bb3bc0a7 25e2554412
commit a86c31cefa
4 changed files with 83 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/ModalExport.jsx
View File

@@ -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>