Leaflet - geoJSON - Polygons

100%

Leaflet - geoJSON - Polygons

✓ Published0🌍 Public

Last edited Jan 21, 2018

Created on Jan 21, 2018

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

via:geojson.io

This example displays a single GeoJSON polygon—a rectangular region over the Pacific Northwest—on an interactive Mapbox map. The code loads the GeoJSON file via jQuery’s `$.getJSON`, then uses `L.geoJson` to add the polygon layer and automatically fits the map’s bounds to the feature. For each layer, it extracts the feature’s `properties` object and generates an HTML table, which is then bound as a popup using `bindPopup`. The visualization relies on Mapbox.js and Leaflet’s tile layer for rendering, with popups that reveal any associated attribute data.

CCaged

76% match

Loading thumbnail…

adding geojson to leaflet map

This example demonstrates how to add multiple layers and an interactive marker to a Leaflet map. The map is initialized using the Leaflet JavaScript library and displays an OpenStreetMap tile layer alongside a Google satellite tile layer, both added to the map via the `tileLayer` and `addTo` functions. A marker is placed at the center coordinates (33.5846, -101.8456) with a popup bound to it. The data is rendered from the OpenStreetMap and Google tile servers, with the map view set using `.setView`.

SSam Hege

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

74% match

Loading thumbnail…

Leaflet - MapTiles

This example shows a full-screen interactive map that allows the viewer to switch between dozens of different tile layers, ranging from satellite imagery and street maps to terrain, watercolor, and dark matter styles. The code uses the Leaflet library to render the map and manage layer switching, while pulling tile URLs and attribution strings from the viz.js `viz.leaflet.tiles` API. It includes base layers from providers such as OpenStreetMap, Thunderforest, Stamen, Esri, and CartoDB, demonstrating how to assemble a multi-provider tile switcher in a single HTML page.

NNPashaP

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

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

73% match

Loading thumbnail…

Leaflet - default

This example displays a full-screen interactive map of the United States, centered on the country with an initial zoom level of five. It uses the Leaflet JavaScript library to create the map view and a tile layer from Esri’s NatGeoWorldMap, providing detailed geographic and political boundaries. The map relies on the `L.map` and `L.tileLayer` APIs, with tile URLs and attribution sourced from the vizjs.org helper library. The page sets the map container to occupy the entire viewport, allowing users to pan and zoom freely across the rendered tiles.

NNPashaP

72% match

Loading thumbnail…

Leaflet.draw Plugin

This example shows an interactive map of a New Zealand location using OpenStreetMap tiles, rendered with Leaflet.js and the Leaflet.draw plugin. Users can draw polygon, polyline, rectangle, circle, and marker shapes on the map, each with custom colors and style options. The drawn items are collected in a Leaflet FeatureGroup, and the code configures features like intersection detection for polygons, area display, and repeat drawing mode. A custom green leaf icon is created via `L.Icon.extend` with a shadow URL, and popup bindings are added to drawn markers.

Dd3noob

72% match