Spotlight: Leaflet for Interactive Maps

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. With Oorian's Leaflet wrapper, you can add powerful mapping capabilities to your applications without writing JavaScript.

Why Leaflet?

• Lightweight: Only 42KB of JS
• Mobile-friendly: Touch gestures and responsive
• Extensible: Huge plugin ecosystem
• Open source: Free and community-driven

Creating a Basic Map

LfMap map = new LfMap();
map.setWidth("100%");
map.setHeight("500px");
map.setCenter(40.7128, -74.0060);  // New York City
map.setZoom(13);

// Add tile layer (OpenStreetMap)
map.addTileLayer(TileProvider.OPENSTREETMAP);

body.addElement(map);

Adding Markers

// Simple marker
LfMarker marker = new LfMarker(40.7128, -74.0060);
marker.setPopupContent("<b>New York City</b><br>The Big Apple");
map.addMarker(marker);

// Custom icon
LfIcon customIcon = new LfIcon()
    .setIconUrl("/images/store-marker.png")
    .setIconSize(32, 32)
    .setIconAnchor(16, 32);

LfMarker storeMarker = new LfMarker(40.7580, -73.9855);
storeMarker.setIcon(customIcon);
storeMarker.setPopupContent("Times Square Store");
map.addMarker(storeMarker);

Handling Map Events

map.registerListener(this, MapClickEvent.class);

@Override
public void onEvent(MapClickEvent event)
{
    double lat = event.getLatitude();
    double lng = event.getLongitude();

    // Add marker where user clicked
    LfMarker marker = new LfMarker(lat, lng);
    marker.setPopupContent("Lat: " + lat + ", Lng: " + lng);
    map.addMarker(marker);
}

Drawing Shapes

// Circle
LfCircle circle = new LfCircle(40.7128, -74.0060, 1000);
circle.setColor("#2563eb");
circle.setFillColor("#3b82f6");
circle.setFillOpacity(0.3);
map.addLayer(circle);

// Polygon
LfPolygon polygon = new LfPolygon();
polygon.addPoint(40.7128, -74.0060);
polygon.addPoint(40.7228, -74.0160);
polygon.addPoint(40.7028, -74.0160);
polygon.setColor("#dc2626");
map.addLayer(polygon);

GeoJSON Data

String geoJson = loadGeoJsonFile("neighborhoods.json");
LfGeoJSON layer = new LfGeoJSON(geoJson);
layer.setStyle(feature -> {
    return new LfStyle()
        .setColor("#2563eb")
        .setWeight(2)
        .setFillOpacity(0.4);
});
map.addLayer(layer);

Conclusion

Leaflet integration makes adding maps to Oorian applications simple and powerful. From basic location display to complex GeoJSON visualization, everything is configured through type-safe Java.