Skip to main content
100%

Leaflet Web Map

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

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.

AI-generated description

forked from <a href='http://bl.ocks.org/uafrazier/'>uafrazier</a>'s block: <a href='http://bl.ocks.org/uafrazier/6e09955642ac665f218c'>Leaflet Map with a Polygon</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
90% 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
88% 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
88% match
Loading thumbnail…

Leaflet Web Map

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.

Aandreaangeli
86% 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
73% match
Loading thumbnail…

Leaflet - geoJSON - Polygons

This example creates an interactive web map using the Leaflet library, displaying a custom GeoJSON MultiPolygon feature as a shaded area over OpenStreetMap tiles. The map is initialized with a center point and zoom level, then a tile layer provides the base map. A GeoJSON object defines two polygon shapes—one with a hole—which are added directly to the map via Leaflet’s `L.geoJSON` API. The map uses the VizJS library for tile configuration and fills the entire viewport.

NNPashaP
72% 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
71% match
Loading thumbnail…

Leaflet example | CartoDB.js

This example combines CartoDB.js with Leaflet to display a choropleth-style map of urban areas, overlaying vector polygons from a CartoDB SQL query. The map uses a Stamen toner tile layer as the base, with a CartoDB visualization layer added via `cartodb.createLayer`. The code enables hover interactions on the sublayer, showing a popup with the `area_sqkm` attribute, and separately renders simplified GeoJSON from the `ne_50m_urban_areas` table using `L.geoJson`. Mouseover events highlight polygons by changing their stroke color to red, while mouseout resets the style.

Aandrewxhill
70% match