Javascript API

/ Getting Started with the MapLarge Javascript API

Content

Getting Started

The MapLarge Javascript API is a client side library used to create maps and layers. The API interacts with MapLarge web services and runs on top of many other mapping APIs including Google Maps, Leaflet, and ESRI.

Simple Getting Started Example

<html>
   <head>
      <script type="text/javascript" src="http://my.maplarge.com/JS"></script>
      <script type="text/javascript">
         ml.onload(function() {
             var map = ml.map("mapDiv");
         });
      </script>
   </head>
   <body>
      <div id="mapDiv" style="width:100%;height:100%;"></div>
   </body>
</html>

Live demo

Loading the MapLarge API

To load the MapLarge API, simply include the MapLarge javascript file.

In the script tag is a URL with the location of the file that contains the MapLarge JS API. This script tag is required.

<html>
   <head>
      <script type="text/javascript" src="http://my.maplarge.com/JS"></script>

Note: If directed to a specific MapLarge server, specify it in the URL.

Creating JSON with Map Editor

Almost all MapLarge API calls can also be configured without coding by using the advanced MapEditor.

Use MapEditor to create and edit maps and layers or for capturing code snippets for use in custom JavaScript.

Open MapEditor by adding ?showeditor=true to the map URL. MapEditor can also be opened by pressing CTRL + BACKSPACE.

Note: Replace my.maplarge.com with your server if hosted in another location.

The JSON object shown in the Map or Layer JSON editor is simply a valid options object that may be passed into the constructor for a map or layer.The Map JSON Includes attributes including the basemap, zoom level, map center position and all included Layers. The Layer JSON only includes JSON relevant to that specific layer.Access the JSON by pressing the View/Edit JSON button on a Map or Layer in MapEditor.

Creating a Map

This example shows how to create a map with a specific latitude, longitude, and zoom. The map object is used in the examples below. More details about map options can be found here.

Creating a Map Example

<script type="text/javascript" src="/JS"></script>
<script type="text/javascript">
   //ml.onload only runs after DOM is loaded
   ml.onload(function() {
 
       //DOM element where map will be craeted 
       var divID = 'mapDiv';
 
       //Map options
       var options = {
           lat: 33.709,
           lng: -84.404,
           z: 9
       };
 
       //Create the map
       var map = new ml.map(divID, options);
   });
</script>
<body>
   <div id="mapDiv" style="width:100%;height:100%;"></div>
</body>

Live demo

Example Map

Creating a Layer

Layers also have their own set of options, similar to maps. This example creates a dot layer from the table "hms/hotels".

Creating a Layer Example

//Configure the data the layer will visualize
var layerOptions = {
    "query": {
        "select": {
            "type": "geo.dot"
        },
        "where": [],
        "table": {
            "name": "hms/hotels"
        }
    }
};
 
//Add the layer to your map
var layer = new ml.layer(map, layerOptions);
 
//Show the layer
layer.show();

Example Map

Filtering Layer Data

This is the same layer object but now filtering options have been added. This layer will only show hotels with a cost less than $50.

Learn more about the MapLarge Where Clause.

Creating a Layer with Filtering

var layerOptions = {
    "query": {
        "select": {
            "type": "geo.dot"
        },
        "where": [
            [{
                "col": "LowRate",
                "test": "Less",
                "value": "50"
            }]
        ],
        "table": {
            "name": "hms/hotels"
        }
    }
};
 
//Add the layer to your map
var layer = new ml.layer(map, layerOptions);
 
//Show the layer
layer.show();

Live demo

Example Map

Styling Layer Data

Styling options can be added to a layer. This example shows hotels under $100 as red points and hotels over $100 as blue points.

Styling Data Example

   "style": {
                    "borderColorOffset": "75",
                    "dropShadow": "false",
                    "fillColor": "255-0-127-255",
                    "height": "8",
                    "shape": "round",
                    "width": "8"
                  },
                  "where": [
                    [
                      {
                        "col": "LowRate",
                        "test": "Greater",
                        "value": "100"
                      }
                    ]
                  ]
                },
                {
                  "style": {
                    "borderColorOffset": "75",
                    "dropShadow": "false",
                    "fillColor": "255-255-0-0",
                    "height": "8",
                    "shape": "round",
                    "width": "8"
                  },
                  "where": [
                    [
                      {
                        "col": "LowRate",
                        "test": "LessOR",
                        "value": "100"
                      }
                    ]
                  ]
                }
              ],
              "colorTransform": {
                "alpha": 1
              }
            },

