Skip to main content
100%

Using Leaflet in TypeScript. Original code see http://leafletjs.com/examples/quick-start-example.html

✓ Published0🌍 Public
Aackuser
Last edited Feb 14, 2013
Created on Mar 13, 2017

This example demonstrates a basic interactive map built with the Leaflet JavaScript library, written in TypeScript. It shows a tile layer of London, along with a marker, a red circle, and a polygon, each bound to a popup that displays descriptive text. Clicking anywhere on the map opens a popup showing the clicked latitude and longitude. The code uses Leaflet’s `L.Map`, `L.TileLayer`, `L.Marker`, `L.Circle`, `L.Polygon`, and `L.Popup` APIs, with the tile layer sourced from CloudMade.

AI-generated description

Similar vizzes

Loading thumbnail…

Simple Leaflet Map

A simple interactive map centered on London demonstrates core Leaflet capabilities. The map displays OpenStreetMap tiles and includes a marker with a popup, a red circle, and a polygon, each bound to popups. Clicking anywhere on the map generates a popup showing the clicked latitude and longitude. The example uses the Leaflet JavaScript library and its `L.map`, `L.tileLayer`, `L.marker`, `L.circle`, `L.polygon`, and `L.popup` APIs to build the visualization.

Dd3noob
82% match
Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Ccharliemok
75% match
Loading thumbnail…

Simple Leaflet Map

This example displays a simple interactive map with four settlement markers, each opening a popup with its label. The map is built with Leaflet 0.7, using an OpenStreetMap tile layer. The code initializes a map centered on the first settlement and adds markers from a hardcoded array of coordinates, demonstrating basic Leaflet map creation, tile loading, and marker popup functionality in a plain HTML page.

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

Leaflet with D3 popups

A Leaflet map centered on London displays two GeoJSON polygons, each opening a D3-generated popup upon clicking. The popup renders an animated bar chart from the feature's `data` property, with axes, rotated tick labels, and color-coded bars. The code uses Leaflet's `L.geoJSON` and `bindPopup` to integrate the custom chart, while D3 v4 creates the SVG, scales, axes, and transitions. Tile imagery comes from OpenStreetMap via WMFLabs.

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

mapbox example

Two interactive maps render 10,000 randomly generated GeoJSON points around London, comparing Mapbox GL JS and Leaflet performance. The left panel uses Mapbox GL JS with a custom map style, rendering circle layers with hover popups via `queryRenderedFeatures`. The right panel uses Leaflet 1.0.1 with Mapbox raster tiles, employing `L.circleMarker` for points and mouseover-bound popups. Both visualizations share identical fake data and styling, highlighting differences in marker rendering and interaction between the two libraries.

AAlan McConchie
71% match
Loading thumbnail…

Exemple de Leaflet sans Browserify

A Leaflet map displays a set of five point features from a local GeoJSON file, each with a popup bound to its `ATT1` property. The code initializes the map with an OpenStreetMap tile layer and a custom marker icon. It uses the Leaflet JavaScript API, including `L.map`, `L.tileLayer`, `L.geoJson`, and `L.marker`, to render the data. The map is centered on London at a zoom level of 14.

TThomasG77
71% match