Interactive maps

The interactive versions of our city, regional and country maps look just as good as our high-resolution print formats. We offer the perfect format for every application: Print-ready raster data, editable PDF files and embed codes, for the easy integration of maps into your website. That allows you to present uniform maps in a variety of media.

Embed codes are, in particular, suited to smaller projects and simple tasks, which don’t justify the work involved in using the API The API is suitable for a number of highly complex applications. Please contact us for more details..

Embedding

As soon as you have carried out a paid download, you can use our embedding function to add an interactive version of the map to your website. The respective embed code is available from your customer account under “My Maps”. The map can be zoomed to different levels and shows all the objects you have added.

Simple example of an embedded map

Generate an embed code

Add maps to your website with a few clicks of your mouse. Our step-by-step instructions show how.

embed interactive city maps


First use the drawing tools to prepare the map as required and carry out a paid download. Then use the Embed option under "My Maps" to generate the JavaScript embed code. Add the codes to your website’s HTML in the appropriate location, and set the optional image width and height parameters as required.

Amend the embed code

You can amend the JavaScript code to set a number of options. The original code for the example shown above is as follows:

<div id="e6k8hv4n"></div>
<script language="JavaScript" type="text/javascript">
function loadMapz() {
var myMapz = document.createElement("iframe");
myMapz.setAttribute("src", "http://www.mapz.com/embedded/map/e6k8hv4n?lon=6.955443432150475&lat=50.91923397843401518&zoom=16");
myMapz.frameBorder = "0";
myMapz.style.width = "650px";
myMapz.style.height = "500px";
var element = document.getElementById('e6k8hv4n')
element.appendChild(myMapz); }
loadMapz()
</script>

The parameters myMapz.style.width and myMapz.style.height determine the size of the embedded map. You can use myMapz.frameBorder to give the map a border. zoom sets the zoom level of the map and lon/lat is used to enter the geographic coordinates of the map center.

Include data using simple text files

The mapz function Draw → Upload elements allows you to include and interactively display external data sets in a map image. If you have the geographical coordinates of locations, line elements or areas saved in a standard format – such as those generated by GIS systems, or from a publicly available source – they can be imported as an adapted CSV text file in just a few minutes.

And mapz.com can save any elements you add to the map using the drawing tool, along with their geographical coordinates, as a CSV text file, which can be opened and edited using a text editor.

Among other things, that function can be very useful if you want to mark a large number of locations for which you already have the geographical coordinates.

Example map of Berlin. Use your mouse to explore the sights.

The geographical coordinates of the Berlin sights shown on this map were saved in an Excel file, which is the easiest way to rapidly present visual information on a map. Like all spreadsheet programs, Excel can open files in CSV format. The required locations can be copied and pasted into a mapz CSV file and uploaded to our server, and you are done!

The CSV file for the Berlin example is available here. (≈ 4 KB) → Download

Step-by-step instructions:

You can edit the data using a spreadsheet program like Microsoft Excel or the free program LibreOffice.

Let’s assume that you have already added a number of locations to the map and that you want to add further locations, for which you know the geographical coordinates.

1. Save the elements you have added to your hard drive as text files via Draw → Download elements → as CSV.

2. Open the downloaded text file with the extension .csv using one of the spreadsheet programs named above. Choose the separation option separate with semicolon. If necessary, deactivate any other separators.

Do not change the pre-set Unicode (UTF-8) character encoding. In the import dialog, always (!) set all columns to text, to prevent the software from amending the geographical coordinates using inappropriate number formatting.

When the file is opened, you will see a table with seven columns labelled A to G. All lines that begin with a hash symbol (#) are read as comments and are ignored by our server during later processing.

3. Add new entries to the list, or remove unneeded items, as required. Then save the file as a semicolon separated CSV file and upload it to mapz.com via Draw → Upload elements. Voila!

The columns contain the following information:

Column A defines whether the item is a point, line, area (geom), or label, or sets the section shown when the map is loaded (view).

Column B contains the optional description text that is shown when the mouse is over the map object. This column can be left empty.

If column A = point, then column C contains the internal name of the marker used for the location. Where required, you can change this value to display a different symbol. For an overview of all the location markers currently available on mapz.com see our pictogram library.

The replace=EF8214,EF8214 parameter allows you to define the color of the marker. Simply replace the second color value with the required color code.

If column A = geom, then column C contains a geometric description of the lines or polygons in GeoJSON format. Where required, Google KML files can be converted to GeoJSON format using one of the numerous free online conversion tools.

If column A = point, then column D contains an optional numerical value for the marker, which sets the proportional size of the marker compared to other markers using a common logarithm. This column can be left empty.

If column A = point, then column E contains an optional scaling factor for the magnification or reduction of all location marker symbols used on the map. This column can also be left empty.

If column A = point, then column F contains its longitude expressed as a decimal number, for example 6.83301948489439. mapz.com accepts both commas and points as the decimal mark.

If column A = point, then column G contains the latitude expressed as a decimal number, for example 50.591037739591606

Troubleshooting

If there is a problem uploading the amended CSV file, please check whether all the longitude and latitude values have been entered in the correct format, as shown above. In many cases the Upload elements function will provide the line number of the incorrect entry.

It is essential that the CSV file is saved as semicolon separated. To save a semicolon separated file in Libre Office, select Filter settings when saving the file and set the separator field to semicolon.

Include GeoJSON data

Ebola in West Africa, Dezember 2014.

mapz.com supports the import of GeoJSON files in EPSG:4326. The GeoJSON format is an established standard for the transfer of gemoetric data, such as national borders, the outlines of buildings and routes, to web applications. Most formats can be converted to GeoJSON format using free online tools. And GIS systems, like the free program QGIS, include an export function that is capable of saving shape and other data in GeoJSON format.

mapz.com’s integrated search function offers an even easier way to automatically add the geometric data for numerous objects to a map, and can export (and, of course, import) that data in GeoJSON format. For details, see our instruction manual.  

For this map example we extracted the national borders of the african countries concerned from a public available Planet Earth file and converted them with QGIS to GeoJSON.

Then we uploaded the geometric data to the map using Draw → Upload elements, and defined the color values and descriptions shown when the mouse is over the elements.

mapz GeoJSON file for the example map of West Africa. (≈ 800 KB) → Download
mapz CSV file for the example map of West Africa. (≈ 330 KB) → Download

Data protection notice

Statistical data regarding map views is saved on our servers in Germany, which are accessed using encrypted connections. We follow strict EU data protection regulations and avoid contact with the big data industry and other commercial data collection enterprises.