Code Monkey home page Code Monkey logo

mapbox-gl-export's Introduction

This repository was merged into maplibre-gl-export

mapbox-gl-export

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!

This plugin was merged into maplibre-gl-export repository as a monorepo package. Don't worry, it still supports Mapbox GL JS with the same package name of @watergis/mapbox-gl-export!

for Maplibre GL users

Please consider to use maplibre-gl-export plugin for Maplibre GL.

Installation

npm i @watergis/mapbox-gl-export --save

Use CDN

<link href='https://watergis.github.io/mapbox-gl-export/mapbox-gl-export.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js'></script>
<script src="https://watergis.github.io/mapbox-gl-export/mapbox-gl-export.js"></script>
<script>
  map.addControl(new MapboxExportControl({
      PageSize: Size.A3,
      PageOrientation: PageOrientation.Portrait,
      Format: Format.PNG,
      DPI: DPI[96],
      Crosshair: true,
      PrintableArea: true,
  }), 'top-right');
</script>

Furthermore, you may download specific version's scripts and css locally from release page.

Demo

Try codesandbox.

See demo.

demo.gif

Usage

import { MapboxExportControl, Size, PageOrientation, Format, DPI} from "@watergis/mapbox-gl-export";
import '@watergis/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');

if you want to use a basemap from Mapbox

  • for mapbox v1 user
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.
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');

Options

You can specify default option as follows.

  • PageSize
    • You can select from A2 to A6 or B2 to B6
    • default page size is A4
  • PageOrientation
    • You can select landscape or portrait
    • default is landscape
  • Format
    • You can select it from jpg, png, svg and pdf
    • default is PDF
  • DPI
    • You can select it from 72, 96, 200, 300 and 400.
    • default is 300
  • Crosshair
    • Display crosshair on the map. it helps to adjust the map center before printing.
    • accepts true and false value
    • default is false
  • PritableArea
    • Display printable area on the map it helps to adjust pritable area before printing.
    • accepts true and false value
    • default is false
  • Local
    • default en for english
    • de german
    • fr french
    • fi finnish
    • sv swedish
    • zhHans Chinese Simplified
    • zhHant Chinese Traditional

Attribution

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:

© NARWASSCO, Ltd. © <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>Powered 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.

Development

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.

Build package

npm run build

The modules will be generated under dist folder.

Deploy to Github pages

npm run deploy

It will deploy files under example folder to gh-pages.

How to release

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 --tag
# release CI will create draft release in Github pages, then publish it if it is ready.
# publish CI will deploy npmjs and Github Packages.

Contribution

This Mapbox GL Export Control is still under development. so most welcome any feedbacks and pull request to this repository.

mapbox-gl-export's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mapbox-gl-export's Issues

Error when generating a PDF

Describe the bug
Unable to generate a PDF just get a spinning wheel

To Reproduce
Click print icon with A3 Portrait PDF 96 DPI,

Expected behavior
A PDF is generated.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Version: 103

Additional context
We are generating many layers behind the scenes using various plugins and some generated layers ourselves.
Is this something we need to fix or something the plugin can handle?

Error text:

