Create A Leaflet Map With Interactive Layers - am_map.js

am_map.js is a jQuery plugin to create a custom Leaflet map where you can easily add multiple interactive layer markers with popups using a simple API.

How to use it:

1. Load the necessary jQuery library and Leaflet Map in the document.

<link rel="stylesheet" href="/path/to/cdn/leaflet.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/leaflet.js"></script>

2. Load the Leaflet.UTM if you use UTM coordinates.

<script src="/path/to/cdn/L.LatLng.UTM.min.js"></script>

3. Load the Stamen Maps if you need a special background: 'terrain' | 'toner' | 'watercolor'.

<script src="http://maps.stamen.com/js/tile.stamen.js"></script>

4. Create a container in which you want to embed the Leaflet map.

<div id="myMap"></div>

5. Create a basic Leaflet map on your page.

$("#myMap").am_map({
  // options here
});

6. Customize the Leaflet map with the following properties.

$("#myMap").am_map({

  // center of the map
  center: [41.55, 2.45],

  // map height
  height: '400px',

  // initial zoom level
  iniZoom: 12
  
});

7. Add custom layer markers to the map.

$("#myMap").am_map('addLayer', { 
  
  // unique name
  'name' : 'myLayer', 

  // marker point
  'points' : [ 41.55, 2.45, { 
    'code' : '?v1', // URL identifier
    'name' : 'Title', 
    'desc' :'Description' 
  }], 

  // UTM zone code
  'UTMzone' : 33, 

  // is south hemisphere
  'UTMsouth' : true,

  // custom icon HTML
  icon: '',

  // initial zoom level
  zoom: 10,

  // zoom level at which the layer is visible
  limitZoom: 12,

  // url
  'url' : 'https://jqueryscript.net',

});

Changelog:

2023-12-05

• background option removed (Stamen not available anymore)

 

---

This awesome jQuery plugin is developed by Lluisma. For more Advanced Usages, please check the demo page or visit the official website.