Giter VIP home page Giter VIP logo

photoshop-google-maps-tile-cutter's Introduction

PS_Bramus.GoogleMapsTileCutter

Photoshop Google Maps Tile Cutter Built by Bramus! - http://www.bram.us/

About

PS_Bramus.GoogleMapsTileCutter is a Photoshop script that cuts image tiles from any image for direct use with Google Maps. Works with Photoshop CS2 and up.

Photoshop Google Maps Tile Cutter

Installation

  • Download and extract PS_Bramus.GoogleMapsTileCutter
  • Move PS_Bramus.GoogleMapsTileCutter.jsx to your Photoshop scripts directory
    • For Photoshop CS6 on Mac OS X this is /Applications/Adobe Photoshop CS6/Presets/Scripts
    • For Photoshop CS6 on Windows this is C:\Program Files\Adobe\Adobe Photoshop CS6\Presets\Scripts
  • Restart Photoshop if it was already running

How to use

Cutting tiles

An example of the script in action can be viewed at https://www.youtube.com/watch?v=ZC-4bNHfuPo

  • Open Photoshop and open the image you want to process.
  • Access the script from the scripts menu in Photoshop: File > Scripts > PS_Bramus.GoogleMapsTileCutter.
  • Set the export path and cutter settings, and press Make tiles to start the cutting process.
    • Optionally define the export structure (file based (z_x_y.jpg) or folder based (z/x/y.jpg)), tile size (256 by default), and export format (.jpg by default)
  • The script will start carving the tiles for as many zoom levels as possible.
    • During this phase it will look like Photoshop is going berzerk, this is normal, as it is.
    • Depending on the size of the image it might be a good idea to take that coffee break. Carving 21000 tiles takes about 20 minutes on a recent MacBook Pro.
  • When the script has finished carving, you will find the tiles in the folder you've selected before.

Implementing the tiles

The resulting tiles can be used directly in Google Maps by setting up a custom map type, using a google.maps.ImageMapType instance.

If you've checked the option, PS_Bramus.GoogleMapsTileCutter will create an HTML file with such an implementation. A fully working example is also included in the examples directory that came with the download of PS_Bramus.GoogleMapsTileCutter (the tiles are only included in the gh-pages branch)

A live example is available at http://bramus.github.io/photoshop-google-maps-tile-cutter/example/

Notes

  • The included example and Google Maps documentation referenced is for Google Maps Version 3.
  • PS_Bramus.GoogleMapsTileCutter will resize the canvas to being a square one, as this is easier to process and implement
    • A result is that extra (empty) tiles will be generated.
  • PS_Bramus.GoogleMapsTileCutter will create one extra empty tile (empty.jpg) which is used to prevent the image from showing up repeatedly on the X-axis when used within Google Maps.

Credits

PS_Bramus.GoogleMapsTileCutter is based upon the Automatic Tile Cutter by Will James, Curtis Wyatt, and Nate Bundy. The UI Additions were initially provided by Nick Springer.

Basically PS_Bramus.GoogleMapsTileCutter is an improved, cleaned up version of their work.

photoshop-google-maps-tile-cutter's People

Contributors

bramus avatar grawl avatar

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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

photoshop-google-maps-tile-cutter's Issues

Not working with PS CS2

Tried using this with PS CS2. Getting the following error:

Error 18: Variable or Value expected
Line 7
->

Any fix for that?

Why is that when I get out of boundaries it is searching for a tile which it not have?

like this: 3_8_7.jpg:1 GET http://www.sylvanreinieren.com/bb-tiles/bb/3_8_7.jpg 404 (Not Found) 3_8_4.jpg:1 GET http://www.sylvanreinieren.com/bb-tiles/bb/3_8_4.jpg 404 (Not Found) 3_8_6.jpg:1 GET http://www.sylvanreinieren.com/bb-tiles/bb/3_8_6.jpg 404 (Not Found) 3_8_5.jpg:1 GET http://www.sylvanreinieren.com/bb-tiles/bb/3_8_5.jpg 404 (Not Found)

