mirror of
https://github.com/maputnik/editor.git
synced 2026-09-01 09:57:27 +00:00
Harel M
656264f2bc
This is in continue to: - #850 - #848 The last files should be converted as part of this PR, there are only a handful left.
153 lines
4.3 KiB
TypeScript
153 lines
4.3 KiB
TypeScript
import React from 'react'
|
|
import Slugify from 'slugify'
|
|
import {saveAs} from 'file-saver'
|
|
import {version} from 'maplibre-gl/package.json'
|
|
import {format} from '@maplibre/maplibre-gl-style-spec'
|
|
import type {StyleSpecification} from 'maplibre-gl'
|
|
import {MdFileDownload} from 'react-icons/md'
|
|
|
|
import FieldString from './FieldString'
|
|
import InputButton from './InputButton'
|
|
import Modal from './Modal'
|
|
import style from '../libs/style'
|
|
import fieldSpecAdditional from '../libs/field-spec-additional'
|
|
|
|
|
|
const MAPLIBRE_GL_VERSION = version;
|
|
|
|
|
|
type ModalExportProps = {
|
|
mapStyle: StyleSpecification & { id: string }
|
|
onStyleChanged(...args: unknown[]): unknown
|
|
isOpen: boolean
|
|
onOpenToggle(...args: unknown[]): unknown
|
|
};
|
|
|
|
|
|
export default class ModalExport extends React.Component<ModalExportProps> {
|
|
|
|
tokenizedStyle () {
|
|
return format(
|
|
style.stripAccessTokens(
|
|
style.replaceAccessTokens(this.props.mapStyle)
|
|
)
|
|
);
|
|
}
|
|
|
|
exportName () {
|
|
if(this.props.mapStyle.name) {
|
|
return Slugify(this.props.mapStyle.name, {
|
|
replacement: '_',
|
|
remove: /[*\-+~.()'"!:]/g,
|
|
lower: true
|
|
});
|
|
} else {
|
|
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://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-gl.js"></script>
|
|
<link href="https://unpkg.com/maplibre-gl@${MAPLIBRE_GL_VERSION}/dist/maplibre-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>
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: ${tokenStyle},
|
|
});
|
|
map.addControl(new maplibregl.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");
|
|
}
|
|
|
|
changeMetadataProperty(property: string, value: any) {
|
|
const changedStyle = {
|
|
...this.props.mapStyle,
|
|
metadata: {
|
|
...this.props.mapStyle.metadata as any,
|
|
[property]: value
|
|
}
|
|
}
|
|
this.props.onStyleChanged(changedStyle)
|
|
}
|
|
|
|
|
|
render() {
|
|
return <Modal
|
|
data-wd-key="modal:export"
|
|
isOpen={this.props.isOpen}
|
|
onOpenToggle={this.props.onOpenToggle}
|
|
title={'Export Style'}
|
|
className="maputnik-export-modal"
|
|
>
|
|
|
|
<section className="maputnik-modal-section">
|
|
<h1>Download Style</h1>
|
|
<p>
|
|
Download a JSON style to your computer.
|
|
</p>
|
|
|
|
<div>
|
|
<FieldString
|
|
label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
|
|
fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
|
|
value={(this.props.mapStyle.metadata || {} as any)['maputnik:openmaptiles_access_token']}
|
|
onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
|
|
/>
|
|
<FieldString
|
|
label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
|
|
fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
|
|
value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
|
|
onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
|
|
/>
|
|
</div>
|
|
|
|
<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>
|
|
}
|
|
}
|
|
|