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 for creating a custom Leaflet Map where you can easily add tags for multiple interactive layers using popups using a simple API.

How to make use of it:

1. Load the mandatory jQuery library and Leaflet Map within the doc.

<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 primary 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' : ' ',

});

Create A Leaflet Map With Interactive Layers, am_map.js Plugin/Github


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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…