Skip to main content
100%

Leaflet Web Map

✓ Published0🌍 Public
Aandreaangeli
Last edited Apr 24, 2016
Created on Apr 24, 2016

This interactive web map displays a route through downtown Toronto as a red polyline overlaid on OpenStreetMap tiles. The map initializes with a view centered at latitude 43.64701 and longitude -79.39425 at zoom level 15, with scroll-wheel zoom disabled. Using the Leaflet JavaScript library and its CSS stylesheet, the code defines an array of six coordinate points representing the path and renders them via `L.polyline` with red color and full opacity. The base tiles come from OpenStreetMap’s tile server, with attribution included. The map container is a div with fixed dimensions of 960 by 500 pixels.

AI-generated description

forked from <a href='http://bl.ocks.org/uafrazier/'>uafrazier</a>'s block: <a href='http://bl.ocks.org/uafrazier/e00bbb2f864d39c293ed'>Leaflet Map with a Polyline</a>

Similar vizzes

Loading thumbnail…

Leaflet Web Map

This example shows an interactive web map centered on a location in Toronto, with a red rectangle overlay marking a specific area. The map uses Leaflet 0.7.3, initializing a map object with a set view at latitude 43.64701, longitude -79.39425, and zoom level 15, while disabling scroll wheel zoom. It loads OpenStreetMap tiles as the base layer with attribution, and adds the rectangle via `L.rectangle()` with defined geographical bounds and basic styling. The map is rendered in a fixed-size div with a width of 960 pixels and height of 500 pixels.

Aandreaangeli
86% match
Loading thumbnail…

Leaflet Web Map

This example displays an interactive web map centered on a specific location in Toronto, with a purple polygon overlaid to highlight a defined area. The map uses the Leaflet JavaScript library version 0.7.3, pulling base tiles from OpenStreetMap. The view initializes at latitude 43.64701, longitude -79.39425, with a zoom level of 15 and scroll-wheel zoom disabled. A polygon is drawn from a hardcoded array of three coordinate pairs using `L.polygon`, styled with a purple color and partial opacity. The map container is a fixed 960 by 500 pixel div.

Aandreaangeli
86% match
Loading thumbnail…

Leaflet Web Map

This example displays an interactive web map centered on a location in Toronto, with a single default marker placed at the map’s center. It uses the Leaflet JavaScript library, version 0.7.3, to create the map object and render base tiles from OpenStreetMap. The map’s initial view is set to latitude 43.64701 and longitude -79.39425 at zoom level 15, with scroll-wheel zoom disabled. The code references the Leaflet CSS for styling and calls `L.map`, `L.tileLayer`, and `L.marker` to construct the visualization.

Aandreaangeli
84% match
Loading thumbnail…

Leaflet Web Map

This example displays an interactive web map centered on a location in Toronto, with a single default marker placed at the map’s center. It uses the Leaflet JavaScript library, version 0.7.3, to create the map object and render base tiles from OpenStreetMap. The map’s initial view is set to latitude 43.64701 and longitude -79.39425 at zoom level 15, with scroll-wheel zoom disabled. The code references the Leaflet CSS for styling and calls `L.map`, `L.tileLayer`, and `L.marker` to construct the visualization.

Aandreaangeli
84% match
Loading thumbnail…

Simple Leaflet Map

A simple interactive map displays a geographic area centered on a set of coordinates, with a single red polyline overlaid on base tiles from OpenStreetMap. The map is created with Leaflet, using its `L.map` and `tileLayer` APIs to render the tile background. The polyline, defined as an array of latitude and longitude pairs, is added with the `L.polyline` API and styled with options for color, weight, opacity, dash pattern, and line join. The example demonstrates basic Leaflet map creation and vector overlay customization.

Dd3noob
70% match
Loading thumbnail…

My bike route to UofT.

This visualization animates a bike route to the University of Toronto on a Leaflet map with a dark CartoDB basemap. A moving marker travels along the path, which is drawn from a series of GeoJSON points containing timestamps. The code uses d3.json to load the GeoJSON and d3.geo.path with a custom Leaflet projection to convert coordinates into SVG paths, while d3.svg.line connects the points into a single route. A transition animates the marker along the line, with the path and waypoints also rendered in SVG.

MMbrownshoes
68% match
Loading thumbnail…

Leaflet starter

This example demonstrates a basic interactive map centered on Vancouver, Canada, using the Leaflet JavaScript library. It initializes a map view with coordinates [49, -123] at zoom level 10, then adds a tile layer from Thunderforest’s “spinal-map” style. The map renders OpenStreetMap data as background tiles, with the `L.map` and `L.tileLayer` APIs handling map creation and layer management. The page is styled to fill the entire viewport, and the map div occupies full height. No additional data or interactions are included beyond the base map display.

LLiddler
68% match
Loading thumbnail…

Leaflet Draw

This example demonstrates an interactive map interface built with Leaflet and the Leaflet Draw plugin, allowing users to overlay and edit geographic features on top of selectable base layers. It displays OpenStreetMap, CARTO light tiles, and Google satellite imagery, while a feature group holds drawn polygons and polylines. The code loads GeoJSON data from a CARTO SQL API query, populating the map with predefined areas of interest from a dataset about New York. The drawing controls enable polygon creation with intersection restrictions and area measurement, though the event handler for adding newly created layers is commented out.

Aandrewbt
67% match