Select with OriginalSerial

Live example

In this tutorial you will learn how to select an element on the map using an original serial (ID) - not by clicking. This might be necessary if you want to embed a specific section of the map in another web view, for example linking an exhibitor's details view to a map showing his location on the venue.

Step 1: Add highlight function

  1. After creating a web map, as outlined in "A Map Application", you can call the select method in the map init success callback:

    ...
    map.setMapViewControllerDidStart(function () {
        selectFeatureWithOriginalSerial();
    })
    ...
    
  2. This select function has to be previously defined, as shown here:

    function selectFeatureWithOriginalSerial () {
        var originalSerial = "<your id>";
        map.selectFeatureWithOriginalSerial(originalSerial, {animated: true, zoomTo: true})
    }
    



  3. Add this HTML and CSS to achieve an ideal map view:

    <style type="text/css">
        body {
            width:600px;
        }
        #deepMap {
            width:598px;
            height:400px;
            border: 1px solid green;
        }
        #info {
            padding: 0 0 0 10px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
        }
    </style>
     
    <body>
        <div id="deepMap"></div>
        <div id="info">Stand-Info</div>
    </body>
    

That's it! Now you are able to select an element on the map by ID.