Showing results for 
Search instead for 
Do you mean 

Exercise: Cities as pins on the map

by Technical Evangelist on ‎07-26-2016 04:11 AM - edited on ‎10-31-2019 03:35 AM by Community Manager (691 Views)


This tutorial shows how to create a simple application with a custom button in the sidebar. Clicking on the button results in adding pins representing cities to the map. Cities coordinates are taken from the geojson file downloaded from the M.App Chest.

An attachment contains files required to finish following exercise.

Link to repository with code snippets: BitBucket repository 


API methods used:

 - $GP.m_app.platform

 - $GP.m_app.utils

 - $

 - $ 

 - $GP.ui.sidebar



  1. Upload the “cities.geojson” file to M.App Chest.  

    1. Open the M.App Chest, click the upload button. geojsonUp.png
    2. Upload the selected file. geojsonUp1.png
  2. Create an application with MapViewer panel

    1. Click create new MApp 
    2. Drag & drop Map panel
    3. Open the map wizard and create a new map with a HereMap layer 
  3. Create the customization

    1. Open the “Customize” panel and select the javascript editor.
function showPins() {
    $GP.m_app.platform.catalog.getList(function (catalogItems) {
        //get item ID by title
        function getItemIdByTitle(items,title){
            for(var item of items)
                if(item.title == title)
            return null;
        var itemId = getItemIdByTitle(catalogItems.datasets, "cities.geojson");
        //get geojson attachment file
        url = "api/v1/items/"+ itemId + "/attachments/cities.geojson.attachment"; 
            var geojson = response.entity;

 Function "showPins" reads previously added "cities.geojson" file. It also gets itemId's by title from user's content (function getItemIdByTitle). Then the function gets the geojson attachment by its url.

function addPinsFromJson(geojson) {
        geojson: geojson, 
        actions: {
            clicked: function () {
                $"You clicked: " + this.getFeature().get_geoJSON();

 This function add pins to the map using API method $ It also defines a callback - when the user clicks on the pin, a UI info pops up with the name of the clicked city.

    id: "sidebar-panel-pins",
    title: "Add pins panel",
    style: "background-position: 0px 0px;" 
}, function (ret) {
var sidebar = document.getElementById("sidebar-panel-pins");
var button = document.createElement("button");
button.appendChild(document.createTextNode("Add pins"));

 Snippet which adds panel to the sidebar.


Added panel


Map after "add pins" click




Attachment ‏16 KB
(Virus scan in progress ...)