Error in Photoshop CC (2015)

Hi Jacob,

Awesome script! I'm having problems getting it to work. When I try and run the script I get this error:
The command "Set" is not currently available.

I'm using Photoshop CC (2015). Any ideas?

Thanks so much!
Saskia

Suggest Webp

Submitting a suggestion to add .webp image format option

empty space on the sides

Even if i set the dimentions as a perfect multiple of the tile size, it will place undesired empty-color borders at the sides of the map, if i want them to wrap, this is a major problem.

Alignement issue

Hello, first of all, thanks for the script it's going to save me a lot of time.
That said I'm having an issue regarding alignement.
I align my image within a square canvas in PS, launch the script, and every time, something happen that make all the works I spent on alignement go to trash.
I don't get what or how this is happening.
It's like the script/Ps is trying to center my image in the canvas or something.

Does anyone understand what I mean ? How could I go about counteracting this issue.

The process I go use :

  • Get a screenshot of an existing "full maps"
    screen shot 2016-11-21 at 10 43 25

  • Align my map based on that "full map screenshot" in a square canvas in PS
    screen shot 2016-11-21 at 11 11 47

  • launch the script

  • at the end I end up with Ps in this state (map has been moved "somehow") :
    screen shot 2016-11-21 at 11 13 10

  • and the exemple looks like this in the browser (with repeatOnXAxis = true;):
    screen shot 2016-11-21 at 11 03 54

What I expect is the repeating map on x axis to be next to each other, not appart with a big space in between.

targetPath variable has a quote error

the targetPath string isn't being set corretly. Instead, the path includes an unexpected single quote after the folder name. For example, if a path of ...\Desktop\tilecutter\ is being set, files are being saved like ...\Desktop\tilecutter'6_3_2.png

overlay

Great work. Any thoughts of how to make tiles and use them as tiles on a specific location? I've been searching for a few days trying to find something that will take a photoshop document, create map tiles, and then have them organized to specific zoom levels and location (without all the math). Yours is the closest open source I've found.

Missing tiles in the tilecutter folder after running script.

I'm running Photoshop CS6 and using the tilecutter script to cut up a file that is approximately 5000 x 5000.

My script to display the image with the API seems to work perfectly, except I get image errors that some don't exist.

screen shot 2013-09-11 at 6 16 43 pm

I am not sure what the problem is, but I'm reporting it as an issue because I presume they should exist!

Thanks so much,
Jacob

Does not work with PS CC 2017

once I start the plugin here are the steps

make layer
unlock layer
flatten layer
make layer
unlock layer

then it just stops, and nothing shows up in the directory i provided

Is there a possible way to set zoom levels of the Tiles?

For example I have zoom levels 12 to 16 than I have maps with 12 till 16 with images in that how do I do that?

constructor(){ this.imageMapOptions = { getTileUrl: (coord: ImageMapTypeCoord, zoom: number) => { returnhttp://www.sylvanreinieren.com/tiles/${zoom}/${coord.x}/${coord.y}.png`
},
tileSize: { height: 256, width: 256 },
maxZoom: 16,
minZoom: 15,
radius: 1738000,
name: 'Beeksebergen'
};
}
mapTypeControlOptions: MapTypeControlOptions = {
mapTypeIds: ['Beeksebergen']
};`

Scrip on PSP Pro 2021

Hi,

I'm using PSP Pro 2021, and i've tried to open your script in psp without succes of course.
Is there a way to transpose your scrip from PS to PSP ??? is it hard work ?

How to increase zoom level?

I am using a 4097px image and I can use zoom level 5 max before things go blank. I would like to be able to use zoom level 6 or 7.
How can I make sure the script goes this far? I tried increasing the size of my image, but that didn't work.

Can anyone please explain to me what I have to do with my image to make sure I can zoom in further?

error in localhost: `http://localhost:3000/2_1_0.jpg 404 (Not Found)`

This shows up when I try to set the path, what is wrong if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) { return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg'; } else { return 'empty.jpg'; }

and than all the images are in the same folder as my .ts file

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.