This module adds control which can export PDF and images.
!badge
!badge
!badge
!badge
!GitHub
This module adds control which can export PDF and images.
This module is using source code of mpetroff/print-maps. I just adopted this library to normal Mapbox GL Plugin. Thanks so much to develop this library!
Please consider to use maplibre-gl-export plugin for Maplibre GL.
``bash`
npm i ns-mapbox-gl-export --save
Furthermore, you may download specific version's scripts and css locally from release page.
Try codesandbox.
See demo.
`ts
import { MapboxExportControl, Size, PageOrientation, Format, DPI} from "ns-mapbox-gl-export";
import 'ns-mapbox-gl-export/css/styles.css';
import mapboxgl from 'mapbox-gl';
const map = new mapboxgl.Map();
// create control with default options
map.addControl(new MapboxExportControl(), 'top-right');
// create control with specified options
map.addControl(new MapboxExportControl({
PageSize: Size.A3,
PageOrientation: PageOrientation.Portrait,
Format: Format.PNG,
DPI: DPI[96],
Crosshair: true,
PrintableArea: true
}), 'top-right');
`
- for mapbox v1 user
`ts`
mapboxgl.accessToken='your mapbox access token'
- for mapbox v2 user
There is an option of accessToken in MapboxExportControl. Please put your accessToken when you create a instance of plugin.
`ts`
mapboxgl.accessToken='your mapbox access token'
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
});
map.addControl(new MapboxExportControl({
accessToken: 'your mapbox access token'
}), 'top-right');
You can specify default option as follows.
- PageSize
- You can select from A2 to A6 or B2 to B6A4
- default page size is landscape
- PageOrientation
- You can select or portraitlandscape
- default is jpg
- Format
- You can select it from , png, svg and pdf
- default is 72
- DPI
- You can select it from , 96, 200, 300 and 400.300
- default is true
- Crosshair
- Display crosshair on the map. it helps to adjust the map center before printing.
- accepts and false valuefalse
- default is true
- PritableArea
- Display printable area on the map it helps to adjust pritable area before printing.
- accepts and false valuefalse
- default is en
- Local
- default for englishde
- germanfr
- frenchfi
- finnishsv
- swedishAttribution
When you use exported map, please includes attribution as follows.
If you can include HTML, use this code snippet that includes links to Mapbox & OpenStreetMap:
`html`
© NARWASSCO, Ltd. © Mapbox © OpenStreetMap Improve this mapPowered by the United Nations Vector Tile Toolkit
For print output or if you can’t include links, use this text-only attribution:
``
© NARWASSCO, Ltd. ©Mapbox ©OpenStreetMap contributors, Powered by the United Nations Vector Tile Toolkit
© NARWASSCO, Ltd. is default example of map data by Narok Water and Sewerage Services Co., Ltd., Kenya. If you don't use current map, you don't need to use this attribution.
Also, default example is using base map by United Nation Vector Tile Toolkit. That is why Powered by the United Nations Vector Tile Toolkit is included in above.
`bash`
npm run lint # check styling of source code
npm run lint:fix # fix styling by eslint
npm run dev
open http://localhost:8080.
If there are any changes on source code, it will be reflected automatically.
`bash`
npm run build
The modules will be generated under dist folder.
`bash`
npm run deploy
It will deploy files under example folder to gh-pages.
`zsh``
npm version patch # it increase patch version 0.0.X
npm version minor # it increase minor version 0.x.0
npm version major # it increase major version x.0.0
git push origin master --tagrelease CI will create draft release in Github pages, then publish it if it is ready.
publish CI will deploy npmjs and Github Packages.
This Mapbox GL Export Control is still under development. so most welcome any feedbacks and pull request to this repository.