GeoJSON-Layer (Android)

Laden und Anzeigen von GeoJSON-Daten auf einer SmartMaps-Karte.

MapSession erforderlich

Denken Sie daran, die MapSession in Ihre App zu integrieren. Die MapSession muss alle 10 Minuten aufgerufen werden, solange die Karte aktiv ist.

GeoJSON-Linie hinzufügen

mapView.getMapAsync { map ->
    map.setStyle(
        "https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey=[INSERT API-KEY]&channel=app"
    ) { style ->
        // Add a GeoJSON source
        val geoJsonString = """
        {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [8.4037, 49.0069],
                        [8.4660, 49.4875],
                        [9.1829, 48.7758]
                    ]
                },
                "properties": {
                    "name": "Route through Baden-Wuerttemberg"
                }
            }]
        }
        """.trimIndent()

        val source = GeoJsonSource("route-source", geoJsonString)
        style.addSource(source)

        // Add a line layer
        val lineLayer = LineLayer("route-layer", "route-source").withProperties(
            PropertyFactory.lineColor(Color.parseColor("#18345c")),
            PropertyFactory.lineWidth(4f)
        )
        style.addLayer(lineLayer)

        // Fit camera to the line
        map.easeCamera(
            CameraUpdateFactory.newLatLngBounds(
                LatLngBounds.Builder()
                    .include(LatLng(49.0069, 8.4037))
                    .include(LatLng(49.4875, 8.4660))
                    .include(LatLng(48.7758, 9.1829))
                    .build(),
                50
            )
        )
    }
}

GeoJSON-Polygone hinzufügen

mapView.getMapAsync { map ->
    map.setStyle(
        "https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey=[INSERT API-KEY]&channel=app"
    ) { style ->
        val geoJsonString = """
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [[
                    [8.38, 48.99],
                    [8.44, 48.99],
                    [8.44, 49.02],
                    [8.38, 49.02],
                    [8.38, 48.99]
                ]]
            },
            "properties": {
                "name": "Karlsruhe Center"
            }
        }
        """.trimIndent()

        val source = GeoJsonSource("area-source", geoJsonString)
        style.addSource(source)

        // Fill layer
        val fillLayer = FillLayer("area-fill", "area-source").withProperties(
            PropertyFactory.fillColor(Color.parseColor("#18345c")),
            PropertyFactory.fillOpacity(0.3f)
        )
        style.addLayer(fillLayer)

        // Outline layer
        val outlineLayer = LineLayer("area-outline", "area-source").withProperties(
            PropertyFactory.lineColor(Color.parseColor("#18345c")),
            PropertyFactory.lineWidth(2f)
        )
        style.addLayer(outlineLayer)
    }
}

GeoJSON von einer URL laden

mapView.getMapAsync { map ->
    map.setStyle(
        "https://tiles.smartmaps.cloud/styles/v1/smartmaps/light/style.json?apiKey=[INSERT API-KEY]&channel=app"
    ) { style ->
        val source = GeoJsonSource(
            "remote-source",
            URI("https://example.com/data.geojson")
        )
        style.addSource(source)

        val circleLayer = CircleLayer("points-layer", "remote-source").withProperties(
            PropertyFactory.circleRadius(6f),
            PropertyFactory.circleColor(Color.parseColor("#18345c"))
        )
        style.addLayer(circleLayer)
    }
}