am_map.js is a jQuery plugin for quickly creating a flyer map and adding multiple interactive layers of nodes (using LatLong or UTM (x, y) links).
This jQuery extension is for creating a custom Leaflet Map where you can easily add tags for multiple interactive layers using popups using a simple API.
Map settings
center
([lat,long]): center of the map ( default: [41.55, 2.45] )height
(string): height of the map ( default: 400px )iniZoom
(integer): initial zoom ( default: 12 )background
(string): background type (default: ‘terrain’ | ‘toner’ | ‘watercolor’ | ‘osm’ )
Must Read: A Simple Lightweight Mapbox GL JS Component For Vue.js
Add Multiple Interactive Layers am_map.js Details
Post Name | Leaflet Map JS |
Author Name | Lluisma |
Category | Map |
Official Page | Click Here |
Official Website | github.com |
Publish Date | March 27, 2021 |
Last Update | August 18, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Load the jQuery library and Leaflet Map within 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
for those who use UTM coordinates.
<script src="/path/to/cdn/L.LatLng.UTM.min.js"></script>
3. Load the Stamen Maps for those who want a particular background: ‘terrain’ | ‘toner’ | ‘watercolor’.
<script src="//maps.stamen.com/js/tile.stamen.js"></script>
4. Create a container wherein you need to embed the Leaflet map.
<div id="myMap"></div>
5. Create a Leaflet map on your web page.
$("#myMap").am_map({ // options here });
6. Customize the Leaflet map with the next properties.
$("#myMap").am_map({ // center of the map center: [41.55, 2.45], // map height height: '400px', // 'terrain' | 'toner' | 'watercolor' | 'osm' background: 'osm', // initial zoom level iniZoom: 12 });
7. Add customized layer markers to the map.
$("#myMap").am_map('addLayer', { // unique name 'name' : 'myLayer', // marker point 'points' : [ 41.55, 2.45, { 'code' : 1, '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' : ' ', });
Manage layers
Add a layer
Layer settings
name
(string, required) : name of the layerpoints
(array, required) : point or array of pointsUTMzone
(string) : UTM zone codeUTMsouth
(boolean) : south hemisphereicon
(string) : custom HTML iconurl
(string) : if defined, the plugin enables a click event on every markerzoom
(integer) : sets the first layer zoom levellimitZoom
(integer) : sets the zoom level at which the layer is visible
Point definition Every point is defined as an array with the following structure:
Must Read: A Lightweight 3D Globe With Dotted World Map Using WebGL | COBE
0
(float, required) : latitude / x coordinate (UTM)1
(float, required) : longitude / y coordinate (UTM)2
(json) : { ['code'
: (string) ], ['name'
: (string) ], ['text'
: (string) ] }code
: identifier (used with the URL param on the click event)name
: title to be shown in the popup on the mouseover event.desc
: description to be shown in the popup on the mouseover event.
Simple point :
[ 45.09, 4.98 ];
Complete point:[ 45.17, 4.98, { 'code' : 1, 'name' : 'This is a point' ] );
See Demo And Download

Official Website(Lluisma): Click Here
This superior jQuery/javascript plugin is developed by Lluisma. For extra Advanced usage, please go to the official website.