Interactive maps for websites

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.

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.

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.

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