💻 Implementation Guides

🟢 JavaScript (MapLibre Web)

Targeting Times Square, NYC:

const map = new maplibregl.Map({
  container: 'map',
  style: '[https://apimaps.evegram.org/styles/evegram_night_it.json?key=YOUR_API_KEY](https://apimaps.evegram.org/styles/evegram_night_it.json?key=YOUR_API_KEY)',
  center: [-73.9855, 40.7580], // [Lon, Lat]
  zoom: 14,
  pitch: 45 // 3D View
});

🟠 Java (Android Native)

Targeting Times Square, NYC:

mapLibreMap.setStyle(
    "[https://apimaps.evegram.org/styles/evegram_night_it.json?key=YOUR_API_KEY](https://apimaps.evegram.org/styles/evegram_night_it.json?key=YOUR_API_KEY)", 
    new Style.OnStyleLoaded() {
        @override
        public void onStyleLoaded(@NonNull Style style) {
            // Map is ready
        }
    }
);

🔵 Flutter (Dart)

Targeting Times Square, NYC:

MapLibreMap(
  styleString: "[https://apimaps.evegram.org/styles/evegram_night_it.json?key=YOUR_API_KEY](https://apimaps.evegram.org/styles/evegram_night_it.json?key=YOUR_API_KEY)",
  initialCameraPosition: const CameraPosition(
    target: LatLng(40.7580, -73.9855),
    zoom: 14.0,
  ),
);

🛠️ Bridge Communication (JS)

** If you need to inject a route calculated via our API into the map: Targeting Times Square, NYC:

// sourceId: 'route-source', data: GeoJSON from /route
window.updateEvegramMap = function(sourceId, geoJsonData) {
  map.getSource(sourceId).setData(JSON.parse(geoJsonData));
};