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

<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>

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

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

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

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

$("#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
});

$("#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 layer
• points (array, required) : point or array of points
• UTMzone (string) : UTM zone code
• UTMsouth (boolean) : south hemisphere
• icon (string) : custom HTML icon
• url (string) : if defined, the plugin enables a click event on every marker
• zoom (integer) : sets the first layer zoom level
• limitZoom (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.