Leaflet.FileLayer Plugin

100%

Leaflet.FileLayer Plugin

✓ Published0🌍 Public

Last edited Apr 20, 2014

Created on Dec 2, 2013

This example shows an interactive map centered on Wellington, New Zealand, with a Leaflet.js tile layer from OpenStreetMap. The Leaflet.FileLayer plugin adds a folder-open control button, enabling users to load local GPS trace files in GPX, KML, or GeoJSON formats. The map renders loaded point data as red circle markers, with lines and polygons styled in red using the plugin’s `layerOptions` and `pointToLayer` callbacks. It also calls `fitBounds` to automatically zoom to the loaded data’s extent. The code uses Leaflet’s `L.map`, `L.tileLayer`, and the `L.Control.fileLayerLoad` API from the plugin.

AI-generated description

An example of a map presented with leaflet.js and the Leaflet.FileLoader plugin which will allow you to load a GPS trace in a GPX, KML or GeoJSON format.

Similar vizzes

Loading thumbnail…

Simple Leaflet Map

This example shows an interactive Leaflet map centered on Wellington, New Zealand, with a layer control that lets the user switch between two base tile layers: OpenStreetMap and OpenTopoMap. Using the Leaflet 1.6.0 JavaScript API, it defines two `L.tileLayer` instances—one pulling raster tiles from `tile.openstreetmap.org` and the other from `tile.opentopomap.org`—and adds them as selectable base layers via `L.control.layers`. The map itself is initialized with `L.map`, set to a zoom level of 14, and displays only the OSM layer initially.

Dd3noob

83% match

Loading thumbnail…

Simple Leaflet Map

This example shows an interactive map centered on Wellington, New Zealand, with a choice between two base tile layers. It uses Leaflet.js to render map tiles and handles layer switching via a control widget. The map includes an OpenStreetMap tile layer and a Thunderforest landscape layer, with proper attribution for both data sources. The code initializes a map element and uses `L.tileLayer` and `L.control.layers` to manage the selectable background layers.

Dd3noob

83% match

Loading thumbnail…

Simple Leaflet Map

This example shows a Leaflet map centered on Wellington, New Zealand, with selectable base layers and an overlay of local landmarks. It uses Leaflet’s `L.map`, `L.tileLayer`, and `L.control.layers` to switch between OpenStreetMap and Thunderforest landscape tiles. An `L.LayerGroup` contains four markers with popups and a polyline connecting the points, which can be toggled as an overlay. The code also uses `L.marker` and `L.polyline` to add geographic features to the map.

Dd3noob

82% match

Loading thumbnail…

Full Screen Leaflet Map

This example displays an interactive map centered on Wellington, New Zealand, using Leaflet.js and OpenStreetMap tile layers. The map fills the entire browser viewport through CSS rules that set the html, body, and map container to 100% height and width. It initializes the map with a specific latitude, longitude, and zoom level, then attaches an OpenStreetMap tile layer with attribution and a maximum zoom of 18. The code relies on Leaflet’s `L.map`, `L.tileLayer`, and the `setView` method to render the full-screen interactive visualization.

Dd3noob

79% match

Loading thumbnail…

Simple Leaflet Map

This example displays an interactive map of New Zealand’s Wellington region, centered on coordinates -41.2858, 174.78682 at zoom level 14. The visualization uses the Leaflet.js library to render map tiles from OpenStreetMap, with the `L.map` function creating the map and `L.tileLayer` adding the base tile layer. The map is presented with attribution to OpenStreetMap contributors and is set within a 600 by 400 pixel HTML container.

Dd3noob

79% match

Loading thumbnail…

Leaflet and D3 Map

This example combines Leaflet and D3 to render a blue GeoJSON rectangle polygon that pans and zooms with an OpenStreetMap tile layer. It uses D3’s `d3.geo.path` with a custom `projectPoint` function that calls Leaflet’s `latLngToLayerPoint`, while a `viewreset` handler recalculates the SVG overlay’s bounds and transform. The map is centered on Wellington, New Zealand, and the rectangle’s path is drawn as SVG elements within Leaflet’s overlay pane.

Dd3noob

78% match

Loading thumbnail…

Simple Leaflet Map

This map displays Wellington, New Zealand, with a set of geolocated markers for landmarks like Te Papa and the Embassy Theatre, connected by a polyline route. It uses Leaflet.js with a swappable base layer (OpenStreetMap or OpenTopoMap tile servers) and a user-controlled overlay group. The code constructs a layer group for the markers and line, then adds a leaflet control to toggle between the two tile layers and the overlay.

Dd3noob

77% match

Loading thumbnail…

Simple Leaflet Map

A simple interactive map of central Wellington, New Zealand, rendered with Leaflet 1.6.0 and OpenStreetMap tiles. The view centers on a set of coordinates, over which a red polyline with custom styling—including weight, opacity, and a dash pattern—is drawn using `L.polyline`. The map supports panning and zooming through Leaflet's built-in interactions.

Dd3noob

77% match