Map overlays with transparency

Something I used in one of my earlier exercises was layers on maps,  on this post How to use Maps to find Data on Assets. It allows for using an online map such as Google Maps and putting information on that map with specific overlays. Follow the link for example (Note, if you click on Icon 32 and click on the Level 1 Plan this will zoom into another overlay of an individual building).

I am quite proud of the development of that project as it addresses a few issues I have with data and accessibility:

1/ Having a common point from where to access your information. A link point for all your information.

A map is a great tool for this, and an online map even better as you can reference it from anywhere. Particularly useful if you go to site and find you need some extra information. You can interrogate the map to see if there is any data that you can access like O & M manual or floor plans showing services or incoming valves.

2/ How to manage outdated information on the base map?

Say a building has been demolished but ids still shown on the base map. A little frustrating, especially if you have built 2 new buildings on that site and cannot reference them from the original map. With an overlay you can use a cad or BIM file to show the latest plans on the site with extra information using different colours, line types and symbols for easy reference. Having a transparency slider helps you move between the base map and the new information so you have both choices, new and old (or existing) information.

3/ Show external services such as cables and underground pipe routes for a large site and updating the information when there have been changes such as new buildings added to the site.

Creating bespoke layers that show information and codes that are relevant to your organisation allow for you to control the information being displayed. Also , the slider allows you to view where that service is located in reference to real objects and features on the site for quickly defining where to look for the item.


MapTiler link. I played with this programme about 2 years ago and was so impressed that I actually purchased a license for it.

The free offering does not allow for custom zoom level on the maps but it gets the point across, and the Start version is a bit limited too but you can customise the zoom levels. Pricing is here also showing different features.

I have been reviewing it and see that they now have a free cloud version to try too. Also there seem to be a lot more options for hosting the maps on Amazon AWS S3 . I think you can get some S3 (AWS storage) for free, not sure if its in perpetuity or just an annual use.

Also there are a few more tutorial videos on YouTube. This first one is a basic overlay process using the programme:

Speeding up Large Image files on a browser with MapTiler

Another feature that I was not aware of until I saw the video below was displaying large images.

This subject is of relevance to me at the moment as I have been grappling with my portfolio site which has been throwing up a few challenges of late.

I actually tried an example here based on the video but since my file size is 4.57Mb (and not 97Mb as in the video above).

This is a link to the same image on another site that is using a CDN (Content Delivery Network , cloudflare). This one’s colour is a bit more saturated but it does not zoom in or out as far as the one above.

I dont expect the same performance. But slicing the tiles down to smaller segments definitely makes for a much faster refresh rate in a browser from a remote server. For Zoom levels of 1 to 6 this creates a directory with over 13,000 files, all small but a lot of tiles. I’m not sure that this would work for a portfolio as the colour saturation has reduced a bit. But for massive images I think it would be very good. It would take a while to generate the tiles and to transfer them to the server for a 95MB file. I think I’d have an instance of the programme running on the server and transfer the licensee across so generate the tiles on the server.

This is a bit like what I do with the Drawing files , displaying a fast image and then allowing a link to the PDF files for download:

  1. Go HERE for a demonstration
  2. Go HERE for post

One thing I noted, the first image I used was in portrait layout and MapTiler rotated it to landscape , so that was a bit odd.

Exercise with MapTiler Overlay

II decided to revisit the process of using a cad drawing to make an overlay, based on the first video above.  I am using free DraftSight programme with some of my old CAD drawings.

The site is in East Timor. I was part of the project to relocate the UN offices off the parliament site. I was looking for a reasonably scaled site (too small and it doesn’t look that interesting.

I simplified the drawing by making the colours all black and no fill (this is a quick exercise on image overlay, not pretty pretty).

1/ turn off image layer

2/ Print (setting .ctb file to greyscale.ctb- this controls line colours/types & weights for printing in a .dwg cad file)

3/ Print to PDF (then use Snagit to take a screenshot)

4/ Crop image to area that you want (ie no title block)

So we now have the image.

Then following on from the steps in the first video above using MapTiler set the points referencing the map and the image so they align & then create the folder where the files will be exported to. You can get the tileserver-php programme here.

I did the exercise twice, the first time , with Dili, I only had zoom levels from 16 to 19, with Dili2 I had zoom levels from 1 to 21, so Dili1 zooms to the whole globe. The nice thing with this is the overlay is the centre of the map so hitting the “+” zooms in to the overlay straight away without having to pan.

With both of these maps there is the transparency slider in the top right corner of the image, not that clear as the background gray is the same colour as the slider bar.

The Google Maps seem not to be working. It must be something to do with my API key (in MapTiler settings you can put in your API key so its written into the HTML file which is quite handy. (I may have to do some checking on that key to see why its being temperamental, another time/post though)).

From the tileserver-php interface you can then download whichever map you want by getting the html file for it and embedding it into your site. See below for Dili example embedded, the leaflet seems to be the only option with transparency slider from the options.

The transfer from CAD to Map is quite nice. All you need to do is have a site CAD drawing and update it with changes (Xref new buildings/services into it?) and then create another image.

Unfortunately, you cannot just load the updated image, you have to re-generate all the tiles for the update and transfer them to the server. Not really an onerous task but one that you’d need to document for a smooth workflow. For updating building links to data in the database for the example above, that can be done on a spreadsheet and just update tables in the database from spreadsheet.  So some simple cad and spreadsheet skills should suffice to maintain the maps and keep them current.

End comments

The tools and support have improved since the last time I used it. All welcome changes. The large image tiler and the Cloud option too are interesting.

After using the tool a while back I wondered if there was a way of not only showing the ground floor of a building on a map but also floors above, if they were required. In fact, its just another overlay that would be called. I haven’t played with a couple of different building overlays on the same map, at the same time. I think these are items for the pro version.

It is a nice tool and I’d like some further opportunities to use it on a project or two. Then there may be an opportunity to use the pro version or cloud.

I had a quick play with having 2 images on adjacent buildings but the tile numbers seem to overlap at specific zoom levels (I’m not sure if this is because I did them one after the other) so I’m not sure if it will work to have multiple overlays on the same map at the same time. Maybe a little more investigation, something like Knime could find conflicts and renumber them.

Add a Comment