Skip to content

Latest commit

 

History

History
100 lines (71 loc) · 4.83 KB

learn-leaflet.md

File metadata and controls

100 lines (71 loc) · 4.83 KB
Raw

Learn Leaflet

  • Github Repository - Testing Examples: sahilrajput03/learn-leaflet
  • DOCS: References: Click here
  • Panning: It allows the user to scroll the map in any direction. This is useful when you wish to view the area immediately adjacent to the area currently shown on the screen. To pan the map, perform the following steps: 1. Using the pointer, click the map and drag the pointer in the direction you wish to pan the map.
  • Quick Start: Standalone Example: Click here

My slasher Task: CONTINUE_ON_THIS_THREAD

  • EventByLocation: Click here, Task Requirements: Click here, Mockup: Click here
  • SO: Zoom to fit all markers in Mapbox or Leaflet: Click here
  • DOCS: Zoom Levels: Click here
  • MY MONGODB_NOTES: Finding distance between two gps locations: Click here
  • Marker: Click here - Instantiates a Marker object given a geographical point and optionally an options object. L.Marker is used to display clickable/draggable icons on the map. Extends Layer. 
    // syntax
L.marker(<LatLng> latlng, <Marker options> options?)

// Usage
L.marker([50.5, 30.5]).addTo(map);
  • Layer: Click here - A set of methods from the Layer base class that all Leaflet layers use. Inherits all methods, options and events from L.Evented. 
    var layer = L.marker(latlng).addTo(map);
layer.addTo(map);
layer.remove();

DOCS: Map > Map Methods

To zoom to a given LatLngBound, I can use:

  • fitBounds(LatLngBounds, fitBoundsOptions?): Sets a map view that contains the given geographical bounds with the maximum zoom level possible.
  • flyToBounds(LatLngBounds, fitBoundsOptions?): Sets the view of the map with a smooth animation like flyTo, but takes a bounds parameter like fitBounds.

DOCS: LatLngBounds: Click here

Represents a rectangular geographical area on a map.

var corner1 = L.latLng(40.712, -74.227),
corner2 = L.latLng(40.774, -74.125),
bounds = L.latLngBounds(corner1, corner2);

// A LatLngBound value has coordinates for `top-right` and `bottom-left` points of the bounded rectangular region.
// For e.g,  {_southWest: bottom_left_latLng, _northEast: top_right_latLng }
// { "_southWest": {"lat": 41.050832274225485, "lng": -74.9698495599688}, "_northEast": {"lat": 41.05092210575319, "lng": -74.96973044003121}}


// All Leaflet methods that accept LatLngBounds objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:
map.fitBounds([
    [40.712, -74.227],
    [40.774, -74.125]
]);

DOCS: Pan

  • Pan the map to a given center via panTo(LatLng, PanOptions?)
  • Pans the map by a given number of pixels (animated) via panBy(<Point> offset, <Pan options> options?)

DOCS: LatLng: Click here

Represents a geographical point with a certain latitude and longitude.

var latlng = L.latLng(50.5, 30.5);

// All Leaflet methods that accept LatLng objects also accept them in a simple Array form and simple object form (unless noted otherwise), so these lines are equivalent:
map.panTo([50, 30]);
map.panTo({lng: 30, lat: 50});
map.panTo({lat: 50, lng: 30});
map.panTo(L.latLng(50, 30));

DOCS: Point

Source: Click here

Represents a point with x and y coordinates in pixels.

var point = L.point(200, 300);

// Creates a Point object with the given x and y coordinates. If optional round is set to true, rounds the x and y values.
L.point(<Number> x, <Number> y, <Boolean> round?)

// Expects an array of the form [x, y] instead.
L.point(<Number[]> coords)

// Expects a plain object of the form {x: Number, y: Number} instead.
L.point(<Object> coords)


// All Leaflet methods and options that accept Point objects also accept them in a simple Array form (unless noted otherwise), so these lines are equivalent:
map.panBy([200, 300]);
map.panBy(L.point(200, 300));