Firefighter Alarmmonitor

Maps Website
1

Hey!

Is it possible to embed a ORS-route into my own website?

I´ve build an alarmmonitor with a raspberry pi for our firefighter-station and I want to display the route from our station to the site of operation in an iframe (in case of an alarm). The Coordinates are stored in a sqlite-DB - the Website on the RasPi is built with HTML/PHP.

Here I found how to get a basic route:
https://openrouteservice.org/dev/#/api-docs/v2/directions/{profile}/get

But I need the map that appears when you click on the button “call action”, not the json-data.

Any ideas?

Thx
Christian

2

Hi @puschendorf,

you will need some additional libraries e.g. leaflet or openlayers to use the background map tile layers of openstreetmap.
Leaflet or openlayers can then also be used to display the geometry of the route in geojson.

There is an example in php on how to display a map with leaflet and php here (the descriptions are in german, but the code should suffice)

You might want to direcly use the /v2/directions/{profile}/geojson endpoint as the resulting geojson can be easily used to display e.g. L.geojson()

As you already built the website with PHP it shouldn’t be too difficult for you to implement this :slight_smile:

Check out the leaflet documentation as well as the example codes in our API playground, we do have php examples as well.

Good luck

3

Danke @amandus !

So ein Beispiel hat mir gefehlt.

1 Like
4

Hier noch meine Lösung / my solution.
Ein Python-Skript generiert ein geoJSON und speichert Koordinaten und Anfahrt in einer SQlite-DB, auf der Website wird die Karte dann folgendermaßen generiert:

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

        var map = new L.Map('map');
        var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        minZoom: 0,
        maxZoom: 20,
        attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
        });

        map.fitBounds([
          [51.0, 9.0], //Startkoordinate
          [<?= $letzterDatensatz['breitengrad'] ?>, <?= $letzterDatensatz['laengengrad'] ?>] //Zielkoordinate
        ]);

        map.addLayer(osm);
        
        var geojsonFeature = <?= $letzterDatensatz['anfahrt'] ?>;
        L.geoJSON(geojsonFeature).addTo(map);
        
        var icon = new L.Icon({
          iconSize: [50, 50],     // Größe des Icons
          iconAnchor: [25, 50],   // Positionierung des Icons
          popupAnchor:  [0, -18], // Position des Popups
          iconUrl: 'marker.png'  // Pfad zur Icon-Grafik
        });
        L.marker([<?= $letzterDatensatz['breitengrad'] ?>, <?= $letzterDatensatz['laengengrad'] ?>], {icon: icon}).addTo(map);
        
      </script>