Search POI Categories Near a Location

_{Estimated reading time: 4 minutes}

Search for POIs (Points of Interest) by categories around a specified location. Click on a category from the left side list to view the POIs highlighted on the map and the interactive results list on the right side of the map.

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.

JavaScript
HTML

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

 var defaultAppScreen = gem.core.App.initAppScreen({
     container: 'map-canvas',
     center: [48.207825, 16.371557, 5000], // latitude , longitude, altitude
 });

 let poiListCallback = function (parentDiv, resultedLandmarkItem) {
     parentDiv.className = 'card';
     parentDiv.style = 'width:100%';
     let whatToAdd = '<div class="card-body">' +
         '<h5 class="card-title">' + resultedLandmarkItem.getName() + '</h5>' +
         '<h6 class="card-subtitle mb-2 text-muted">' + resultedLandmarkItem.getAddress() + '</h6>' +
         '<p class="card-text">' + resultedLandmarkItem.getDescription() + '</p>' + '</div>';
     parentDiv.innerHTML = whatToAdd;
 }

 var poiControl = new gem.control.POICategoryListControl({
     container: 'poi-category'
 });
 let nearbyControl = new gem.control.SearchNearbyControl({
     categorylistcontrol: poiControl,
     populateItemFunction: poiListCallback
 });

 defaultAppScreen.addControl(nearbyControl);
 defaultAppScreen.addControl(poiControl);

 <html>
 <meta charset="utf-8">

 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Search Nearby Control - MagicLane Maps SDK for JavaScript</title>
 <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
     integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <style>
     .body {
         width: 100%;
         height: 100%;
     }

     ::-webkit-scrollbar {
     width: 4px;
     }

     /* Track */
     ::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px #eee;
     border-radius: 10px;
     }

     /* Handle */
     ::-webkit-scrollbar-thumb {
     background: #834FFF;
     border-radius: 10px;
     }

     /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
     background: #6E37F1;
     }

     .carousel-control-prev-icon,
     .carousel-control-next-icon {
     height: 100px;
     width: 100px;
     background-size: 100%, 100%;
     background-image: none;
     }

     .carousel-control-next-icon:after {
     content: '>';
     font-size: 55px;
     color: #834FFF;
     }

     .carousel-control-prev-icon:after {
     content: '<';
     font-size: 55px;
     color: #834FFF;
     }

     .card:hover {
     background-color:#ffed91;
     }

     .card.active {
     background-color: gold;
     }

     #poi-category {
     font-size: 14px;
     }
 </style>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
     integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
     integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
 </script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
     integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
 </script>
 </head>
 <div id="map-canvas" style="width: 100%; height: 100%; position: absolute; overflow: hidden;">
 </div>
 <div id="poi-category" class="gem-markers-menu"
 style="position: absolute; left: 0px; top: 10px; width: 10%; overflow: auto; height: 95%;">
 </div>
 </div>
 <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
 <script type="text/javascript" src="token.js"></script>
 <script type="text/javascript" src="searchNearbyControl.js"></script>

 </html>

The map-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:

_{Right-click on the links and select Save As.}

JavaScript Examples

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

Overview​

JavaScript Examples​

Overview

JavaScript Examples