Exemples de scripts HTML & Python

Contexte
Exemple HTML (coté navigateur)
Exemple Python (coté serveur)

Contexte

Vous souhaitez intégrer les données du SITG dans vos applications ou créer des cartes dynamiques ?

Voici quelques exemples de code HTML et Python qui vous montrent comment facilement rechercher, afficher des données du SITG et créer des cartes vectorielles dynamiques.

Exemple HTML (coté navigateur)

Script HTML qui permet de faire afficher une carte vectorielle qui contient les arrêts TPG de la ligne 14 à Genève, avec le nom de chaque arrêt.

Source : API ESRI du SITG https://sitg.ge.ch/donnees/tpg-arrets

Remarques:

Lors de la requête GET, pour filtrer uniquement les arrêts de la ligne 14, nous utilisons l'attribut: " where ligne like '14' "
L'attribut 'f=geojson' permet d'obenir le flux au format geoJson

Créer une carte vectorielle en HTML avec les données du SITG

<!DOCTYPE html>
<html>

<head>
    <title>Arrêts du tram 14 des Transports Publics Genevois (TPG)</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>

<body>

    <div id="map" style=" height: 100vh;width: 100%"></div>

    <script>
        const map = L.map("map").setView([46.2044, 6.1432], 12);

        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "&copy; OpenStreetMap contributors"
        }).addTo(map);

        const geojsonUrl = "https://vector.sitg.ge.ch/arcgis/rest/services/Hosted/TPG_ARRETS/FeatureServer/0/query?where=ligne+like+%27%2514%25%27&f=geojson";

        fetch(geojsonUrl)
            .then(response => response.json())
            .then(data => {

                // Affichage des arrêts
                L.geoJSON(data, {
                    onEachFeature: (feature, layer) => {
                        const nom = feature.properties?.nom_arret || "Nom inconnu";
                        layer.bindPopup(`<strong>${nom}</strong>`);
                    },
                    pointToLayer: (feature, latlng) => {
                        return L.circleMarker(latlng, {
                            radius: 6,
                            fillColor: "red",
                            color: "#fff",
                            weight: 1,
                            opacity: 1,
                            fillOpacity: 0.9
                        });
                    }
                }).addTo(map);
            })
            .catch(err => {
                console.error("Erreur de chargement GeoJSON :", err);
                alert("Impossible de charger les arrêts de bus.");
            });
    </script>

</body>

</html>

Exemple Python (coté serveur)

Faire créer une carte vectorielle (ouput.html) qui affiche les communes et les arrêts de bus et tram TPG uniquement pour les communes de Meyrin et Bernex. Cet exemple démontre que l'on peut utiliser des fichiers ZIP contenant une source de donnée Excel ainsi que de réaliser des jointures spatiales basées sur les coordonnées géographiques.

Source des données :

fichier ZIP des communes https://sitg.ge.ch/donnees/cad-commune
fichier ZIP des arrêts TPG https://sitg.ge.ch/donnees/tpg-arrets

Bibliothèques Python utilisées : geopandas, folium, pandas, zipfile

Créer une page HTML en Python qui affiche les arrêts de bus et tram sur les communes de Bernex et Meyrin

import geopandas as gpd
import pandas as pd
import folium
import requests
import zipfile
import os

## config
STOPS_URL = "zip+https://ge.ch/sitg/geodata/SITG/OPENDATA/TPG_ARRETS-GDB.zip!TPG_ARRETS.gdb"
MUNICIPALITIES_URL = "zip+https://ge.ch/sitg/geodata/SITG/OPENDATA/CAD_COMMUNE-GDB.zip!CAD_COMMUNE.gdb"

# Step 1: load public transport stops dataset
print("Loading public transport stops...")
stops_gdf = gpd.read_file(STOPS_URL)
stops_gdf.drop_duplicates(subset=["geometry"], inplace=True)

# Step 2: load municipalities dataset
print("Loading municipalities...")
municipalities_gdf = gpd.read_file(MUNICIPALITIES_URL)

# Step 3: select municipalities
print("Selecting municipalities...")
selected_municipalities_gdf = municipalities_gdf[municipalities_gdf['COMMUNE'].isin(['Bernex', 'Meyrin'])].copy()

# Step 4: perform spatial join in order to find stops within the selected municipalities (Bernex and Meyrin)
print("Filtering stops within selected municipalities...")
filtered_stops_gdf = stops_gdf.sjoin(selected_municipalities_gdf, how='inner', predicate='intersects')[stops_gdf.columns]

# Step 5: Create a map of Geneva and add municipal boundaries
print("Generating map...")
geneva_map = folium.Map(location=[46.2044, 6.1432], zoom_start=12)

## Step 5.1: Add municipalities borders in red
folium.GeoJson(
    municipalities_gdf.geometry,
    style_function=lambda x: {'color': 'red', 'weight': 2}
).add_to(geneva_map)

## Step 5.2: Add stop names to the map
for _, row in filtered_stops_gdf.to_crs(epsg=4326).iterrows():
    folium.Marker(
        location=[row.geometry.y, row.geometry.x],
        popup=row['NOM_ARRET']  # Stop name
    ).add_to(geneva_map)

# Step 6: Save the map to an HTML file
print("Saving map to file...")
os.makedirs('output', exist_ok=True)
geneva_map.save('output/index.html')
print("\nDone! A web map has been saved to `output/index.html`. Please check it out ;-)")