Map integrations

Define a mapview by center point and zoom level

Learn how you can embed a map by providing just one lat/lon coordinate and the desired zoom level.

Define a mapview by a bounding box

Center a map on a region rather than a point. The system will determine the appropriate zoom level based on the available frame space.

Choose a map design

mapz.com offers different design lines and contents. Change the map type by simply adjusting the map retrieval URL.

Control the map resolution

mapz.com delivers maps not only in normal screen resolution, but also in HD Retina resolution.

Integrate a map-selector

Specify which map designs the user can select.

Integrate a map- and feature-selector

Additionally levels of information can be integrated above the maps. You just need to pass through a GeoJSON file to the api.

Elements

Dynamic Attributions

Static copyright notices can be long, if more than one author has to be named. The dynamic copyright notice displays after a single click.

Static copyright notice

Configure the text and the formatting for the static copyright notice.

Edit zoombuttons

Control the color, transparency, hover, alternative text, and position of the zoom buttons.

Restrict zoom

Set the zoom levels that the user is allowed to use.

Marker and text overlays

Text and picture overlays

Embed text and pictures in the maps.

Mark a location with a symbol

You can utilize symbols within our extensive mapz library or you can use your own symbols. The size of the symbols can be controlled via the "scale" JavaScript parameter.

Affix a callout box with text and pictures to a symbol

Display text and an optional picture beside the marker. The position of the Box can be controlled via the "offset" Javascript parameter.

Make an interactive callout box

The popup displays when a symbol is clicked.

Group location symbols together

If multiple locations have to be displayed on a single map and these locations would be superimposed over one another, then these locations will be displayed in a summarized format. Zooming into this location will display more information about each individual location.

Group with zoomfunction

The user can zoom-in on any cluster by simply clicking on it. This action will display all locations and if need be all subclusters within the selected cluster.

Group location symbols with a callout

Complete your clusters with a Callout box containing information about the locations.

Additional data integration

mapz Portfolio metadata requests

Our optional additional module, mapz Portfolio, is a cartographic editing system that allows the recording, management and visualization of assets of any type on maps of outstanding quality. All the data recorded in mapz Portfolio can be accessed via the mapz API and integrated in interactive maps.

GeoJSON: Point, line and area integration

Embed points and shapes by loading a GeoJSON file. The styling will be adopted from the GeoJSON file; however, you can also manually adjust the styles. GeoJSON elements without a user-defined style will be displayed in the standard mapz.com format.

Direct GeoJSON integration

You can integrate smaller shapes into your JavaScript code without loading an external GeoJSON file.

Interactive functions

Interact with shapes with mouse over

Map mouse-over effects to areas or line elements. Such effects include altering the color and displaying optional text.

Interact with shapes by clicking on them

Add a Callout Box to a geometry or a line element. Clicking on the element will display more information about it.

Draw a route after clicking on a symbol

Draw the objects or the route that open by clicking on an object.

Geolocate and auto-geolocate

When the website loads, it will automatically retrieve the user's location information and center the map on them; however, you can also allow the users to manually perform this task by clicking on the geolocate button.

Geotracking

Display the current user position and mark the route that the user has travelled.

Geotracking Demo

A geotracking simulation from a pedestrian's perspective.

Search functions

Search within your own data

Integrate a search function, which can search through your own JSON formatted, geocoded data.

Place a search bar anywhere within your website.

Embed your own search function into any portion of your own website.