Open source Lightweight Mobile-friendly JS Map Library--leaflet Learning Tutorial

Leaflet is a modern, open source JavaScript library developed for the construction of interactive maps that are good for mobile devices. The code is only a KB, but it has most of the functionality of developing an online map. Leaflet's philosophy of simplicity, high performance and usability is designed to work efficiently on all major desktop and mobile platforms, leveraging the advantages of HTML5 and CSS3 in modern browsers, while also supporting legacy browser access. Supports plug-in extensions with a friendly, easy-to-use API documentation and a simple, readable source code. Leaflet's powerful open Source library plug-in involves more than 140 types of maps, including map services, data delivery, data formats, geocoding, route and Route search, map controls, and interactive plugins. These controls enrich the functionality of the leaflet, and can also be very convenient to implement custom controls with good extensibility. Website

# # #LeafLet快速入门教程 This tutorial will step-by-step guide you how to use leaflet to load maps, use markers, polylines, and pop-ups to handle events. # # #如何用leaflet快速加载地图

• Introducing CSS Files

  <rel= "stylesheet"  href= "http://cdn.leafletjs.com/leaflet-0.7.3/ Leaflet.css "/>

  Reference JavaScript

  <src= "Http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></ Script >

  Page to add a div container as a map

  <id= "Map"></div>

  Determine the height of the map container

  #map {height:180px;}

• # # # #设置地图 Set the map center and zoom level

   var map = l.map (' map '). Setview ([51.505, -0.09], +); 

  Add layer

   l.tilelayer (' http://{s}.tiles.mapbox.com/v3/mapid/{z}/{x}/{y}.png '  ' MAP data &copy; <a href= "http://openstreetmap.org" >OpenStreetMap</a> contributors, <a href= "/http/ Creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</A>, Imagery©<a href=" http://mapbox.com ">Mapbox </a> '  18 '). AddTo (map);  

  # # # #添加标注, Circle, Polygon

• # # # # #添加标注

   var  marker = L.marker ([51.5, -0.09]). AddTo (map); 

  # # # # #添加圆形

   var  circle = l.circle ([51.508, -0.11], 500 ' red '  ' #f03 '  0.5 

  # # # # #添加多边形

   var  polygon = L.polygon ([[ 51.509,- 0.08 ", [ 51.503, -0.06 51.51, 0.04 7 

• # # # # #为覆盖物标注, circles, polygons add pop bubbles

  Marker.bindpopup ("<b>hello world!</b><br>i am a popup.") ). Openpopup ();    Circle.bindpopup ("I am a circle.") );    Polygon.bindpopup ("I am a polygon.");

• # # # #处理事件

• function Onmapclick (e) {     alert ("clicked the map at" + e.latlng);    }    Map.on (' click ', Onmapclick);

• Transfer from Thinkgis

Open source Lightweight Mobile-friendly JS Map Library--leaflet Learning Tutorial