mapbox-gl.js:31 Error: layers[140].type: expected one of [fill, line, symbol, circle, heatmap, fill-extrusion, raster, hillshade, background], "sky" found
    at Object.Bn [as emitValidationErrors] (mapbox-gl.js:31:133534)
    at Ue (mapbox-gl.js:35:112388)
    at i._load (mapbox-gl.js:35:114931)
    at mapbox-gl.js:35:114750
    at timer (zone.js:2405:1)
    at _ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25595:1)
    at _ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at invokeTask (zone.js:487:1)```

Markers in the Map are not printed

I was using react-map-gl which is a suite of React components for Mapbox GL JS-compatible libraries. I wanted to implement the exact same functionality as this library but the problem is that the markers in my map are not printed . I tried to use Mapbox GL JS and also added a sample marker just to see if the marker is printed but to no avail .

  useEffect(() => {
    mapRef.current = mapRef.current.getMap().addControl(
      new MapboxExportControl({
        PageSize: Size.A3,
        PageOrientation: PageOrientation.Portrait,
        Format: Format.PNG,
        DPI: DPI[96],
        Crosshair: true,
        PrintableArea: true,
        accessToken: process.env.REACT_APP_MAPBOX_TOKEN,
      }),
      "top-right"
    );

    const marker = new mapboxgl.Marker()
      .setLngLat([8.5, 50])
      .addTo(mapRef.current);

    return () => (mapRef.current = null);
  }, []);
  return (
    <div className={styles.Container}>
      <ReactMapGL
        {...viewport}
        ref={mapRef}
        width="100%"
        height="100%"
        onViewportChange={setViewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        dragRotate={false}
        mapStyle="mapbox://styles/mapbox/streets-v10"
        preserveDrawingBuffer={true}
      >
        <Pins data={Places} onClick={onSelectPlace} />
        <ScaleControl style={scaleControlStyle} />
        <NavigationControl style={navStyle} />
      </ReactMapGL>
    </div>
  );

The getMap() exposes the Mapbox API here as stated in the documentation of react map gl.

I also printed the map object (mapRef.current) and as we can see the map does contain the marker in it but is not printed.

MicrosoftTeams-image (3)

As far as i see the library only prints the lower layer of map but i also want to print the Pins(Markers) which get populated when the api is called. Can you please help ?

can't export in mapbox gl v.2.6.1

I use react to implement web map page to display mapbox map with export control:

`const map = new mapboxgl.Map({

  container: "map", // container ID

  style: "mapbox://styles/mapbox/streets-v11", // style URL

  center: [-74.5, 40], // starting position [lng, lat]

  zoom: 9, // starting zoom

  accessToken:"my token"});`
//export control
`map.addControl(new MapboxExportControl(), "top-right");`

when I clicked to export this error occurs to me:
image

Note: I initialize mapbox token at the beginning :
mapboxgl.accessToken =
"my token";

Export to SVG doesn't create a vector file.

Describe the bug
This tool allows you to export a map as an SVG, but it doesn't create a vector file. Instead, it just embeds an <image> element with base64 encoded raster data.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the demo site.
  2. Click on the Print button.
  3. Export a map as an SVG.
  4. Open the exported SVG with a text editor.

Expected behavior
I would have expected the SVG to be a vector graphic. The exported SVG is basically useless if it's just a raster image wrapped with an SVG tag.

Screenshots
Screen Shot 2022-04-22 at 11 00 49 AM

Saving image does not preserve colors

I am trying to use this to screenshot the map with a GeoJSON feature Layer that has different colors, and the layer is saved as part of the screenshot, but not the colors. Thank you.

Installing the plugin

Hello. Please tell me how to connect the plugin to the site where mapbox gl is used. Nothing works through npm.

Install not adding *.js files to node_modules folder

Describe the bug
Install not adding *.js files to node_modules folder

To Reproduce

  1. Run npm i @watergis/mapbox-gl-export --save or npm i git+https://github.com/watergis/mapbox-gl-export.git#mbgljs-v2 --save
  2. Run ls node_modules\@watergis\mapbox-gl-export

Expected behavior
Package installed with all contents

Desktop (please complete the following information):

  • windows 10
  • chrome

Additional context
Both packages install without any js files but show as complete

Not getting access token

The error I am getting when generating the export is An API access token is required to use Mapbox GL. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes, however I have specified the token in my Angular .ts file . Rest of the controls are working fine, only this export control is giving me error.

Not export images icons on map

I tried to print (export map as pdf) and my map has some images icons like this :
image

if you check this images, you will see a vector (polygon) feature + 2 image, one in SVG format and the other one in PNG format
when I printed it, it just shows the vector without the 2 images

Hope to get a solution for that

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.