Mueez Khan
Mueez Khan
Gazetteers for the New Mexico Water Data Catalog
Learn about the interactive maps I implemented while working at datHere for the New Mexico Water Data Catalog.
Published: 2026-05-12
Last updated: 2026-08-29
work
maplibre
react
typescript
javascript
python
Table of contents
About New Mexico Water Data
Here's an excerpt about New Mexico Water Data's mission:Our Mission: To make finding water data simple.To help visualize some of the complexity and data flow required to fully integrate water data, this braided stream visual depicts the combination of “water data streams” from multiple regional, state, research, and federal data providers. These data providers, at the top of this figure, are the tributaries.
Each data provider can be considered an individual stream that is a tributary flowing toward a “confluence” of multiple data streams. Data providers with various internal data systems, such as databases or spreadsheets, can make data available in different ways, which are shown as channels on this figure...The goal is to bring all channels together at a confluence, shown as a beaver dam in this illustration, that integrates all of the data into a coherent whole.— New Mexico Water DataIn the publication 2025 Plan: New Mexico Water Data Initiative published in September 2025, user research revealed "inadequate geographic filtering" as one of the issues of the hub and a key suggestion of "enhancing geographic filtering". The geospatial features I'm developing directly contribute to this enhancement and build upon the geospatial features I've built for the Texas Water Data Hub. Many of the features of the new gazetteers for the New Mexico Water Data Catalog resemble those of the Texas Water Data Hub that I've written a post about before. Therefore in this post I intend to highlight new and/or improved features rather than demonstrate features I've built already for the Texas Water Data Hub.
Rewritten codebase with React
This section in particular is a bit technical. Having web development experience can help.The first gazetteer work I focused on was for the Texas Water Data Hub by adding requested geospatial features to their custom CKAN extension. However, the extension had thousands of lines of JavaScript code and was not very maintainable especially if a developer did not have much experience with HTML, CSS, and JavaScript and may need to spend several weeks to months attempting to understand the codebase. The team for the New Mexico Water Data Catalog was also looking for the same geospatial functionality, however porting the entire codebase for New Mexico's specific use case (let alone making it a generic geospatial CKAN extension) was not feasible within a reasonable timeframe. Therefore I did something I've done multiple times before similar to what I did for the : a rewrite of the extension's codebase, in this case integrating React. CKAN does provide the Jinja2 templating engine and also HTMX in recent versions of CKAN. However with the rewritten extension's complexity and ease of integration with third-party libraries, I contemplated as to how I could integrate React into the CKAN extension. Considering how React projects and CKAN extensions are architectured, I thought perhaps I can "inject" a React app as a "widget" within the page by targeting a DOM element by its ID. The HTML element with that specific ID can be specified within a Jinja2 template file and also the bundled output of the React app (built as a single JavaScript file with Vite and Rolldown) can be imported as a web asset. Since I plan on using shadcn/ui with Tailwind CSS I need to prevent conflicts with classes from Bootstrap which CKAN provides, therefore I also included Tailwind's
prefix option. I also decided to replace Leaflet as the primary map provider with MapLibre GL JS (by using the react-maplibre library) as it is actively developed with the MapLibre Organization. Also I can focus on using TypeScript instead of JavaScript!
Note: The new ckanext-gztr CKAN extension now has a new architecture compared to when this blog post was made. Learn more at gztr.dathere.com!
This new architecture provides better potential for maintainability, customizability, and adding new features. Note that this is primarily for the widget-based architecture where specific React apps act as components initialized onto part of a web page rather than replacing the default architecture of a CKAN extension. For example we still use Jinja2 to inject the React app (which is bundled as a single JavaScript file by configuring Rolldown).
This architecture can definitely be improved. For example I think it may be useful to look into Vite's library mode to consolidate widgets and have multiple build outputs. Also consideration should be made as to how to import shared libraries in the case that multiple React widgets are on the same page. Perhaps even profiling for bundle size optimization.
Improved organization of the public gazetteer
The public search gazetteer is now a React widget which is organized in a streamlined manner. There are three primary sections, all of which were available in the Texas Water Data Hub version too:- Filter by location: Draw a bounding box on the map to search for datasets that have spatial data which intersect with the drawn bounding box.
- Search for an address: Search for an address, city, etc. by using the Nominatim API which provides geocoding.
- Preview map features: View various features on the map such as counties, irrigation districts, and more.
Revamped dataset publisher gazetteer
The dataset publisher gazetteer has also been revamped as a React widget with an improvement in UI. Regarding the UI, one of the primary changes is having a combobox with autocomplete that appears when using one of the dropdowns to search for features throughout all feature categories. This can be useful to find specific features that are set by the CKAN sysadmin or to identify regions with similar names. Another UI feature is the fullscreen button for exploring the map which can help when identifying smaller features.Note: The UI in the new ckanext-gztr extension now uses a single combobox.
Ideas for future iterations
The current plan for the geospatial CKAN extension built for the New Mexico Water Data Catalog is to make it a more generic geospatial CKAN extension so that other CKAN instances that may not even be water data hubs can benefit from the geospatial capabilities. Therefore the CKAN extension is being developed as "ckanext-gztr". Further documentation can be found for the ckanext-gztr CKAN extension once it's made open-source and also with its documentation site once released. There are already several ideas that are not implemented yet for the ckanext-gztr extension. Here are a few that I find interesting:- Customizability through configuration: CKAN sysadmins can customize the extension through the CKAN admin dashboard, including the primary location, map layers, and more.
- Internationalization: Better adapt the CKAN extension for various cultures and languages along with changing map tile sources, enabling CKAN sysadmins to also customize relevant parts of the extension for their use cases and communities.
- Connecting water data infrastructure: I've been working on a recent project ckanext-gztr to link water data features and datasets from water data hubs using CKAN to the Geoconnex global water data knowledge graph in collaboration with the Center for Geospatial Sciences and U.S. Geological Survey.
Conclusion
The development of geospatial capabilities for water data hubs continues! If you're on a desktop device, feel free to try out the public search gazetteer available at the New Mexico Water Data Catalog on the datasets page and provide your feedback. Also feel free to leave a comment with any thoughts below.Note: The public search gazetteer has initially been made for desktop devices to view and is not responsive for mobile devices yet. In a future update the public search gazetteer should be either made responsive or optionally hidden from mobile view.
Share your thoughts
Submit a comment about this post that may be shared.
Join the Newsletter
Receive updates during my career.
Featured Publications
Technical writing on work experiences, projects, and tools you may find useful.
Mapping open-pit mines in the US
Python
Polars
Folium
Leaflet
Marimo
New "Typing with Typst" course
Typst
Generating Plotly charts for water data
Python
Polars
Plotly
Data visualization
Gazetteers for Texas Water Data Hub
JavaScript
HTML/CSS
Python
Leaflet
Boerne Water Data Dashboard
Next.js
Rust
Data visualization
Data engineering
Polars
Plotly
commit-helper
Rust
Building a CKAN Release Timeline
Python
CKAN
TimelineJS v3
HTML
View more written content on my blog.