OneMap: Map Design

OneMap Base Maps Documentation

About Maps in OneMap

A wide range of maps with different colour schemes were designed and created by the Team’s UX designer and developers.

We are currently serving EPSG:3857 Coordinate System for all our maps, a Spherical Mercator projection widely adopted by most map service providers.

Our base maps are also responsive, catering to different devices and screen sizes.

Points to Note

Coordinate System

EPSG: 3857

Official name "WGS 84 / Pseudo-Mercator"

Widely used by Web Services such as Google Maps and OpenStreetMap

Tool Box

OneMap leverages on open-source tools in development of maps and in serving of maps to user with our dedicated server.

Performance

Our maps are served at a higher performance by taking advantage of utilities found in SQLite for solving duplicate imageries.

Get access to our map

Integrate our Map in your Application!

All you need to do is to "Copy and Paste" the source code below and save in .html file format

Alternatively, change the map link provided below and paste it in the code below:

var basemap = L.tileLayer(' ------here-------')

GeoLocation function in javascript allows the user to know where they are located currently in the Map

Map Collection (XYZ): LeafletJS

Under our Terms of Use, by using our base map services, you MUST include the OneMap logo and attribution.

You are highly recommended to use this OneMap LeafletJS:

<html>
      <head>
        <title>OneMap2 XYZ (Grey)</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
        <script src="https://cdn.onemap.sg/leaflet/onemap-leaflet.js"></script>
      </head>
      <body>
        <h1>Singapore Map</h1>
        <div id='mapdiv' style='height:800px;'></div>
      </body>
      <script>
        var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();
        var map = L.map('mapdiv').setView([center.x, center.y], 12);

var basemap = L.tileLayer('https://maps-{s}.onemap.sg/v3/Grey/{z}/{x}/{y}.png', {
          detectRetina: true,
          maxZoom: 18,
          minZoom: 11
        });

map.setMaxBounds([[1.56073, 104.1147], [1.16, 103.502]]);

basemap.addTo(map);

function getLocation() {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
          } 
        }

function showPosition(position) {           
          marker = new L.Marker([position.coords.latitude, position.coords.longitude], {bounceOnAdd: false}).addTo(map);             
          var popup = L.popup()
          .setLatLng([position.coords.latitude, position.coords.longitude]) 
          .setContent('You are here!')
          .openOn(map);         
        }
      </script>
      </html>

If you are using the official LeafletJS, please use this:

Map Collection (XYZ): OpenLayers

Map Name	Map Link	Status
Singapore Map Design 3: Grey	http://maps-a.onemap.sg/v2/Grey/${z}/${x}/${y}.png http://maps-b.onemap.sg/v2/Grey/${z}/${x}/${y}.png http://maps-c.onemap.sg/v2/Grey/${z}/${x}/${y}.png	Released Released Released
Singapore Map Design 3: Grey (HTTPS)	https://maps-a.onemap.sg/v3/Grey/${z}/${x}/${y}.png https://maps-b.onemap.sg/v3/Grey/${z}/${x}/${y}.png https://maps-c.onemap.sg/v3/Grey/${z}/${x}/${y}.png	Released Released Released

Map Collection (TileJSON)

Map Name	Map Link	Status
Singapore Map Design 3: Grey (HTTPS)	https://maps-json.onemap.sg/Grey.json	Released

Map Collection (WMTS)

Selectable Maps	Use Any Map Links	Status
Singapore Map Designs: Default/Night/Grey/Original	http://mapservices.onemap.sg/mapproxy/wmts/1.0.0/WMTSCapabilities.xml http://mapservices.onemap.sg/mapproxy/service?REQUEST=GetCapabilities&SERVICE=WMTS	(Stable) New (Stable) New
Singapore Map Designs: Default/Night/Grey/Original (HTTPS)	https://mapservices.onemap.sg/mapproxy/wmts/1.0.0/WMTSCapabilities.xml https://mapservices.onemap.sg/mapproxy/service?REQUEST=GetCapabilities&SERVICE=WMTS	(Stable) New (Stable) New

Grey (TileJSON)

<html>
      <head>
        <title>OneMap2 TileJSON (Grey)</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
        <script src="https://cdn.onemap.sg/leaflet/onemap-leaflet.js"></script>
      </head>
      <body>
        <h1>Singapore Map</h1>
        <div id='mapdiv' style='height:800px;'></div>
      </body>
      <script>
        var mapBounds = new L.LatLngBounds(
          new L.LatLng(1.56073, 104.1147),
          new L.LatLng(1.16, 103.502));
        var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();
        var mapMinZoom = 11;
        var mapMaxZoom = 19;

var om2TileJSON = {
          "tilejson": "2.0.0",
          "name": "OneMap2 TileJSON (Grey)",
          "description": "OneMap2 TileJSON (Grey)",
          "version": "1.0.0",
          "scheme": "xyz",
          "tiles": [
          "https://maps-{s}.onemap.sg/v3/Grey/{z}/{x}/{y}.png"
          ],
          "subdomains": ["a","b","c"],
          "minZoom": mapMinZoom,
          "maxZoom": mapMaxZoom,
          "bounds": mapBounds,
          "center": center
        };

var map = L.TileJSON.createMap('mapdiv', om2TileJSON);
        map.setMaxBounds([[1.56073, 104.1147], [1.16, 103.502]]);
      </script>
      </html>

Grey (WMTS): With OpenLayers

<!DOCTYPE html>
        <html>
          <head>
            <title>OneMap2 WMTS (Grey)</title>
            <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
            
            <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
            <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
          </head>
          <body>
            <div id="map" class="map"></div>
            <script>
              var map = new ol.Map({
                target: 'map',
                controls: ol.control.defaults({
                  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                  })
                }),
                view: new ol.View({
                  zoom: 15,
                  center: ol.proj.transform([103.82,1.35], 'EPSG:4326', 'EPSG:3857')
                })
              });

var resolutions = [];
              var matrixIds = [];
              var proj3857 = ol.proj.get('EPSG:3857');
              var maxResolution = ol.extent.getWidth(proj3857.getExtent()) / 256;

for (var i = 0; i < 20; i++) {
                matrixIds[i] = i.toString();
                resolutions[i] = maxResolution / Math.pow(2, i);
              }

var tileGrid = new ol.tilegrid.WMTS({
                origin: [-20037508, 20037508],
                resolutions: resolutions,
                matrixIds: matrixIds
              });

var om2 = new ol.layer.Tile({
                source: om2_source
              });

map.addLayer(om2);
            </script>
          </body>
        </html>

Report Vulnerability