Embed OpenStreetMap GDPR compliant in TYPO3

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 ).

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.

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.

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.

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

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.

5. Marker Settings

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