Embed OpenStreetMap GDPR compliant in TYPO3

Install TYPO3 OpenStreetMap with ease using our comprehensive step-by-step guide. Enhance your website with interactive maps today!

Embed OpenStreetMap GDPR compliant in TYPO3

Among the tons of crucial things and features of websites, Maps are often disregarded. However, they are important to provide visual representation and location-based information.

The Map gives the layout of a place, helps to find nearby businesses or services, and enables efficient navigation. Furthermore, visualizing data associated with specific locations becomes effortless, helping users make informed decisions.

This article covers extensive knowledge about one such Map extension - TYPO3 OpenStreetMap Extension .





TYPO3 OpenStreetMap (OSM) Extension

Among the various mapping solutions available, TYPO3 OpenStreetMap (OSM) Extensions has emerged as a compelling alternative, revolutionizing how we perceive and utilize maps online.

TYPO3 OpenStreetMap Extension makes it possible for users to integrate the technology on their website as a Free or Premium version, making it easily accessible to everyone. (You may check out the Free Vs Pro Features ).

It stands out as a collaborative and open-source project that empowers its users with continuously updating maps, and the tireless efforts of passionate individuals worldwide.

Uses of OpenStreetMap for TYPO3

Here are some key uses of OpenStreetMap for TYPO3 to enhance various aspects of a website:

1. Displaying Maps

  • Display interactive maps with customized markers, overlays, and layers to visualize locations and navigate through the map around the world.
  • With the location pop-up, the marked location will give you info such as the locations, titles, links, and directions.

These are used on the Contact Page as well to display the location of your brand or business. It works best when using it on your smartphone.

2. Discover Coordinates, Geolocation and Routing

  • OpenStreetMap can help your website find a user's location based on their device or IP address. 
  • You can enter the address or place, and the extension will then use its geocoding functionality of OSM to fetch the corresponding coordinates.
  • It can also give directions from one place to another, like a GPS.

3. Custom Layers and Data Overlay

OpenStreetMap is entirely managed and updated by the community of people itself and so websites can overlay custom data on OpenStreetMap, such as displaying real-time traffic information, weather conditions, public transportation routes, or any other geospatial data relevant to the website's content.

4. Offline Capabilities

If you do not have an active internet connection on your system or mobile phone, you can still download the OSM map and use it offline. Offline maps can be beneficial for websites catering to outdoor activities or areas with poor network coverage.

5. Interactive Map Components

OSM can be used in different websites where you can zoom in/out to check out the different locations, interact with markers, and do a lot more once integrated and customized accordingly.

These are only a few of the many uses of OpenStreetMap for TYPO3. Now, it entirely depends on the type of website you are building and the purpose of your brand. It is beneficial for every type of business on the web.

Features of OpenStreetMap for TYPO3

You can completely change the look of the maps or add as many features as possible to make them suitable for visitors.

1. OpenStreetMap Style

TYPO3 OSM extension is a powerful tool and you can add as many customizations and styles to it. Some of them are:

  • Road maps
  • Satellite maps
  • Terrain maps
  • Hybrid maps

Once you have installed the extension and added it to your site, simply select the style from the options in front of you.

2. Display the Physical Address

  • With OSM, you can display the physical address of your office easily on your contact page.
  • If you have multiple office chains or headquarters around the world, you can simply add pins and markers on the map and descriptions to define the location.

3. Flexible Customizations

As mentioned earlier, OpenStreetMap has multiple customization options available that make it easier for anyone to set up the site based on your brand.

Some of the options you will find after installing the extension are:

  • Fullscreen Control
  • Zoom Control
  • Marker configurations
  • Multiple Language Options
  • And more

4. GDPR Compliant

Your website needs to be compliant with GDPR if you are collecting data from users. OSM ensures these regulations are met and are displayed once the user tries accessing the features through the Map.

You may check out these uses, features and even the below steps using the front-end demo as well as live backend functionalities.

Installation guide for OpenStreetMap for TYPO3

To install the Open StreetMap for TYPO3, you may download the free version or buy the premium extension to receive the ZIP file. 

  • Log in to your TYPO3 backend.
  • Navigate to the "Extension Manager" section.
  • In the Extension Manger Click on "Add Extension".

Now, we need to activate the TYPOScript after downloading the extension in your backend.

  • Navigate to the "Template" module
  • Choose the TYPO3 OpenStreetMap on the Page Tree
  • Click on the link to edit the templates and select Includes
  • Below the Include static section, choose [NITSAN] OpenStreetMap
  • Then, include the [NITSAN] OpenStreetMap Plugin in the last space

Once you are done making the above changes, do not forget the save the edits made to the templates.

Customizing the look of your maps

