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' import FieldCheckbox from './FieldCheckbox' import InputButton from './InputButton' import Modal from './Modal' import {MdFileDownload} from 'react-icons/md' 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 = { mapStyle: PropTypes.object.isRequired, onStyleChanged: PropTypes.func.isRequired, isOpen: PropTypes.bool.isRequired, onOpenToggle: PropTypes.func.isRequired, } constructor(props) { super(props); } 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 = ` ${htmlTitle}

`; 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, value) { const changedStyle = { ...this.props.mapStyle, metadata: { ...this.props.mapStyle.metadata, [property]: value } } this.props.onStyleChanged(changedStyle) } render() { return

Download Style

Download a JSON style to your computer.

Download Style Download HTML

} }