Live demo

Example Map

Complete Code Example with Filters and Styles

Live demo

More Examples

Looking at examples is a great way to get more comfortable with what is possible with our API. You can press ctrl + M on any of these example maps to open up Map Editor so you can look at the JSON that was used to create that map.

Maps

/ Maps - Quick Start

Map Container

Each map is contained within a div (or other block level element) on the page.

<div id="mapDiv" style="width: 500px; height: 400px"></div>

Note: Width and height must be set for the container because the map object itself has no minimum width or height and will stretch to fill the container. When a container has no width or height the map will not appear.

Map Object

A map object is the data object that controls all the properties of a displayable map, including starting locations, zoom levels, rendering options, underlaying map tiles, and more.

The first parameter can either be an ID or DOM element. The second parameter is a map's options object.

var map = new ml.map('divID', { lat: 33.70606265, lng: -84.4171367, z: 10, api: 'LEAFLET’ });

Create Javascript map object and pass to the div element.

<html>
    <head>
        <script type="text/javascript" src="/JS"></script>
        <script type="text/javascript">
            ml.onload(function() {
                var map = new ml.map('mapDiv', { lat: 33.709, lng: -84.404, z: 9 });
            });
        </script>
    </head>
    <body>
        <div id="mapDiv" style="width:100%;height:100%;"></div>
    </body>
</html>

Example Map

Note: If the map container element is being created statically on the page then using a div is not necessary. Use the following to create the actual map data object:

document.getElementById('yourMapDivID')

Basemaps

MapLarge is drop in compatible with other mapping providers. If no API is defined in the map options, the default basemap is Leaflet. Each API has various baselayer options. For example, Leaflet provides the baselayers:

Color
OSM Dark
Blue Marble
Aerial
Satellite
Blank (white)

var map = new ml.map('mapDiv', { lat: 33.70606265, lng: -84.4171367, z: 10, api: 'LEAFLET', baseLayer: 'color' });

Creating a Map Example

Live demo

Accessing the Underlying Mapping API

In addition to the options provided by the MapLarge Map object, the underlying mapping provider API options and features are also available (Google, Leaflet, or ESRI). These can be referenced by using map.getInternalMap().

 //create a MapLarge map which uses the ESRI API 
var mlmap = ml.map(div,{ api:'ESRI' }); 
//return the internal ESRI map object 
var esrimap = mlmap.getInternalMap();

Alternative Advanced Constructor

The MapLarge API can also attach to a Google or other map that already exists on the page.
//maplarge.com/googlemapsapi.

Maps

/ Map Constructor Options

Each map is contained within a div (or other block level element) on the page.

<html>
   <head>
      <script type="text/javascript" src="http://my.maplarge.com/JS"></script>
      <script type="text/javascript">
         ml.onload(function() {
             var map = ml.map("mapDiv");
         });
      </script>
   </head>
   <body>
      <div id="mapDiv" style="width:100%;height:100%;"></div>
   </body>
</html>

Maps - Quick Start

API

Javascript API

Maps

Layers

Queries

Geocoder/Reverse Geocoder

Features

Javascript API

Content

Getting Started

Simple Getting Started Example

Loading the MapLarge API

Creating JSON with Map Editor

Creating a Map

Creating a Map Example

Example Map

Creating a Layer

Creating a Layer Example

Example Map

Filtering Layer Data

Creating a Layer with Filtering

Example Map

Styling Layer Data

Styling Data Example

Example Map

Complete Code Example with Filters and Styles

More Examples

Maps

Map Container

Map Object

Create Javascript map object and pass to the div element.

Example Map

Basemaps

Creating a Map Example

Accessing the Underlying Mapping API

Alternative Advanced Constructor

Maps

Mapping Platform for Big Data Visualization, Analytics & Publishing

About Us

Navigation

Contact Info