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' }); Example Map

Accessing the Underling 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.

Map Container

Map Object

Basemaps

Accessing the Underling Mapping API

Alternative Advanced Constructor

MAPPING PLATFORM FOR BIG DATA VISUALIZATION, ANALYTICS & PUBLISHING