Leaflet Development Introductory Tutorials _javascript Tips

Leaflet Brief Introduction

Leaflet is a modern, open source JavaScript library developed for the construction of interactive, well suited to mobile device maps. The code is only a KB, but it has most of the functionality to develop online maps. Leaflet design adheres to the philosophy of simplicity, high performance and usability, and works efficiently on all major desktops and mobile platforms, leveraging the advantages of HTML5 and CSS3 in modern browsers, as well as supporting old browser access. Support for plug-in extensions, with a friendly, Easy-to-use API documentation and a simple, readable source code. Leaflet powerful open Source Library Plug-ins cover various aspects of map application including map services, data provision, data format, geocoding, route and Route search, map control and interactive types of plug-ins have a total of more than 140.

September 27, 2016 -1.0leaflet, the fastest, most stable and rigorous leaflet, finally came out!

Leaflet is an interactive map of the leading open source JavaScript library designed for mobile devices. KB of JS, all the features required to map most developers.

Leaflet design is simple, performance and usability. It effectively works on all major desktop and mobile platforms, can be expanded by Plug-ins, has a beautiful, easy-to-use and well-documented API and a simple, readable source code that is a happy contribution.

Let's start with a little example: Prepare a blank page

Here we create a map of the div on the map, add the tiles to the selection, and then add a tag that pops up some text:

Map before you write any code, you need to make a preparation step on the following page:

Documents that include the title section of the leaflet CSS file:

<link rel= "stylesheet" href= "Https://unpkg.com/leaflet@1.0.1/dist/leaflet.css"/>

(No this file can be downloaded, you can also introduce themselves, the following no longer described), click to download (stable version);

Include flyer JavaScript files:

<script src= "Https://unpkg.com/leaflet@1.0.1/dist/leaflet.js" ></script>

Put a DIV element with a specific ID and you want your map:

<div id= "MapID" ></div>
(id name can be arbitrarily set, but must be the same as the following JS code definition. ）

Make sure that the defined mapping container has a height, such as by setting the CSS (you must define a height because you cannot get the specified ID name, so the library does not have a high processing setting and must set the height, as the div default is not high):

#mapid {height:180px;}

Now you are ready to initialize the map and do something with it.

Set up a map

Let's create a map of the center of Beijing where beautiful Mapbox street tiles. First we map the view to initialize and set it to our chosen geographical coordinates and zoom level (the MapID must be consistent with the ID set):

var mymap = l.map (' MapID '). Setview ([39.9788, 116.30226], 14);

By default (we do not create a map instance with any option), all mouse and touch interactions are enabled on the map, and it has amplification and attribution control. (These can be controlled through JS, at present, just get started, have in-depth understanding of the can own groping)

Note The Setview call returns a Map object--most leaflet methods behave like this without returning an explicit value that allows easy control of the class jquery method.

Next, we will add a brick layer to increase our map, in this case it is a mapbox street brick layer. Create a brick layer that usually involves a tile image of the template settings url (in Mapbox get You), attribution text and the maximum zoom level layer:

L.tilelayer (' Https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accesstoken} ', {
 Attribution: ' Map data©<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> ',
 maxzoom:18,
 ID: ' your.mapbox.project.id ',
 accesstoken: ' Your.mapbox.public.access.token '
}). AddTo (Mymap);

Make sure all the code is called Div and flyer. JS contains. That's it! Now you have a job leaflet map.

Markers, circles, and polygons

In addition to the brick layer, you can easily add other things to the map, including logos, polylines, polygons, circles, and pop-up windows. Let's add a tag:

L.marker ([39.9788, 116.30226]). AddTo (Mymap).
 bindpopup ("Beijing Building <br>"). Openpopup ();

Adding a circle is the same (in addition to specifying a RADIUS meter as the second parameter), but allows you to control how it appears to be the last argument when creating an object by selecting it:

L.circle ([39.9908, 116.26625], +, {
 color: ' Red ',
 fillcolor: ' #f03 ',
 fillopacity:0.5
}). AddTo ( MYMAP). Bindpopup ("Welcome to the Summer Palace");

Adding a polygon is simple:

L.polygon ([
 [39.92096, 116.38591],
 [39.91079, 116.38676],
 [39.91118, 116.3962],
 [39.92014, 116.39482]
). AddTo (Mymap). Bindpopup ("Imperial Palace");

Pop-up windows typically use a specific object that you want to attach to a map. Flyers have very handy shortcuts (like the one added above, add directly or, add separately, actually the same openpopup is the default open):

Marker.bindpopup ("Beijing Mansion"). Openpopup ();
Circle.bindpopup ("Summer Palace");
Polygon.bindpopup (Forbidden City);

Try clicking on our object. The Bindpopup method height with the specified HTML popup pop-up appears when you click on the object, and the Openpopup method (tag) immediately opens the pop-up.

You can also use the pop-up window layer (when you need something more than an attached pop-up object):

The var popup = L.popup ()
 . SETLATLNG ([51.5, -0.09]).
 setcontent ("I am a standalone popup.").
 Openon (MYMAP);

Here we use Openon instead of suffering because it handles automatic shutdown before opening pop-up when opening a new good usability.

Handling Events

Each time it occurs in leaflet, such as the user clicks on the map to mark or zoom the change, the corresponding object sends an event, and you can subscribe to the feature. It allows you to interact with the user (shown here is the latitude and longitude of each location you click):

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

Each object has its own set of events, and for more information, see the documentation. The first parameter of the listener function is an event object that contains the useful information that occurred. For example, the map Click event Object (E in the above example) latlng the location where the property clicked.

Let's improve our example by using a pop-up warning:

var popup = L.popup ();
function Onmapclick (e) {
 popup
  . SETLATLNG (E.LATLNG)
  . SetContent ("You clicked the map at" + E.latlng.tostring ())
  . Openon (Mymap);
}
Mymap.on (' click ', Onmapclick);

The above is a small set to introduce the leaflet of the development of the tutorial, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!