#Google maps maptiler how to#
#Google maps maptiler full#
#Google maps maptiler software#
#Google maps maptiler code#

Paste the screenshot into your Photoshop file.

Go to the Tiles à la Google Maps website and take a screenshot of a segment of your Google map, at your required maximum zoom level.

Use your graphics application to open the template map image you've saved.

To do this, you can save a template map using maptiler's mashup and then enlarge it in Photoshop to your desired maximum zoom level. ( is useful if you aren't sure what the highest zoom level you need is). Your aim is to create a template in Photoshop (or equivalent graphics application) which is exactly the same size and shape as the Google map you are going to overlay it on top of, when it's at its highest zoom level. Template image into which you create your map. To get started, the first step is to make a template onto which you can create your own overlay. The source files for every step are available in the download package.

#Google maps maptiler software#

This tutorial explains each step, including the software tools that are (fortunately!) available to automate things and make life a lot easier. It's a repetitive process, in the sense that the image is sliced up once to create a set of tiles for the first zoom level, and then it's sliced up again into smaller segments to create the second set of tiles for the next zoom level, and so on.

Your map overlay starts its life as a really big image (a jpeg or png), which you then ‘slice up' into tiles.The zoom level is a number, from zero upwards, which changes as you zoom in and out of the map (see image above). You need a set of image tiles for each zoom level.In other words, the map is split into an invisible grid and each grid square is a separate image file of 256x256 pixels. A Google map is made using many image ‘tiles’ (see image above).Screenshot taken from the excellent 'Tiles à la Google Maps' website.Ī few things you need to know before you start: Google maps are made up of many separate tiles. The weather map I use is entirely fictitious, but the techniques covered will give you the freedom to create all sorts of interesting things! You'll be able to build historic maps, custom drawn maps, close ups of specific areas such as a university campus - the list is endless! In this tutorial we'll add a 'weather predictions' overlay to the map we built previously. This tutorial takes things a step further, explaining how you can create your own custom map and overlay it onto a Google map (such as my 1896 map of Portsmouth).

#Google maps maptiler how to#

If you want to learn how to initialize a map and load the style see the Learn the basics - How to use OpenLayers tutorial.In our previous tutorial we looked at how you can add markers and customize the colors and menus of a Google map using the service's API. If you need to develop a web application that interacts with most of the OGC standards, this is your tool, whether connecting to a WFS or reprojecting a raster. It provides an API for building rich web-based geographic applications. It is a high-performance, feature-packed library for all your mapping needs.

#Google maps maptiler full#

OpenLayers is a full featured web mapping library that allows you to display maps from various sources and formats. You can start the map in a different place by modifying the starting position and starting zoom, and you can change the look of the map to any of our styles, or yours, by updating the source URL. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

#Google maps maptiler code#

Simply use the code below the map and replace the text YOUR_MAPTILER_API_KEY_HERE with your MapTiler API KEY.Ĭopy the following code, paste it into your favorite text editor, and save it as a. This is the easiest and fastest way to use your MapTiler maps in OpenLayers.