OpenLayers

OpenLayers Clustering Tutorial: 100000 Points Without Browser Freeze (HTML + JavaScript)

Leave a Comment / GIS, OpenLayers /

Rendering thousands of markers on a web map is one of the most common performance bottlenecks in GIS web development. If you’ve ever tried to plot 50,000 or 100,000 points on an OpenLayers map without clustering, you already know the result: a frozen browser tab, sluggish panning, and frustrated users. In this tutorial, you’ll learn […]

OpenLayers Clustering Tutorial: 100000 Points Without Browser Freeze (HTML + JavaScript) Read More »

Integrating Mapillary Street-Level Imagery with OpenLayers in Vue 3

Leave a Comment / GIS, OpenLayers /

In this tutorial, we’ll build MapiLayers — a Vue 3 application that combines OpenLayers maps with Mapillary’s street-level imagery. Users can click on coverage points on the map and instantly view street imagery in a floating panel, complete with a live camera FOV arc that rotates as the user looks around. We’ll use Vue 3 Composition API, Pinia for state

Integrating Mapillary Street-Level Imagery with OpenLayers in Vue 3 Read More »

Creating a GeoTIFF raster XYZ tile service in python with caching capability

2 Comments / GIS, OpenLayers, Python, Raster, Rioxarray /

In this tutorial, we’ll create a tile service for GeoTIFF files using Python, FastAPI, and various libraries such as xarray, rioxarray, rasterio, and Pillow. This service will dynamically generate map tiles on-the-fly and cache them for efficient retrieval. Prerequisites Before starting, ensure you have the following installed: Overview To get full source code for this

Creating a GeoTIFF raster XYZ tile service in python with caching capability Read More »

Generating Vector Tiles with PostGIS and Python for OpenLayers Map Rendering

Leave a Comment / GeoPandas, GIS, OpenLayers, PostGIS /

What are Vector Tiles? Vector tiles are a way of storing and serving geographic data in a compact and efficient format. Unlike traditional raster tiles, which are pre-rendered images, vector tiles contain vector data that can be rendered dynamically on the client side. This means that they can be styled and labeled in real-time, allowing

Generating Vector Tiles with PostGIS and Python for OpenLayers Map Rendering Read More »

Integrating OpenLayers Map with VueJS: Recreating the project with Vite, Pinia and TypeScript-Part 5

1 Comment / GIS, OpenLayers, VueJS /

This tutorial will guide you through the process of recreating an existing project that integrates OpenLayers Map with VueJS, using Vite, Pinia, and TypeScript. The original project used Vuex, which has since been deprecated, so we will be updating it with the newer and more efficient state management library, Pinia. We will start by setting

Integrating OpenLayers Map with VueJS: Recreating the project with Vite, Pinia and TypeScript-Part 5 Read More »

Integrating OpenLayers Map with VueJS: Open Feature Information Popup on click – Part 4

4 Comments / GIS, OpenLayers, VueJS /

In this part, we will show you how to add interactivity to the map by using OpenLayers and Vue.js. We will create a simple pop-up window that displays the feature’s attributes when clicked on the map and also highlight the feature on map. To get full source code for this tutorial, click here. To check

Integrating OpenLayers Map with VueJS: Open Feature Information Popup on click – Part 4 Read More »

Integrating OpenLayers Map with VueJS: Implement Style and legend for vector layer – Part 3

5 Comments / GIS, OpenLayers, VueJS /

Integrating OpenLayers Map with VueJS: Implement Style and legend for vector layer – Part 3 This blog post is the third part in OpenLayers-VueJS integration series. In part one, we implemented Layer Panel. In this tutorial, we will implement style and render legend for Vector Layers. OpenLayers VueJS integration series:1. Integrating OpenLayers Map with VueJS:

Integrating OpenLayers Map with VueJS: Implement Style and legend for vector layer – Part 3 Read More »

Integrating OpenLayers Map with VueJS: Create Layers Panel – Part 2

5 Comments / GIS, OpenLayers, VueJS /

This blog post is the second part in OpenLayers-VueJS integration series. In part one, we discussed basics of VueJS and how to integrate OpenLayers with VueJS to create a basic map. OpenLayers VueJS integration series:1. Integrating OpenLayers Map with VueJS: Create Map – Part 12. Integrating OpenLayers Map with VueJS: Create Layers Panel – Part

Integrating OpenLayers Map with VueJS: Create Layers Panel – Part 2 Read More »