Hexagon Geospatial
MENU

Shared Samples

M.App Portfolio provides a modern, cloud-based platform for creating and delivering diverse geospatial web applications.
Through the M.App Studio, our partners can design, build, and deploy their own Hexagon Smart M.Apps.
Showing results for 
Search instead for 
Do you mean 

Exercise: Cities as pins on the map

by Technical Evangelist ‎07-26-2016 04:11 AM - edited ‎10-11-2016 09:37 AM (512 Views)

Introduction

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.map.pin

 - $GP.ui.info 

 - $GP.ui.sidebar

 

Description

  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 item.id;
            return null;
        }
        var itemId = getItemIdByTitle(catalogItems.datasets, "cities.geojson");
       
        //get geojson attachment file
        url = "api/v1/items/"+ itemId + "/attachments/cities.geojson.attachment"; 
        $GP.m_app.utils.connection(url).then(function(response){
            var geojson = response.entity;
            addPinsFromJson(JSON.parse(geojson));
        });
    });
}

 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) {
    $GP.map.pin.clear();
    $GP.map.pin.add({
        geojson: geojson, 
        actions: {
            clicked: function () {
                $GP.ui.info("You clicked: " + this.getFeature().get_geoJSON().properties.city);
            }            
        }
    });
}

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

$GP.ui.sidebar.add({
    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.onclick=showPins;
button.appendChild(document.createTextNode("Add pins"));
sidebar.appendChild(button); 

 Snippet which adds panel to the sidebar.

 

Added panel

GeoJsonCityAppPanel.png

Map after "add pins" click

 

GeoJsonCity.png