Getting Started

This documentation outlines the structure and features of the ALK Maps plugin for the Leaflet API.

The first thing you will need to do is include the CSS and JavaScript files for both Leaflet and the ALK Maps plugin as demonstrated below.

Note: If your leaflet script element is still pointing to alkmaps-leaflet.js, please change it to use the regular alkmaps.js file and URL as seen in the sample HTML code below.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- please note that you will now reference the same JavaScript file as the regular ALKMaps toolkit -->
<script src="https://maps-sdk.trimblemaps.com/v1/alkmaps-1.2.3.js"></script>

You will also need to add a div element for the map. The id of this element will be used when you define your map.

<div id="map"></div>

Make sure to define the height of the map element as well.

<style>
  #map { height: 500px; }
</style>

The API Key

In order to consume any of the services the plugin uses, you will need to specify your API key. This can be done in two ways. You can use the query string for the plugin in the html script tag.

<script src="https://maps-sdk.trimblemaps.com/v1/alkmaps-1.2.3.js?key=YourAPIKey"></script>

Or you can also set the APIKey property at the start of your JavaScript code.

Note: Once you have migrated your script element to use alkmaps.js, you will no longer be able to use L.ALKMaps.APIKey to set your APIKey. Instead use the setApiKey function as demonstrated in the sample code below.

L.ALKMaps.setApiKey("YourAPIKey");

The Map

Before we can move onto any of the plugin’s features you will need to create the map object.

var map = L.map("map").setView([51.505, -0.09], 13);

A Basic Map

Here is an example of a basic map and the code used to create it.

Note: The L.ALKMaps.Layer.Tile class and its constructor function L.ALKMaps.Layer.tile have been deprecated, please change any existing code to use L.ALKMaps.Layer.BaseMap and L.ALKMaps.Layer.baseMap respectively.

The Attribution

You can also customize map Attribution by passing attribution, attrPosition, attrUseHyperlink to L.ALKMaps.Layer.BaseMap constructor function. Valid attrPosition values are bottomright, bottomleft, topright and topleft. Default to bottomright. Here is an example of customizing map Attribution.

var baseLayer = L.ALKMaps.Layer.baseMap({
  region: "NA",
  dataset: "Current",
  attribution: "XYZ",
  attrPosition: "topright",
  attrUseHyperlink: false
});

For further documentation on how to use leaflet and its features, please visit the Leaflet website.