OpenStreetMap has multiple features and customization options you can add to your maps. Here are some of the steps you can follow to add libraries, locations, markers, and more.

1. Display Locations

The most basic feature that you might have often seen on other TYPO3 websites where you can see the location of that office or person. Here is how you can enable it using OpenStreetMap.

  • Go to List under the Web section
  • Create a Storage folder for Map Locations.
  • Now, edit the address on the page OpenStreet Map Locations
  • Under the General menu option, enter the name of your brand or office, choose the location, and enter the address.
  • Add the Longitude, Latitude, or it will be added automatically
  • Then, choose the right image for your marker

Further, under the Info content section, there are more data you need to add.

  • Add the address manually to display the Location title in the plugin.
  • You can check the box beside View on OpenStreetMap if needed.

If you have a hotel chain or multiple offices, you can repeat the steps above to add more locations.

2. General Settings

After installing the OpenStreetMap plugin, you can start by making the general setting changes such as:

  • Address- Choose the location you want to display on the map
  • Height- Select the size of the Map on the website

3. Map Settings

In the next section, we can make multiple changes to the map style and other functions. Here is what you can choose from:

  • Map Style: You can choose between the four styles, i.e., Map, Satellite, Hybrid, and Terrain.
  • Zoom Level: Choose the Zoom level starting from 1-18, where 1 is zoomed out and 18 is zoomed in.
  • Scroll Zoom: Enable this to scroll the mouse button for Zoom in/out
  • Draggable: Enable this to use drag the map
  • Doubleclick Zoom: Make a double click on a particular area to Zoom in/out on the Map.

4. Frontend Control Settings

Now, to give access to the users on the Frontend and have control of the Map, this is what you can choose to customize.

  • Zoom Control: Enable this to add a button for Zoom on Map
  • Zoom Control Position: Choose the perfect position for the button placement
  • Fullscreen Control: Enable to add a Full-Screen button on the webpage
  • Full-Screen Control Position: Choose the perfect position for the button placement
  • Scale Control: Enable this to get the scale bar on the bottom right position of the Map.

5. Marker Settings

If you are looking to customise the marker settings on the Map, you can get down on this menu options.

  • Show alphabet labels on markers: Enable this function to add alphabet labels on the marker such as A-Z.
  • Marker Opacity: How visible you want the marker to be. Choose between 0.1%-1%
  • Marker Cluster- Enable this to add the cluster to a number of markers.
  • Max Zoom Level: After enabling Cluster, choose the zoom level once anyone clicks on the Marker Cluster.
  • Marker Cluster icons: Choose the options between Default, People, Conversation, Heart, & Pin.

Apart from these, you can also make changes to the Search and GDPR settings to abide by the regulations.


Thus, TYPO3 OpenStreetMap Extension not only allows people to view the locations but do a lot more through it, such as using the geolocation feature, data gathering, and much more.

In this post, we have learned about the uses, features, and ways you can customize the maps from scratch.

Each option mentioned is crucial to make the maps look functioning based on what your brand needs. You can get rid of those boring maps that are only meant for locations and try the OpenStreetMap for your TYPO3 website.

Would you prefer a Ready-made template(s) or a Custom one for TYPO3?

  • 200+Developed custom TYPO3 extensions
  • 90+ Score on TYPO3 SEO, speed & accessibility
  • 70+ Published free & premium TYPO3 extensions
  • 13+Years of TYPO3 experience
  • 5+Bestseller TYPO3 extensions (T3AI, Slider Revolution etc.)
TYPO3 Extension Gig

Would you prefer a Ready-made template(s) or a Custom one for TYPO3?

  • FreeTYPO3 security audit & report
  • 35+Team of TYPO3 developers
  • 13+ Published free & premium TYPO3 templates
  • 13+Years of TYPO3 experience
  • 3Package plans are available for the TYPO3 security
TYPO3 Security Gig
TYPO3 Security Gig

Post a Comment

Captcha Code Can't read the image? Click here to refresh
  • user
    Mathias 2023-09-05 at 2:25 pm
    I've been struggling with TYPO3 lately, and this guide helped me solve one of my major issues.
  • user
    Mathias 2023-09-05 at 2:24 pm
    I've been struggling with TYPO3 lately, and this guide helped me solve one of my major issues.
  • user
    Peter Moeller 2023-09-05 at 2:15 pm
    TYPO3 is my go-to CMS, and this tutorial is gold! OpenStreetMap integration can really enhance the user experience, and the GDPR compliance aspect is a huge plus. Kudos Author !
  • user
    Peter Moeller 2023-09-05 at 2:15 pm
    TYPO3 is my go-to CMS, and this tutorial is gold! OpenStreetMap integration can really enhance the user experience, and the GDPR compliance aspect is a huge plus. Kudos Author !