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

Download Style

Download a JSON style to your computer.

Download Style Download HTML

} }