
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
leaflet-simple-map-screenshoter
Advanced tools
Leaflet plugin plugin which take screenshot of map
Leaflet promise based plugin which take screenshot of map. Used dom-to-image.
npm install leaflet-simple-map-screenshoter --save
Open (see in /examples)
Add save screenshot button to leaflet control panel
import * as L from 'leaflet'
// import script after leaflet
import {SimpleMapScreenshoter} from 'leaflet-simple-map-screenshoter'
new SimpleMapScreenshoter().addTo(this.map)
From cdn
<script src="https://unpkg.com/leaflet"></script>
<script src="https://unpkg.com/leaflet-simple-map-screenshoter"></script>
<script>
L.simpleMapScreenshoter().addTo(map)
</script>
For custom usage
import 'leaflet'
// import script after leaflet
import 'leaflet-simple-map-screenshoter'
let pluginOptions = {
cropImageByInnerWH: true, // crop blank opacity from image borders
hidden: false, // hide screen icon
preventDownload: false, // prevent download on button click
domtoimageOptions: {}, // see options for dom-to-image
position: 'topleft', // position of take screen icon
screenName: 'screen', // string or function
iconUrl: ICON_SVG_BASE64, // screen btn icon base64 or url
hideElementsWithSelectors: ['.leaflet-control-container'], // by default hide map controls All els must be child of _map._container
mimeType: 'image/png', // used if format == image,
caption: null, // string or function, added caption to bottom of screen
captionFontSize: 15,
captionFont: 'Arial',
captionColor: 'black',
captionBgColor: 'white',
captionOffset: 5,
// callback for manually edit map if have warn: "May be map size very big on that zoom level, we have error"
// and screenshot not created
onPixelDataFail: async function({ node, plugin, error, mapPane, domtoimageOptions }) {
// Solutions:
// decrease size of map
// or decrease zoom level
// or remove elements with big distanses
// and after that return image in Promise - plugin._getPixelDataOfNormalMap
return plugin._getPixelDataOfNormalMap(domtoimageOptions)
}
}
this.simpleMapScreenshoter = L.simpleMapScreenshoter(pluginOptions).addTo(this.map)
let format = 'blob' // 'image' - return base64, 'canvas' - return canvas
let overridedPluginOptions = {
mimeType: 'image/jpeg'
}
this.simpleMapScreenshoter.takeScreen(format, overridedPluginOptions).then(blob => {
alert('done')
// FileSaver.saveAs(blob, 'screen.png')
}).catch(e => {
console.error(e)
})
simpleMapScreenshoter.click - on leaflet control panel take screen btn click
simpleMapScreenshoter.takeScreen - start build screenshot
simpleMapScreenshoter.done - screenshot build ended
simpleMapScreenshoter.error - on error, return Error instance
FAQs
Leaflet plugin plugin which take screenshot of map
The npm package leaflet-simple-map-screenshoter receives a total of 2,353 weekly downloads. As such, leaflet-simple-map-screenshoter popularity was classified as popular.
We found that leaflet-simple-map-screenshoter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.