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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.