OpenLayers example

100%

OpenLayers example

✓ Published0🌍 Public

Last edited Jun 18, 2021

Created on Jun 18, 2021

This example shows a map centered on a location in Africa, with a single polygon feature overlaid on a tiled OpenStreetMap basemap. The map is created with OpenLayers, using its `ol.Map`, `ol.layer.Tile`, and `ol.source.OSM` components. The polygon’s coordinates are then parsed from OpenLayers’ geometry format into a JTS geometry object using the `jsts.io.OL3Parser`, with the resulting coordinate list printed to the console for inspection.

AI-generated description

Similar vizzes

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

66% match

Loading thumbnail…

Gist 52138cb406012a760fee

This example renders a world map from a TopoJSON file containing land polygons. The visualization uses D3.js to project and draw the geographic data onto a canvas, with the `d3.geoPath` function handling the polygon outlines. The code loads the `Land.json` file, which stores the geometry in TopoJSON format, and prepares it for display using D3’s geographic projection utilities. The map shows the basic landmasses of the world as simple filled shapes, with no additional thematic data or interaction applied to the polygons.

SStephen

63% match

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example displays a world map using Leaflet with an OpenStreetMap tile layer, overlaid with country boundaries from a GeoJSON file. The visualization begins by initializing a Leaflet map centered on coordinates [30, 0] at zoom level 2. The code then loads geographic data from a static GeoJSON URL hosted on GitHub and adds it to the map via `L.geoJson()`. The integration uses Leaflet 0.7.7 alongside D3 3.5.5 for fetching the remote JSON data, demonstrating a straightforward workflow for combining interactive map tiles with custom spatial datasets.

KKristinHenry

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

62% match

Loading thumbnail…

Turf.Js Test

This example demonstrates how to calculate and display the centroid of a polygon on a map. It shows a single rectangular polygon overlaid on a Mapbox map, with its geographic center marked as a point feature. The visualization uses the Turf.js library’s `turf.centroid` function to compute the centroid from the polygon’s coordinates, then combines the original polygon and the resulting point into a GeoJSON FeatureCollection. This collection is rendered using Mapbox.js’s `L.geoJson` layer, with the map centered over the area at a zoom level that shows the full shape.

CCliffordAnderson

61% match

Loading thumbnail…

Leaflet WFS

This example shows a map of water areas rendered as a blue outline over an OpenStreetMap tile layer, with the view centered on coordinates near Cambridge, Ontario. It uses the Leaflet mapping library with the Leaflet-WFST plugin to load features from a GeoServer Web Feature Service endpoint, specifically the `osm:water_areas` layer. The code employs a bounding-box filter defined by the current map extent and sets the coordinate reference system to EPSG:3857 using proj4leaflet and proj4js. The visible style is a simple blue color with a weight of two pixels for the geographic features.

TThomasG77

61% match

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

61% match

Loading thumbnail…

Dynamic tile masking and more

This example demonstrates interactive masking of OpenStreetMap tiles over a stamen.com toner base map, controlled by user-drawn polygons. Using Leaflet’s draw control, users create shapes that act as SVG masks, revealing or hiding the underlying OSM tile layer. The visualization also applies SVG filters, such as grayscale, hue rotation, and sepia, to the map tiles, and offers a selection of hatch patterns for the mask fills. The code integrates D3.js (v3) for projecting GeoJSON geometries into Leaflet’s coordinate system and manipulates the SVG `defs` and mask elements directly.

KKoGor

60% match