Create A Leaflet Map And Add Multiple Interactive Layers | am_map.js

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 NameLeaflet Map JS
Author NameLluisma
CategoryMap
Official PageClick Here
Official Websitegithub.com
Publish DateMarch 27, 2021
Last UpdateAugust 18, 2023
DownloadLink Below
LicenseMIT

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

leaflet-map-js

Official Website(Lluisma): Click Here

This superior jQuery/javascript plugin is developed by Lluisma. For extra Advanced usage, please go to the official website.

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *