Deep Map SDK Web

Interactive legend

Live example

The objective of this tutorial is to show the interaction between a list of objects and the map. When clicking an object in the list or on the map, the map moves to the selected object and an annotation is generated which displays the level and the name of the selected object.

Step 1: init the map

You have created a map, as outlined in "A Map Application".

Step 2: add the list

html list
<ul class="list-group">
        ...
    <li class="list-group-item">
        <a href="#" data-featureid="stand_manual_8041" data-icon="home">
            <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Stand 8041
        </a>
        </li>
        ...
</ul>

 

Step 3: add a click event to the list

This example shows the implementation of the click event with the help of jQuery and the readout of the original serial and the icon.

click event function
$('.list-group-item a').on({
    click: function () {
        var $this  = $(this);

        var originalSerial = $this.data('featureid');
        var icon = $this.data('icon');
        }
});

 

Step 4: add selected feature and move to it

A click on the list loads the feature from the server.

get feature
$('.list-group-item a').on({
    click: function () {
                ...
                map.getFeatureByOriginalSerial(originalSerial)
                        .then(function (feature) {
                        });
                
    }
});

 

Mark the feature as selected.

select feature
map.getFeatureByOriginalSerial(originalSerial)
    .then(function (feature) {

        map.select(feature, true);
});

 

Step 5: add custom annotation

Create a DOM element for the annotation and add it to the map.

add annotation
var annotation;
 
...
 
map.getFeatureByOriginalSerial(originalSerial)
    .then(function (feature) {
        ...
        var properties = feature.properties;
        var element = document.createElement('div');
        element.className = 'annotation';
        element.innerHTML = [
            '<div class="annotation-arrow"></div>',
            '<div class="annotation-inner clearfix">',
                '<span class="glyphicon glyphicon-' + icon + ' annotation-icon" aria-hidden="true"></span>',
                '<span class="annotation-text">Level: ' + properties.level + '<br>',
                'Name: ' + properties.name + '</span>',
            '</div>'
        ].join('');
                // add to map
        annotation = map.addAnnotationByFeature(feature, element);
    });


Delete the old annotation before creating a new one.

remove annotation
...
if (annotation) {
    map.clearAnnotation(annotation);
    annotation = undefined;
}
...


Add this CSS to style the annotations.

style
.annotation {
    position: relative;
    z-index: 1070;
    display: block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    line-break: auto;
    padding: 5px 0;
    margin-top: -3px;
}
.annotation .annotation-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #fff;
}
.annotation .annotation-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #000;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
}

.annotation-icon {
    float: left;
    font-size: 27px;
    margin-top: 2px;
    color: #2b91af;
}
.annotation-text {
    float: left;
    text-align: left;
    padding-left: 10px;
} 

 

Step 6: add click handler

A click handler is necessary to remove labels and annotations while clicking on the map.

add click handler
var clickHandler = function (queryPoint, zoom, geometry) {
        // remove selection
    map.clearSelections();
        // remove all annotation
    map.clearAllAnnotation();
};
 
...
 
map = DeepMapFactory.bootstrap(config);
// add the click handler to map
map.addClickHandler(clickHandler);
 
...