README.md

📍 WikiMap #

Discover Wikipedia articles near you that need your help! WikiMap shows nearby Wikipedia articles on an interactive map, highlighting those that need photos, content, or improvements.

🌟 Features #

Interactive Maps: Powered by Apple MapKit JS with native user location tracking
Smart Clustering: Markers cluster at distance and ungroup when zoomed in
Help Wikipedia: Color-coded markers show articles that need photos or content
Walking & Driving Modes: Search within 2km walking or 10km driving distance
Rich Article Previews: Click markers to see descriptions and contribute
Native Navigation: Direct links to Apple Maps/Google Maps for directions
Duplicate Handling: Automatically offsets markers at identical locations
Responsive Design: Works on desktop and mobile devices

🚀 Live Demo #

Visit around.ansonbiggs.com to try it out!

🛠️ Setup #

Prerequisites #

Apple Developer Account: You need an Apple Developer Program membership ($99/year) to get MapKit JS tokens
MapKit JS Token: Generate a token from the Apple Developer portal

Getting Your MapKit JS Token #

Go to Apple Developer Maps
Sign in with your Apple Developer account
Create a new MapKit JS key
Configure the key for your domain
Copy the token

Configuration #

Clone this repository
Open config.js
Replace 'YOUR_MAPKIT_JS_TOKEN_HERE' with your actual MapKit JS token:

const MAPKIT_CONFIG = {
    authorizationCallback: function(done) {
        const token = 'YOUR_ACTUAL_TOKEN_HERE';
        done(token);
    },
    // ... rest of config
};

Local Development #

Since this is a static site, you can run it locally with any web server:

# Using Python 3
python -m http.server 8000

# Using Node.js (if you have http-server installed)
npx http-server

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000

📁 Project Structure #

wiki-map/
├── index.html              # Main HTML file
├── styles.css              # All CSS styles
├── config.js               # Configuration (MapKit token, settings)
├── js/
│   ├── app.js             # Main application logic
│   ├── mapkit-init.js     # MapKit JS initialization and map management
│   └── wikipedia.js        # Wikipedia API integration
├── .gitlab-ci.yml         # GitLab Pages deployment
└── README.md              # This file

🌐 Deployment #

This is a static site that can be deployed to any hosting service:

Netlify/Vercel: Connect your Git repository for automatic deployments
GitHub/GitLab Pages: Push to your repository
Any static host: Upload the files via FTP or deployment tools

🔧 Configuration Options #

Map Settings (config.js) #

defaultRadius: Default search radius in meters
maxResults: Maximum number of Wikipedia articles to show
geolocation: Browser geolocation options

Styling #

All styles are in styles.css and use CSS custom properties for easy theming.

🌍 How It Works #

Location Detection: Uses MapKit's native user location tracking
Wikipedia Search: Queries Wikipedia's geosearch API for nearby articles
Help Detection: Identifies articles needing images or content expansion
Smart Display: Color-codes markers and handles duplicate locations
Dynamic Clustering: Clusters at distance, ungroups when zoomed in
Interaction: Click markers to view details and contribute to Wikipedia

📱 Browser Support #

Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
Mobile: iOS Safari, Chrome Mobile, Samsung Internet
Requirements: Geolocation API support, ES6+ JavaScript

🛡️ Privacy #

Location Data: Only used locally in your browser, never sent to our servers
Wikipedia: Queries are made directly to Wikipedia's public API
Apple Maps: Subject to Apple's privacy policy

🔍 Troubleshooting #

Map Not Loading #

Check your MapKit JS token is correct
Verify your domain is configured in Apple Developer portal
Open browser developer tools for error messages

No Location Access #

Ensure you've granted location permissions
Try refreshing the page
Check if HTTPS is enabled (required for geolocation)

No Wikipedia Articles #

Try a different location or larger radius
Some areas may have fewer geotagged articles
Check browser console for API errors

🎨 Color Legend #

🔴 Crimson - Needs both image and content
🟠 Orange - Needs image
🟡 Gold - Needs content expansion
🟢 Green - Complete article

🤝 Contributing #

Contributions welcome! Visit the GitLab repository to:

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a merge request

📄 License #

This project is open source and available under the MIT License.

🙏 Acknowledgments #

Apple MapKit JS: Beautiful mapping platform
Wikipedia: Free knowledge for everyone
Contributors: Thanks to all who help improve this project

📞 Support #

If you have issues:

Check the troubleshooting section above
Open an issue on GitLab/GitHub
Check Apple MapKit JS documentation

Built with ❤️ using Apple MapKit JS and Wikipedia's API