A custom Thingworx widget (v7.4.8+) that integrates Leaflet - an open-source JavaScript library for mobile-friendly interactive maps - into your Thingworx applications.

• GeoJSON Support: Import and display GeoJSON data for complex geographical visualizations
• Custom Background Images: Use your own map images as background layers
• Circular Geofences: Create configurable circular zones with customizable input data
• Debug Mode: Built-in debugging capabilities for development and troubleshooting
• Mobile-Friendly: Responsive design that works across all devices
• Interactive Maps: Full Leaflet.js functionality with zoom, pan, and click interactions

• Thingworx Platform v7.4.8 or higher
• Modern web browser with JavaScript enabled
• Basic familiarity with Thingworx Composer

Download Leaflet_v1.0.0.zip from the releases section of this repository.

1. Open Thingworx Composer
2. Navigate to Import/Export → Import
3. Select the downloaded Leaflet_v1.0.0.zip file
4. Follow the import wizard to complete the installation
5. Restart your Thingworx server if prompted

1. Open Mashup Builder: Create a new mashup or open an existing one
2. Locate the Widget: In the widgets tab, search for "Leaflet" or browse the widget library
3. Add to Mashup: Drag and drop the Leaflet widget onto your mashup canvas
4. Configure Properties: Bind your data and image properties as needed
5. Test and Deploy: Preview your mashup and deploy when ready

// Example widget configuration
{
  "geoJsonData": "your-geojson-data",
  "backgroundImage": "path/to/your/map-image.png",
  "geofences": [
    {
      "center": [40.7128, -74.0060],
      "radius": 1000,
      "color": "#ff0000",
      "opacity": 0.5
    }
  ],
  "debugMode": false
}

Each geofence object supports the following properties:

{
  "center": [latitude, longitude],  // Required: Center coordinates
  "radius": 1000,                   // Required: Radius in meters
  "color": "#ff0000",              // Optional: Fill color (hex)
  "opacity": 0.5,                  // Optional: Fill opacity (0-1)
  "strokeColor": "#000000",        // Optional: Border color
  "strokeWidth": 2,                // Optional: Border width
  "label": "Zone 1"                // Optional: Display label
}

The widget accepts standard GeoJSON format:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-74.0060, 40.7128]
      },
      "properties": {
        "name": "New York",
        "description": "The Big Apple"
      }
    }
  ]
}

To use a custom map image as background:

1. Upload your image to Thingworx file repository
2. Set the backgroundImage property to the file path
3. Ensure the image has proper geographical coordinates or bounds

Enable debug mode to:

• View console logs for troubleshooting
• Display additional map information
• Show coordinate information on hover
• Validate data formats

Widget not appearing in library:

• Ensure the extension was imported successfully
• Check Thingworx server logs for import errors
• Restart the Thingworx server

Map not loading:

• Verify internet connection (for default map tiles)
• Check browser console for JavaScript errors
• Ensure Leaflet library is loading properly

GeoJSON not displaying:

• Validate your GeoJSON format
• Check coordinate system (widget expects WGS84)
• Enable debug mode to see detailed error messages

Geofences not showing:

• Verify coordinate format is [lat, lng]
• Check radius values are positive numbers
• Ensure color values are valid hex codes

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• Internet Explorer 11 (with polyfills)

We welcome contributions! Please feel free to submit issues, feature requests, or pull requests.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the GPL-3.0 License - see the LICENSE file for details.

• Issues: GitHub Issues
• Documentation: Check the Wiki for detailed guides
• Discussions: GitHub Discussions

• Leaflet.js - The amazing open-source mapping library
• Thingworx - The IoT platform that makes this possible
• OpenStreetMap - Free map data and tiles

• Initial release
• GeoJSON support
• Custom background images
• Circular geofences
• Debug mode
• Mobile-friendly design

⭐ If this widget helps you, please consider giving it a star!

For more information about Thingworx development, visit the official documentation.