Leaflet From Scratch With A GeoDjango Project

Explore the central leaflet map class (L.map) and its map options, events, methods, and properties, including HTML element initialization, resize events, and access to map panes.

Explore how leaflet map controls enable users to switch base maps like OpenStreetMap standard and stadium maps, toggle overlays, and customize position, collapse, and styling.

Learn how raster layers power base maps in Leaflet by using PNG or JPEG images, and overlay a static image with a defined boundary via L.imageOverlay and layer control.

Explore vector layers in Leaflet, including points, lines, and polygons, and learn to display, style (e.g., choropleth), and interact with markers, popups, tooltips, and JSON data.

Explore Leaflet map options for the central map in a GeoDjango project: zoom snap, zoom delta, max bounds, world copy jump, no wrap, and adjust inertia and linearity.

Explore leaflet geolocation events by using map.locate to trigger location found and location error, then display a marker and radius circle with latitude, longitude, and accuracy.

Explore the Leaflet central class methods, including calculating distance between coordinates, and learn to create markers on click, manage coordinates in an array, and log the distance to the console.

Explore the Leaflet map class properties, including controls and interactions like dragging, and learn to enable or disable handlers, plus options such as locate, zoom, pan, and fit band.

Explain how latitude and longitude define a location, with the equator as zero latitude, Greenwich as zero longitude, and north/south and east/west signs; demonstrate clicking a map to print coordinates.

Learn to implement custom marker icons in Leaflet for a GeoDjango project by creating an icon with iconUrl, iconSize, popupAnchor, and iconAnchor, then apply it to markers.

Learn to use the Leaflet diff icon for markers, which renders via an HTML element rather than an image. Initialize with a class and size, then style with CSS.

Learn to implement Leaflet polylines, including continuous and multi polylines, using coordinate arrays and color options, and enable dynamic drawing with click events or the Leaflet draw plugin.

Enhance dynamic polyline drawing to support multiple polylines in Leaflet, finish with double clicks, manage latitude and longitude points, and convert the result to a JSON multi line string.

Explore Leaflet polyline options, including the smooth factor, color, weight, and interactivity, and learn how smoothing affects performance and line accuracy when drawing polylines.

Learn how to draw polygons dynamically in Leaflet, including single and multi polygons with holes, by adapting polyline logic to polygon handling.

Extend Leaflet control to build a custom draw polygon plugin that toggles dynamic polygon drawing with a button, using onAdd, a factory function, and DOM utilities.

Enable dynamic polygon drawing in a Leaflet plugin by toggling a draw active state on click, turning red when active and white after double-click to stop drawing.

Add rectangle overlays in Leaflet by creating an L.rectangle with bounds from two diagonally opposite corners, using an array or LatLngBounds, and apply styling before adding to the map.

Learn to add circle overlays in leaflet with two methods: l.circle (meters) and l.circleMarker (pixels), including practical code examples and zoom behavior.

Explore scalable vector graphics (svg), an xml-based markup language for 2d vector drawings, and learn to implement svg overlays in Leaflet with boundaries and viewbox.

Overlay an existing SVG on a Leaflet map using image overlay, set the SVG URL and bounds, and adjust the boundary for proper sizing.

Learn to group multiple layers into a single Leaflet layer group, then add or remove them from the map, and note the events limitation versus a feature group.

Learn how to attach click events and popups to a leaflet layer group by iterating over each layer, enabling interactivity for svg overlays, and computing centers for popups.

Discover feature group in Leaflet, an extension of layer group that enables attaching popups and mouse events, with easy initialization and styling across members.

Explore how to use GeoJSON with Leaflet, including creating point, polygon, and line features with coordinates, and fetch and display european city data on a map.

Load a json layer on a Leaflet map using get and same-origin options to show city names in popups, then filter by active and render circle markers with styling.

Make your fetch API and GeoJSON handling for Leaflet generic and reusable by wrapping them in functions that accept a URL and layer name, and add overlays to layer controls.

Style point data in leaflet by configuring L.circle options to control borders and fills, adjusting stroke, color, weight, opacity, and fill color for distinct map points.

Learn how to style point features in Leaflet using mouse over and mouse out events to apply per-feature hover styles and reset to default, by targeting e.layer and set style.

Style point data in leaflet by using a pointToLayer function to return either L.circleMarker or L.marker based on city name, with conditional styling and a switch-based approach.

Learn to style line strings in Leaflet by fetching json data, apply a style function to color lines orange, and conditionally bind popups based on feature properties.

Learn to style polygons in leaflet by applying red color and full opacity to European country polygons using layer.setStyle and onEachFeature, with popups for country names.

Style polygons in leaflet by applying property-based colors for choropleth maps, using switch logic to color Austria red and Switzerland blue, and handling properties correctly.

Learn how to order layers in leaflet using bring to front and bring to back, ensuring cities sit above countries by placing the GeoJSON layer at the back.

Learn how to control leaflet layer order with map panes and z-index, assigning custom panes for Europe and European countries, and creating JSON layers to ensure precise layer stacking.

Overlay video on a Leaflet map with L.videoOverlay, using a boundary and controls like autoplay and interactivity. The HTML video element provides play and pause within the layer.

Describe the web map service (WMS) standard and demonstrate using WMS in Leaflet with a tile layer, base URL, layers, formats, and get capabilities and get map.

Learn to create and display a WMS layer in leaflet with L.tileLayer.WMS, using a base URL, layers, png format with transparency, and a bounding box to focus on Australia.

Learn web feature service basics, including get capabilities and get feature, and consume WFS data in JSON with Leaflet by constructing requests for Australian coastal waters, comparing WFS and WMS.

Fetch and display WFS data in a leaflet map by converting JSON coordinates to latitude and longitude with CRS 4326, then load as a GeoJSON layer.

Explains map projections as methods to represent earth on a flat surface, introduces three families—cylindrical, conical, planar—and distinguishes geographic from projected coordinate reference systems.

Learn how to switch the leaflet base map from 3857 to 4326 (wgs 84) by configuring the map view and using a 4326 base map from maptiler.

Extend leaflet to support non-default coordinate reference systems with the Proj4Leaflet plugin; download and include two scripts after the leaflet library, then configure the CRS with code and definition.

Learn to extend leaflet with Proj4Leaflet to display a Canberra aerial imagery WMS layer, configure CRS options, bounding box, and layer parameters, and center the map.

Explore map projection methods in Leaflet and learn how to convert geographical coordinates to pixel coordinates using project, and how container point to layer point transforms work.

Explore the leaflet draw plugin to create and edit vector features on maps, including setup via CDN, CSS/JS assets, and event-driven integration with a feature group.

Explore how to cluster point data with the leaflet marker cluster plugin, including CDN or npm setup, initialize an L.markerClusterGroup, and use hover, zoom, and spider legs clustering.

Explain Leaflet event objects and listeners, showing how an event argument exposes common properties like type and target, plus type specific data such as latitude and longitude.

Learn how to control browser features with Leaflet global switches, including L mode touch and L disable 3D, and prevent library conflicts using the no conflict method and version check.