#Imagemagic cropthubnmail how to#
#Imagemagic cropthubnmail code#

Also note the addition of the shapefile we added to show political boundaries (as white line). Note that with this equirectangular projection, Alaska looks more “flattened” than with a traditional web-Mercator projection. This output is sent back to Javascript (see above), and ultimately rendered into the browser: Finally, this command is executed by placing it between back-ticks (yeah, old-school), and stored into a Perl scalar variable $stream.Īfterwards, the Perl CGI output begins by writing a GIF image header, and then $stream (the cropped GIF image byte stream) is printed to STDOUT. Note we use string-concatenation to create our command, setting the background white color to transparent (for ideal map display), and inputting the upper-left pixel corner coordinates, as well as x and y cropping dimensions (in pixels). Overall, this Perl script writes a subsetted GIF image to STDOUT, after cropping/subsetting (“cutting out”) this sub-image from the original GIF (see above) via ImageMagick’s convert command-line tool (for me, this tool is installed as /usr/local/bin/convert).

#Imagemagic cropthubnmail code#

This short Perl code is well-commented, so I hope you are able to follow along. My $cmd = '/usr/local/bin/convert '.$imageFilename.' -crop '. # ImageMagick's convert command-line tool # create CGI object in which to write HTML # define upper-left corner pixel location a UNIX-like path) or a traditional URL This method also takes in the rectangular bounds of our image to overlay onto the map (in this case, -180 to +180 degrees longitude, -90 to 90 degrees latitude). In particular, this string path can be a local directory path (i.e. Note this method takes in a URL to a Perl script.

Meanwhile, Leaflet’s function imageOverlay() allows us to render an image onto the zoomable and interactive Leaflet map. Notice the Javascript code above uses a explicitly defined equirectangular projection for display. Var imageOverlay = L.imageOverlay(imageURL,bounds).addTo(map) var imageURL = ' // set bounds of subsetted gif. * and the subsetted (cropped) gif written to STDOUT * this will be cropped from a GIF image by a Perl script * add a shaded variable Image overlay to map. Var map = new L.Map('equirectangularMap', ) * create Leaflet map object with equirectangular projection */ * create object defining Equirectangular projection */ Note the use of an external Javascript source file, mapcode.js. In this HTML, we include several Javascript source files, including extensions, including the Leaflet shapefile library/extension (, shp.js), the Leaflet projection library ( proj4.js, proj4leaflet.js for using other projections besides the Mercator projection), and finally, the original Leaflet library itself and its corresponding CSS ( leaflet.js, leaflet.css).

Leaflet Map - Equirectangular Projection ImageMagick’s convert command-line tool will need to be installed too. This is where the Perl programming language, with its CGI (Common Gateway Interface) module comes in handy (PHP would easily work too). Hence, we would want to omit the colorbar, axes labels, title, and so on, and get only the “map” portion of the image (color-shaded variable Temperature). In other words, when a web-page loads our Leaflet map, this GIF would be cropped “on the fly,” and the result of that GIF image cropping process would display onto the dynamic Leaflet map. Let’s say we wanted to dynamically (“on the fly”) crop this image to get only the “plotting” portion (shaded variable), and then display this cropped sub-image as a background for a Leaflet map (i.e. One is the NUCAPS granule composite imagery products, produced by NOAA’s Office of Satellite Product and Operations (OSPO). The National Oceanic and Atmospheric Administration (NOAA) produces many different kinds of output products. The challenge is dynamically creating a image that does not yet even exist, and then rendering this image onto the Leaflet map when the page loads. Temperature in degrees Kelvin at some particular pressure level) to serve as a background for the map.

Then, we will dynamically add a shaded variable (i.e.

#Imagemagic cropthubnmail how to#

In today’s example, we will look at how to set up a Leaflet map with a equirectangular projection. But with Leaflet’s numerous extensions (plugins) comes the ability to directly serve shapefiles to your map, as well as use other projections.

Traditionally, Leaflet was only capable of creating web-maps with a Mercator projection. Leaflet is a powerful Javascript library for making interactive and zoomable maps.