Contents
- Getting Started
- Creating a Map
- Creating a Layer
- Filtering Layer Data
- Styling Layer Data
- More Examples
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.
<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>
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>
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.
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.
<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>
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".
//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();
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.
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();
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.
"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 } },
<html> <head> <script type="text/javascript" src="/JS"></script> <script type="text/javascript"> ml.onload(function() { var map = ml.map("mapDiv", { "api": "LEAFLET", "drawingEditingEnabled": true, "drawingToolsHidden": true, "drawings": [], "lat": 38.048091067457236, "layers": [ { "query": { "select": { "type": "geo.dot" }, "where": [ [ { "col": "LowRate", "test": "LessOR", "value": "100" } ], [ { "col": "LowRate", "test": "Greater", "value": "100" } ] ], "table": { "name": "hms/hotels" } }, "style": { "method": "rules", "rules": [ { "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 } }, "visible": true, "onClick": "debug", "hashcode": "0a84d8eebbb54e7bf163d68734924899", "hoverFieldsCommaDel": "", "id": "layerml_3", "opacity": "1.0", "type": "layer", "zIndex": "1" } ], "lng": -95.3173828125, "mapId": "7caff9a1-16e5-46ce-83b9-c38b75138598", "searchBox": true, "z": 5 }); }); </script> </head> <body> <div id="mapDiv" style="width:100%;height:100%;"></div> </body> </html>
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.