Map

Online Maps

Base map

STANAG On Demand Server can use online maps from different providers.

You can select a pre-configured base map in the right top corner of the map.

Center Map control

Map cennter

Map will center itself automatically, depending on the selected mode:

  • Platform - center map on Platform position
  • Frame - center map on Frame center
  • Target - center map on Target (if available)
  • Manual - do not move map. Manual control

Pre-configured Maps

Server uses some pre-configured map sources. You may change the configuration in the config.json file (/data folder)

"maps": {
    "layers": [
      {
        "title": "OpenStreetMap",
        "tileLayer": "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        "attribution": "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a>"
      },
      {
        "title": "OpenTopoMap",
        "tileLayer": "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
        "attribution": "Map data: &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>, <a href=\"http://viewfinderpanoramas.org\">SRTM</a> | Map style: &copy; <a href=\"https://opentopomap.org\">OpenTopoMap</a> (<a href=\"https://creativecommons.org/licenses/by-sa/3.0/\">CC-BY-SA</a>)"
      },
      {
        "title": "Esri_WorldStreetMap",
        "tileLayer": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
        "attribution": "Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012"
      },
      {
        "title": "Esri_WorldTopoMap",
        "tileLayer": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
        "attribution": "Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community"
      },
      {
        "title": "Esri WorldImagery",
        "tileLayer": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        "attribution": "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
      },
      {
          "title": "Google",
          "tileLayer": "https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
          "attribution": "Google"
      },
      {
          "title": "Offline maps",
          "tileLayer": "http://localhost:5000/{z}/{x}/{y}.png",
          "attribution": "Offline Tiles"
      }
    ]
  },

Offline Maps

In situations where network connectivity is limited or unavailable, it is essential to have a contingency plan for accessing maps. Fortunately, it is possible to use downloaded maps of pre-selected regions or employ a local map server that works with tiles to ensure uninterrupted access to geographic data.

One common approach is to download map tiles for specific regions in advance and store them locally on your device or server. These tiles can be fetched and displayed even when the StanagOnDemand server lacks network connectivity. To facilitate this, you can set up a local map server that adheres to a specific tile URL convention, such as:

http://localhost:5000/{z}/{x}/{y}.png

This URL convention provides a structured way to access map tiles based on their zoom level (z), x-coordinate (x), and y-coordinate (y). Here's a breakdown of what each of these parameters means:

z: The zoom level, which determines the scale or level of detail of the map. Higher values represent more detailed views, while lower values represent broader, zoomed-out views.

x: The x-coordinate represents the horizontal position of the tile within the map grid.

y: The y-coordinate represents the vertical position of the tile within the map grid.

The .png extension indicates that the map tiles are in PNG image format, which is a common choice for map rendering.

By following this URL convention and setting up a local map server on localhost at port 5000, you can seamlessly integrate these locally stored map tiles into your application. When network connectivity is unavailable or limited, your application can fall back on these stored tiles to continue providing users with valuable geographic information.

This approach not only ensures access to maps in offline mode but also reduces the reliance on external map services, making your application more robust and resilient in various operational scenarios. You can also use your own proprietary or confidential maps.

Note To display maps from TMS service use {-y} in the URL, for example http://base_url/tms/1.0.0/tileset/{z}/{x}/{-y}.png. This is required because the origin of coordinates of a map layers is the top left corner, so the Y coordinate goes down. In TMS, the origin of coordinates is the bottom left corner so the Y coordinate goes up.

Custom Tile Server

There are many ways to create local map tiles (free and paid). One of the easiest would be to use a Mobile Atlas Creator.

To create a custom tile server on your local network or machine using maps generated from Mobile Atlas Creator, follow these steps. First, select the desired area and zoom levels in Mobile Atlas Creator, and save the atlas as an OSMdroid ZIP file.

MobileAtlas

This action generates a zip folder containing image tiles organized in a structure like this:

{atlas_name}/{z}/{x}/{y}.png

Once you have this zip folder of map tiles, extract it to a directory of your choice on your local machine. Now, you have two options for offline use:

Local Copy: You can use the tiles locally by copying them to the appropriate directory and running any http server in that directory.

Local Web Server: Alternatively, you can set up a simple web server on your local computer or within your Intranet to serve these map tiles. Popular web server software like Apache, Nginx, nodejs (http-server) can be configured to serve static files. Place the extracted map tile folder in the server's document root directory and configure it to follow the URL convention you mentioned earlier (e.g., http://localhost:5000/{z}/{x}/{y}.png). This allows you to access the maps through a web browser or integrate them into StanagOnDemand server, by configuring the corresponding entry in the /data/config.json file, just as you would with an external tile server. 

 "maps": {
    "layers": [
      {
        "title": "OpenStreetMap",
        "tileLayer": "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        "attribution": "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a>"
      },

      ...

      {
        "title": "Offline maps",
        "tileLayer": "http://localhost:5000/{z}/{x}/{y}.png",
        "attribution": "Offline Tiles"
      }
    ]