Leaflet development getting started, leaflet getting started

Leaflet development getting started, leaflet getting started

Leaflet Overview

Leaflet is a modern and open-source JavaScript library developed for building interactive maps for mobile devices. The code is only 33 KB, but it has most of the functions to develop online maps. The Leaflet Design adheres to the philosophy of simplicity, high performance, and good availability. It can operate efficiently on all major desktop and mobile platforms and will take advantage of HTML5 and CSS3 in modern browsers, it also supports access from the old browser. Supports extension of plug-ins. It has a friendly and easy-to-use API documentation and a simple and readable source code. Leaflet's powerful open-source library plug-ins cover all aspects of map applications, including map services, data provision, data formats, Geographic Encoding, route and route search, there are more than 140 ins for map controls and interactions.

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

Leaflet is a leading open-source JavaScript library designed for mobile devices. JS with a weight of 33 KB, all ing features required by most developers.

Leaflet has simple design, performance, and availability. It works effectively on all major desktop and mobile platforms, scalable plug-ins, has a beautiful, easy-to-use and proven API and a simple, easy-to-read source code, is a happy contribution.

Let's start with a small instance: Prepare a blank page

Here we create a map in the div of the map, add the tile selection, and then add a tag. In the pop-up text:

Before writing any code for a map, you need to prepare the map on the following page:

Documents that include the leaflet CSS file TITLE section:

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

(You can download this file or introduce it yourself. I will not describe it here). Click Download (stable version );

Includes the leaflet JavaScript file:

<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> (the id name can be set at will, but it must be the same as that defined in the following js Code ..)

Make sure that the defined ing container has a height. For example, by setting CSS (a height must be defined, because the specified id name cannot be obtained, this library does not set the height, you must set the height, as if div has no height by default ):

#mapid { height: 180px; }

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

Set Map

Let's create a map center. A beautiful Mapbox street tile is located in a certain location in Beijing. First, we map the initialization and setting of its view to the selected geographic coordinates and scaling level (the mapid must be consistent with the Set id ):

var mymap = L.map('mapid').setView([39.9788, 116.30226], 14);

By default (we didn't use any options to create a map instance), all mouse and touch interactions are enabled on the map, which has zoom-in and attribution control. (These can be controlled through js. Currently, they are just getting started. If you have a deep understanding of them, you can explore them yourself)

Note that setView does not return an explicit value when calling the map object-most leaflet methods, which allows convenient jQuery-like method control.

Next, we will add a brick layer to add our map. In this case, this is a Mapbox street brick layer. Creating a brick layer usually involves the tile image template setting URL (get you in Mapbox), 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 that all code is called div and leaflet. Js inclusion. That's it! Now you have a map of work leaflet.

Mark, circle, and polygon

In addition to the brick layer, you can easily add other things to the map, including the logo, line, polygon, circle, and pop-up window. Let's add a tag:

L. marker ([39.9788, 116.30226]). addTo (mymap). bindPopup ("Beijing tower <br>"). openPopup ();

Adding a circle is the same (except specifying the radius meter as the second parameter), but allows you to control how it looks to be selected as the last parameter when an object is created:

L. circle ([39.9908, 116.26625], 500, {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 ("Forbidden City ");

A pop-up window usually uses a specific object that you want to append some information to the map. The leaflet has a very convenient shortcut (like the method added above, you can directly add a leaflet or add another one. Actually, the same openPopup indicates whether to enable it by default ):

Marker. bindPopup ("Beijing Tower"). openPopup (); circle. bindPopup ("Summer Palace"); polygon. bindPopup (Palace Museum ");

Try to click on our object. BindPopup method height and specified HTML content pop-up your tag pop-up appears when you click an object, and openPopup method (FLAG) immediately open the pop-up.

You can also use the pop-up window layer (when you need more things than attaching a pop-up object ):

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 is opened before it is automatically disabled.

Event handling

Each time it occurs in leaflet, for example, when a user clicks on a map to mark or scale a change, the corresponding object sends an event, and you can subscribe to the function. It allows you to interact with users (the longitude and latitude of the position you click each time ):

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

Each object has its own set of events. For more information, see. The first parameter of the listener function is an event object, which contains useful information for an event. For example, map Click Event object (e in the above example) latlng attribute click position.

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 the leaflet development getting started tutorial. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!