Skip to content

QGIS_ATTRIBUTE_PRESERVATION.md

Latest commit

 

History

History
106 lines (89 loc) · 3.42 KB

QGIS_ATTRIBUTE_PRESERVATION.md

File metadata and controls

106 lines (89 loc) · 3.42 KB

QGIS GeoJSON Attribute Preservation Solution

Problem

QGIS doesn't save customized visualization attributes when exporting to GeoJSON format. This is a known limitation because GeoJSON files don't inherently support storing styling information.

Solution: Using QGIS2Web Plugin

Step 1: Install QGIS2Web Plugin

  1. Open QGIS
  2. Go to Plugins → Manage and Install Plugins
  3. Search for "qgis2web"
  4. Install the plugin

Step 2: Prepare Your QGIS Project

  1. Load your data layers in QGIS
  2. Apply your desired styling and symbology
  3. Ensure all custom attributes are properly configured
  4. Save your project (.qgz file)

Step 3: Export Using QGIS2Web

  1. Go to Web → qgis2web → Create web map
  2. In the qgis2web dialog:
    • Select your layers
    • Choose export format (Leaflet, OpenLayers, or Mapbox)
    • Configure popup fields to include your custom attributes
    • Set styling options to preserve visual appearance
  3. Click "Update preview" to verify
  4. Click "Export" to generate the web map files

Step 4: Extract GeoJSON with Attributes

The qgis2web plugin generates:

  • data/ folder containing GeoJSON files with preserved attributes
  • js/ folder with JavaScript files
  • css/ folder with styling files
  • index.html file

Step 5: Integration with Map Dashboard

  1. Copy the generated GeoJSON files from data/ folder
  2. Place them in your map dashboard's data directory
  3. Update your data loading logic to use these files
  4. Apply the generated CSS styles for consistent visualization

Alternative Solutions

Option 1: Export to GeoPackage

  • GeoPackage format preserves both data and styling
  • Use Layer → Export → Save Features As
  • Choose GeoPackage format
  • Import into your web application using appropriate libraries

Option 2: Manual Attribute Preservation

  1. Export GeoJSON from QGIS
  2. Create a separate JSON file with styling information
  3. Merge styling data with GeoJSON in your application

Option 3: Use QGIS Processing Scripts

Create a custom QGIS processing script that:

  1. Exports GeoJSON with all attributes
  2. Generates a companion styling file
  3. Combines both for web use

Implementation Example

// Example of loading QGIS2Web generated data
const loadQGISData = async () => {
  try {
    // Load the GeoJSON with preserved attributes
    const response = await fetch('/data/qgis-exported-layer.geojson');
    const geojsonData = await response.json();
    
    // Apply styling from qgis2web generated CSS
    const style = {
      color: '#ff0000',
      weight: 2,
      opacity: 0.8,
      fillOpacity: 0.3
    };
    
    // Add to map with preserved attributes
    L.geoJSON(geojsonData, {
      style: style,
      onEachFeature: (feature, layer) => {
        // Access preserved custom attributes
        const customAttr = feature.properties.customAttribute;
        layer.bindPopup(`Custom: ${customAttr}`);
      }
    }).addTo(map);
  } catch (error) {
    console.error('Error loading QGIS data:', error);
  }
};

Benefits of This Approach

  • Preserves all custom attributes and styling
  • Generates web-ready files
  • Maintains visual consistency with QGIS
  • Easy integration with existing map dashboard
  • No manual attribute recreation needed

Files Generated by QGIS2Web

  • data/layer_name.geojson - GeoJSON with all attributes
  • js/layer_name.js - JavaScript configuration
  • css/layer_name.css - Styling information
  • index.html - Complete web map example