Maps Documentation

Leaflet Maps

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

1. Required Vendor files:
                      
                          <link rel="stylesheet" type="text/css" href="../pathto/leaflet/leaflet.css">
                          <script src="../pathto/leaflet/leaflet.js"></script>
                      
                  
2. HTML Markup:
                      
                          <div id="maps-leaflet-basic" class="maps-leaflet-container"></div>
                      
                  
3. Initialization:
                      
                      $(document).ready(function () {
                          $(".maps-leaflet-container").css("height", "450px"); // you can add given style in .css file
                          // initialize the basic map
                          var mapsLeafletBasic = L.map('maps-leaflet-basic').setView([42.35, -71.08], 10); //.setView([latitudes_value, longitudes_value], Zoom_value)
                          L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                              attribution: 'Map data © OpenStreetMap',
                              maxZoom: 18,
                          }).addTo(mapsLeafletBasic);
                      });
                      
                  

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://leafletjs.com/
Template Page https://pixinvent.com/modern-admin-html-2.0/html/ltr/vertical-menu-template/maps-leaflet.html

jVector Maps

jVectorMap is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web. It provides numerious features like smooth zooming and panning, fully-customizable styling, markers, labels and tooltips.

1. Initialize the plugin by referencing the necessary files:
                    
                        <link rel="stylesheet" href="/path/to/jquery-jvectormap-2.0.1.css" type="text/css" media="screen"/>
                        <script src="/path/to/jquery.js"></script>
                        <script src="/path/to/jquery-jvectormap-2.0.1.min.js"></script>
                        <script src="/path/to/jquery-jvectormap-world-mill.js"></script>
                    
                
2. Define container.
                    
                        <div id="world-map" style="width: 600px; height: 400px"></div>
                    
                
3. Basic usage may look something like this.
                    
                        $('#world-map').vectorMap({map: 'world_mill'});
                    
                

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link http://jvectormap.com/
Github Page https://github.com/bjornd/jvectormap
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/vector-maps-jvector.html