Rendering HERE Map using Ruby on Rails

Introduction

Web application development has evolved over the course of time. The major reason is the emergence of new frameworks in different languages. It gives developers the freedom of creating websites without any hassle. One such open-source server-side web application framework is Ruby on Rails (or Rails) that is written in the Ruby programming language.

Ruby is an interpreted scripting language known for quick and easy object-oriented programming.

In this blog, we are going to create a web application that will show a HERE map on a browser. Let us get started!

Prerequisite

Your machine should have Ruby language and Ruby on Rails framework on it for implementing web applications. And if you haven't done so yet, you will need to sign up for a Freemium account on developer.here.com. Once you signed up, you can generate your free API key and get 250.000 free transactions every month.

Before moving to the coding part, make sure you have Ruby and rails on your machine. Run following commands on command prompt or terminal:

ruby -v
rails -v

If you are getting version numbers as a response for both the commands, then we are good to move forward, else you need to install them properly.

versions

Creating a new app

The first thing required is to create an application, to generate it, run this line in your terminal or command prompt:

rails new map_app

The command will successfully generate a new application, map_app and if you investigate, you will find a lot of files and folders inside it. Navigate to the new directory by running the command:

cd map_app

We can run our application, by entering:

rails s

This command starts our application, you can view it by opening a browser and entering http://localhost:3000. You should see a welcome page.

signature page

Editing welcome page

When we go to http://localhost:3000 we see the Rails welcome page. We are going to change this default page to our own page. To do so, we need to generate a new controller called maps. Run this line in your command prompt or terminal to generate a new controller.

rails g controller maps

This command should have created a bunch of files for us.

controller_creation

At this point, we usually decide whether we need an IDE or use any text editor for coding. I prefer an IDE, hence using Visual Studio Code.

Open file maps_controller.rb located in apps/controllers folder.

apps/controller/maps_controller.rb

We will define our home page here. The file contains MapsController class which inherits from the Applicationcontroller class. We will define a public method named “index”

Copied

        
class MapsController < ApplicationController

    def index
    end    

end

Next, we need to define a route. Routing is a way to redirect incoming requests to controllers and actions. We have already created a controller. All we need to do is define it in routes.rg file located inside the config folder.

config/routes.rb

Add ‘root to:'pages#index'’ lines to the file

Copied

        
Rails.application.routes.draw do

  root to: 'maps#index'

end

pages#index calls the MapsController and its public method index. Where hash symbol (#) represents a method.

Now, we need to create a template, a page that will ultimately show a map. Go to app/views/maps and create a index.html.erb file. In this file, we can write HTML and Embedded Ruby code.

app/views/maps/index.html.erb

Write a simple code to see how it works.

Copied

        
<h1> HERE Maps </h1>

Open http://localhost:3000 in the browser, you should see “HERE Maps” instead of the Rails welcome page.

maps_welcome_page

Our very basic template is ready. From here on, we can start introducing new things. Let us edit the template to show a map.

Copied

        
<html>
<head>
<meta name="viewport" charset="UTF-8" content="initial-scale=1.0, width=device-width" />
<%= javascript_include_tag 'https://js.api.here.com/v3/3.1/mapsjs-core.js' %>
<%= javascript_include_tag 'https://js.api.here.com/v3/3.1/mapsjs-service.js' %>
<%= javascript_include_tag 'https://js.api.here.com/v3/3.1/mapsjs-ui.js' %>
<%= javascript_include_tag 'https://js.api.here.com/v3/3.1/mapsjs-mapevents.js' %> 
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>

</head>
<body>
<div style="width: 100vw; height: 100vh" id="mapContainer"></div>
<%= javascript_pack_tag 'my_js' %>
</body>
</html>

Add the above HTML code in index.html.erb file. The javascript_pack_tag helps in importing a specific JS file, in our scenario, my_js.

Adding JavaScript

We need to add a JavaScript file in the packs' directory. The javascript_pack_tag should also refer to the name of the JavaScript file you created.

Create a JavaScript file named my_js.js in the app/javascript/packs directory

app/javascript/packs directory/my_js.js

Copied

        
var platform = new H.service.Platform({ 
    apikey: "HERE_API_KEY"    
}); 

const lat = 52.5; 
const lng = 13.4; 

// Obtain the default map types from the platform object: 
var defaultLayers = platform.createDefaultLayers(); 

// Your current position 
var myPosition = {lat: lat, lng: lng}; 

// Instantiate (and display) a map object: 
var map = new H.Map( 
    document.getElementById('mapContainer'), 
    defaultLayers.vector.normal.map, 
    { 
        zoom: 11, 
        center: myPosition 
    }); 

var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US'); 
var mapEvents = new H.mapevents.MapEvents(map); 
var behavior = new H.mapevents.Behavior(mapEvents); 

const marker = new H.map.Marker({lat: lat, lng: lng}); 

map.addObject(marker); 

marker.addEventListener('tap', function(evt) { 

// Create an info bubble object at a specific geographic location: 
var bubble = new H.ui.InfoBubble({ lng: lng, lat: lat }, { 
        content: '

Ruby on Rails

Copied

        ' 
     }); 
// Add info bubble to the UI: 
ui.addBubble(bubble); 

const marker = new H.map.Marker({lat: lat, lng: lng});
map.addObject(marker);
});

In the above code, you need to provide your API key in place of HERE_API_KEY. Open http://localhost:3000 and you will get a HERE map with a marker over Berlin, Germany. You can change the lat and lng value in the my_js.js file to get the location of your choice.

final_map

This concludes our blog on rendering HERE maps using Ruby on Rails. Now you have all the ingredients to quickly build a location-based web application.

Rendering HERE Map using Ruby on Rails

Vidhan Bhonsle

Have your say

Sign up for our newsletter

HERE