# ixMaps - Interactive Map Visualization Library ## What is ixMaps? ixMaps is a JavaScript library for creating interactive, SVG-based maps with data visualization capabilities. It allows you to easily embed interactive maps in web pages, add data layers, and create choropleth maps, bubble charts, and other visualizations. ## Features - Interactive SVG-based mapping - Support for multiple base map services (Leaflet, OpenStreetMap, CartoDB, etc.) - Data visualization with choropleth maps, bubble charts, and custom visualizations - Zoom, pan, and search functionality - Easy integration into any HTML page ## Simplest Example Here's the simplest way to create a map with ixMaps: ```html Simple ixMaps Example
``` ## How It Works 1. **Container**: Create a `
` element where the map will be rendered 2. **Library**: Include the ixMaps library script 3. **Map**: Call `ixmaps.Map()` with: - The ID of the container element - Configuration options (map service, base map type, etc.) - A callback function that receives the map instance when ready 4. **View**: In the callback, set the initial view with `map.view()` to center and zoom the map That's it! Save this as an HTML file and open it in a web browser to see your interactive map. ## Adding a Theme with Data Once you have a basic map, you can add a data layer (theme) to visualize data on the map. Here's how to define and load a bubble chart theme using coordinates: ```html ixMaps with Data Theme
``` ### Understanding Theme Definition When defining a theme, you chain several methods: 1. **`ixmaps.layer("LAYER_NAME")`** - Specifies a layer name (e.g., "chart" for bubble charts) 2. **`.data({...})`** - Defines the data source: - `data`: Inline data array/object - `url`: URL to load data from (CSV, JSON, etc.) - `type`: Data format ("json", "csv", etc.) 3. **`.binding({...})`** - Maps data fields to map features: - `value`: The data field to visualize (determines bubble size) - `geo`: For bubbles, use `"lat|lon"` to specify coordinate fields - `title`: Field used for labels/tooltips 4. **`.style({...})`** - Defines visual styling: - `type`: Visualization style (`"CHART|BUBBLE|VALUES"` for bubble charts) - `colorscheme`: Array with color(s) for bubbles - `fillopacity`: Transparency of fills - `normalsizevalue`: Base value for size normalization - `showdata`: Whether to show data labels - `symbols`: Shape array (e.g., `["circle"]`) 5. **`.define()`** - Finalizes and applies the theme The theme is added to the map using `map.layer()`, which takes the entire chain as its argument. **Note:** Bubble charts work with coordinate data (lat/lon) and don't require a predefined geographic layer, making them perfect for simple examples. For **choropleth themes** or data **without georeference**, you can first load an appropriate geographic layer (with positions, lines, or polygons) and then refer to that layer in your data visualization theme. For example, if you have data with region codes but no coordinates, you would: 1. Load a geographic layer (e.g., `ixmaps.layer("ITALIA_Comuni_2022")` for Italian municipalities) 2. Use `.binding()` with a `position` field to match your data to the geographic features (e.g., `position: "codice_comune"` to match municipality codes) 3. Apply a choropleth visualization type (e.g., `type: "CHOROPLETH|EQUIDISTANT"`) This allows you to visualize data that references geographic entities by name or code rather than by coordinates. ## Next Steps - Customize colors and styling - Add interactive tooltips and legends - Explore different visualization types (CHOROPLETH, BUBBLE, etc.) - Add multiple themes to the same map - Use your own data sources For more examples and documentation, visit the [ixMaps documentation](https://gjrichter.github.io/ixmaps/).