MapLibre

By using the HERE Vector Tile API in conjunction with MapLibre, you can create a fully functional map with interactive features like zooming, panning, and markers. The MapLibre library handles the map rendering and user interactions, while the HERE Vector Tile API provides the underlying map data in the form of vector tiles, ensuring that you get accurate and up-to-date geographic information for your map to display.

Before you begin

  • Obtain an API Key: If you do not have one already, sign up for a HERE platform account and generate an API key. For more information, see Get started.
  • Open a text editor or Integrated Development Environment (IDE) to write HTML and JavaScript code.

Build a basic HTML file

Create a basic HTML page as a container for the JavaScript code rendering the map.

  1. In the text editor or IDE of your choice, create a new HTML file.

  2. In the HTML file, set up the basic HTML structure, as shown in the following example:

     <!DOCTYPE html>
 <html>
 <head>
   <title>HERE Vector Tile API with MapLibre</title>
 <!-- Scripts and styles are included here -->
 </head>
 <body>
 <!-- Map content is included here -->
 </body>
 </html>

  3. In the <head> section, after the closing </title> tag, include MapLibre scripts and styles, as shown in the following example:

     <script src="https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.css" />

    For more information about the MapLibre library, see MapLibre documentation.

  4. In the same <head> section, add custom CSS styles to adjust the appearance of the map and the heading:

     <style>
   body {
     margin: 0;
     padding: 0;
   }

   #map {
     width: 100%;
     height: 400px;
   }

   h1 {
     font-family: 'FiraGO', sans-serif;
     text-align: center;
     margin-top: 20px;
     font-size: 24px;
   }
 </style>

  5. In the <body> section of your HTML file, create a <div> element to hold the map and an <h1> element for the heading:

     <body>
   <h1>HERE Vector Tile API with MapLibre</h1>
   <div id="map"></div>
 </body>

Display a map with MapLibre by using HERE vector data

In the HTML container that you created, add JavaScript code that combines the MapLibre library with the HERE Vector Tile API to display a map.

  1. Below the closing </body> tag, add a <script> element.

  2. In the <script> element, add the JavaScript code to initialize the map:

     const map = new maplibregl.Map({
     container: 'map',
     style: 'https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey={YOUR_API_KEY}',
     center: [-73.979027, 40.766869],
     zoom: 15
 });

    In this example:

    • const map - Creates a new map object using the maplibregl.Map constructor.
    • container: 'map' - Specifies the HTML element to display the map. In this case, the map is placed inside an element with the id attribute set to map.
    • style - Defines the visual style and appearance of the map. In this example, the HERE Vector Tile API loads the map style. The URL provided points to the default berlin style and includes the apikey to authenticate the request. Replace the placeholder value in the URL with your actual HERE Vector Tile API key.
    • center - Sets the initial geographical coordinates to center the map when it first loads. In this example, the center is set to the latitude and longitude pair representing a location in New York City.
    • zoom - Sets the initial zoom level of the map.

  3. Optional: Enhance the appearance and user experience of your map by displaying additional features. The following example adds a marker at the map center coordinates:

     const marker = new maplibregl.Marker()
     .setLngLat([-73.979027, 40.766869])
     .addTo(map);

    In this example:

    • const marker - Creates a new marker object using the maplibregl.Marker() constructor.
    • .setLngLat - sets the geographical coordinates (longitude and latitude) for the marker's position on the map.
    • .addTo(map) - Adds the marker to the previously initialized map object. This action places the marker on the map at the specified coordinates.

  4. Save the file and open it in a web browser.

Result: The browser window displays a map with the specified coordinates, zoom level, and a marker, as shown in the following example:

A map rendered with HERE vector data by using MapLibre
Figure 1. A map rendered with HERE vector data by using MapLibre

Next steps

For more information on other map rendering use cases involving data provided by the HERE Vector Tile API, see Examples.

results matching ""

    No results matching ""