Search Near a Location

Search for POIs (Points of Interest) around the current position or a specified location.

Overview

The map supports pan and zoom, and is fully 3D, so holding down the shift key and panning will simultaneously rotate and tilt the map.

See the example fullscreen

If you want to jump right in, you can download the HTML file and the JavaScript file for this example in the same directory, and then load the HTML file in a web browser to try it out right now!

Or you can continue reading for a detailed explanation of the code.

How it works

JavaScript

// Start by setting your token from https://developer.magiclane.com/api/projects
gem.core.App.token="your_API_key_token";

The first step in JavaScript is to set your API key token gem.core.App.token, which you can get at the Magic Lane website, see the Getting Started tutorial.

You only need to type your email address and create a new password.

// The main function
gem.core.App.registerInitialCallFunction(function () {
    // View of the map
    var defaultView = gem.core.App.getDefaultScreen().getDefaultMapView();
    var coordinates = { latitude: 48.8562, longitude: 2.3516, altitude: 10000, bearing: 0.0 };
    // Fly the camera to the center of the search area
    defaultView.centerOnCoordinates(coordinates, 0);

    gem.core.App.registerConnectionStatusChanged(function (online) {
        if (online) {
            var result = new gem.core.LandmarkList();

            // This function is called when the search completes
            var callbackFunction = function (reason) {
                var resultTouched = new gem.core.LandmarkList();
                console.log("Reason is " + reason);
                // Set the result highlight color (rgba) to red
                defaultView.activateHighlight(result, { r: 255, g: 0, b: 0, a: 255 },
                    gem.d3Scene.EHighlightOptions.EHO_ShowContour.value | gem.d3Scene.EHighlightOptions.EHO_ShowLandmark.value
                    | gem.d3Scene.EHighlightOptions.EHO_Overlap.value | gem.d3Scene.EHighlightOptions.EHO_Group.value);
                var cb = function (resultedTouches) { };
                defaultView.registerLandmarkClickedEvent(resultTouched, cb);
            };
            // Create a filter and add point of interest (POI) categories to search for to the filter
            var vCategories = gem.content.Manager.getGenericCategories();
            var selectedFilter = new gem.core.LandmarkCategoryList();
            selectedFilter.push_back(vCategories.get(0));
            // Search around specified coordinates
            gem.places.Search.searchPoiCategory(selectedFilter, coordinates, callbackFunction, result);
        }
    });
});

// Initializes the app
gem.core.App.initApp();

The main function, where execution starts, is defined: gem.core.App.registerInitialCallFunction(function()

View of the map: var defaultView = gem.core.App.getDefaultScreen().getDefaultMapView();

Variable to hold POI (point of interest) search results: var result = new gem.core.LandmarkList();

Function called whenever app detects the device got connected or disconnected from the network: gem.core.App.registerConnectionStatusChanged(function(online)

Function called whenever a POI search completes: var callbackFunction = function(reason)

Set color for area perimeter, if any, red in this case: defaultView.activateHighlight(result,{r:255, g:0, b:0, a:255},

Get the generic POI categories to search for, a filter, and put the categories in a filter: var vCategories = gem.content.Manager.getGenericCategories(); var selectedFilter = new gem.core.LandmarkCategoryList(); selectedFilter.push_back(vCategories.get(0));

Fly the camera to the specified coordinates, 0 milliseconds flight time means jump there instantly: defaultView.centerOnCoordinates(coordinates,0);

Search around specified coordinates - as these are now the current coordinates, this is equivalent to searching around current position (reverse geocoding): gem.places.Search.searchPoiCategory(selectedFilter,coordinates,callbackFunction,result);

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <title>Search Nearby - MagicLane Maps SDK for JavaScript</title>
    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css" />
    <style>
     body {
       overflow: hidden;
     }
 </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="profile-main-loader">
        <div class="loader">
          <svg class="circular-loader" viewBox="25 25 50 50">
            <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="#70c542" stroke-width="2" />
          </svg>
        </div>
      </div>
    </div>
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
    <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
    <script type="text/javascript" src="token.js"></script>
    <script type="text/javascript" src="jsSearchNearby.js"></script>
  </body>
</html>

The canvas is the drawing area where the map is rendered. The canvas is configured to fill the browser window.

Note that the div elements must be defined before loading the JavaScript source.

The circular-loader is the rotating circle animation seen while loading.

At the bottom, gemapi.js, the Maps SDK for JavaScript is loaded.

Next, the JavaScript source of this example is loaded.

The example is 2 plain text files, one with the HTML code (.html file extension) and the other with the JavaScript code (.js file extension).

To run the example, the HTML file is loaded in a browser. The .js file should be in the same directory, as it will be loaded automatically.

Source code for this example:

HTML and JavaScript

right-click on the links and select Save As.

JavaScript Examples

Maps SDK for JavaScript Examples can be downloaded or cloned with Git