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.