CMS

here Maps with Drupal 8

Introduction

Customizing maps according to various kinds of data is not so user-friendly even though google provides customizations for maps but what can be done is limited as in only two base maps and only one kind of marker whereas Here Maps provides more personalization and user-friendly experience.

HERE is a Maps provider who has developed various tools and products to work with maps. One of the famous products is Here WeGo app which a competitor to Google maps for navigation. Here maps have been used by Nokia and come as default maps in Nokia mobiles.

HERE XYZ is another tool that can be used to implement various features of Maps. HERE XYZ has a REST API that can be used to develop Maps. HERE XYZ studio is an interface that can be used to customize and manage maps in a simple form. It provides multiple marker icon options, various base map options, and user-friendly customization.

HERE Maps has 3 major tools for common platforms

  1. Javascript – Provides location services and interactive maps.
  2. HERE REST APIs – Provides Advanced location services with REST services.
  3. Native Android and IOS – Provides online/offline features for native apps.

 

Integrating HERE Maps XYZ with Drupal 8

Step 1 – Install and Enable Geolocation HERE Maps Module.

Step 2 – Create a HERE account and get APP ID and APP Code credentials.

Step 3 – Configure HERE Maps settings in Drupal 8 by adding APP ID and APP Code.

Step 4 – Select Maps provider as HERE maps when creating a view (we don’t have integration with blocks out of the box.)

JavaScript credentials give us the default map features, for additional features of XYZ use REST & XYZ HUB API/CLI APP credentials.

The below image shows the credentials to connect to HERE Maps:

XYZ Studio

XYZ Studio provides a simple interface to personalize the maps. It provides various customization for the map like multiple base maps, marker icons, routing customizations, etc.

Existing maps of Geospatial data can be uploaded in the geoJSON format and non- geospatial data can be uploaded in.CSV and.JSON format.

Getting Started with XYZ Studio

  • Create an account with XYZ Studio.
  • Click on Create a new project.
  • Provide project name, description and select the base map from provided options. This will create a plain map without any marker and data.

performing the above steps creates a simple project.

Features of XYZ Studio

  • Searching for a location on the map and adding markers manually – Enter location and click on search.
  • Drawing a line to mark routes and providing additional information – click on the edit button on the top left and select line from the dropdown.
  • Add polygons on the map – click on the edit button on the top left and select polygon from the dropdown.
  • Add datasets to the map by uploading a file and also edit them this will automatically reflect on the map with default settings.
  • Click the markers to customize the look and feel of the marks.
  • Click a marker and a card is displayed containing the required data which we have uploaded in the file. we can manage the fields in the card moving the fields in and out of the visible area.
  • Add multiple layers to display various kinds of data by clicking on the “layer”.
  • Publish a map quickly.
  • Spaces-Spaces is a secure geospatial repository for your data.

  • Tags-Fetch data smoothly using tags.

The below image shows the simple use of layers and various markers:

The below image shows routes to marked places:

The below image shows  card displayed on click of marker:

Publishing the Map

  • Click on publish setting.
  • URL link and embed link will be generated which can be used to integrate the map.
  • Click Done to publish the map.

The below screenshot shows this URL and embed to integrate the map:

 

We can integrate XYZ Hub API and HERE CLI for achieving Advanced features and customizations.

CONCLUSION

In this way, Integration of HERE Maps JS and REST can be simply achieved by setting APP ID and APP CODE in the configurations which unlocks advanced features of HERE MAPS and Custom HERE MAPS can be integrated by creating a project in XYZ studio and using the URL and EMBED link provided while publishing the project.

HERE XYZ provides a simple solution while dealing with custom geospatial maps representing different kinds of data like the weather of a region,  earthquake magnitudes , etc.

Reference links-

https://www.here.xyz/   ( A complete guide to use HERE XYZ.)

About The Author