Map display

A basic property of the SmartMaps API is the display of a map section.

In addition to the display of the map basis, various objects can be drawn into the map. These include icons, DIV elements, GeoJSON objects, such as polylines or polygons (areas). The latter differ from polylines in that they can have a fill color. The list of other objects can be found in the namespace ym.modules.provider.

The classes of the namespace ym.modules.provider also contain the methods to add the objects to the map.

Further functionalities for the map view, such as the integration of a static map, and more, is available in the SmartMaps Backend-Services.

Instructions

For the implementation of an interactive SmartMaps map, a div element with the ID map-wrapper is first added to the body tag of the HTML script. This contains a predefined div element with the ID map, in which the map is loaded at runtime. For the div element you can set a fixed height and width for the map by using the style attribute.

  <div id="map-wrapper">
    <!-- Predefined DIV element into which the map is loaded. -->
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>

For loading the SmartMaps map into the defined div-element map JavaScript code must be included. This can be included, as in this example, using a script tag in the HTML script or in a separate .js file. All variables and functions are implemented in the ym.ready-Methode , because it resolves dependencies to start the actual map application.
To display the SmartMaps map, an object of the class ym.map is created. Parameters are the ID of the div element in which the map is to be drawn and the desired map options (start position, start zoom level, map style etc.). Please use the map option style to request a different map style e.g. greyscale or darkmode. All map styles are documented in the map options, please click here. To continue managing the map in code, the object is stored in a variable map.

    ym.ready(function(modules) {
      var map = ym.map("map", {
        // Define geographical longitude and latitude.
        center: ym.latLng(50.095685, 8.690445),
	// Set zoom level.
        zoom: 12
      });
    });

The SmartMaps map is now successfully integrated.

HTML document

Code example: Map display

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>SmartMaps Karte</title>
</head>
<body>
  <div id="map-wrapper">
    <!-- Predefined DIV element into which the map is loaded. -->
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>

  <!-- SmartMaps API -->
  <!-- You must include your personal API-key here -->
  <script
    src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>
  <script>
    ym.ready(function (modules) {
      var map = ym.map("map", {
        // Define geographical longitude and latitude.
        center: ym.latLng(50.095685, 8.690445),
        // Set zoom level.
        zoom: 12
      });
      window.map = map;
    });
  </script>
</body>
</html>

View example now