mapbox example

100%

mapbox example

✓ Published0🌍 Public

Last edited Jan 11, 2017

Created on Jan 11, 2017

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.

AI-generated description

forked from <a href='http://bl.ocks.org/lewis500/'>lewis500</a>'s block: <a href='http://bl.ocks.org/lewis500/4bfd4c87cbb3f17661e6414a910ff89c'>mapbox vs leaflet</a>

mit Licensed

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

74% 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

72% match

Loading thumbnail…

Leaflet styling and interaction

This example demonstrates interactive mouse behaviors on a world map using Leaflet. Hovering a country highlights it with a thicker border and increased fill opacity, while clicking zooms the map to fit that country’s bounds. The map uses Stamen Toner tiles and loads country polygons from a GeoJSON file. D3 fetches the data, and Leaflet’s `L.geoJson` renders the shapes, with `onEachFeature` attaching `mouseover`, `mouseout`, and `click` handlers to apply and reset styles.

AAlan McConchie

72% match

Loading thumbnail…

Mapbox 1.X Reference Examples

This example showcases a collection of Mapbox GL JS code snippets, extracted from official documentation at version 1.12.0, demonstrating various interactive mapping techniques. It features an animated image overlay on a map, using the Mapbox GL JS API to handle tile rendering and camera controls. The snippets illustrate how to integrate custom vector tiles and geospatial data, with code for styling layers and managing user interactions. The project serves as a reference for common mapping tasks, such as adding markers, drawing polygons, and animating data over time.

CCurran Kelleher

71% match

Loading thumbnail…

GeoJSON Experiments

This example displays geographic data on an interactive Mapbox map, using the Mapbox.js library and a full-screen map div. It fetches GeoJSON data from a CouchDB view via a jQuery `$.getJSON` call, then loads the returned feature collection into the map’s `featureLayer` with `setGeoJSON`. The map is initialized with `L.mapbox.map` and centered on coordinates (10.1, 125.6) at zoom level 5, showing how dynamic GeoJSON can be rendered on a tiled basemap.

CCliffordAnderson

71% match

Loading thumbnail…

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

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.

Aackuser

71% match

Loading thumbnail…

Leaflet with D3 popups

A map of London displays two polygon regions, each opening a popup containing an animated bar chart built with D3. The charts summarize monthly data—such as swan bite injuries—using `d3.scaleLinear` and `d3.scaleBand` axes, with bars transitioning from zero height over one second. The example combines Leaflet’s `L.geoJSON` layer and `bindPopup` with a D3-created SVG, returning the popup content via a custom `chart` function that generates the visualization on demand.

Aandrew-reid

70% 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

70% match