Merge pull request #83 from GIScience/feature/leaflet-dev-app

Feature/leaflet dev app

.github/workflows/github-actions-build-and-test.yml

@@ -8,12 +8,14 @@ jobs:
   install-test-coverage:
     runs-on: ubuntu-latest
     timeout-minutes: 7
-    container: cypress/browsers:node18.6.0-chrome105-ff104
+    container:
+      image: cypress/browsers:node-20.14.0-chrome-126.0.6478.114-1-ff-127.0.1-edge-126.0.2592.61-1
+      options: --user 1001
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Cypress install
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v6
         with:
           runTests: false
       - name: Cypress info
@@ -23,7 +25,7 @@ jobs:
       - name: Run tests
         run: npm run test:ci
       - name: Upload coverage
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         with:
           # fix for https://github.com/codecov/codecov-action/issues/598 / https://community.codecov.com/t/upload-issues-unable-to-locate-build-via-github-actions-api/3954
           token: ${{ secrets.CODECOV_TOKEN }}

cypress.config.cjs

@@ -14,7 +14,7 @@ module.exports = defineConfig({
       api_key: process.env.VITE_ORS_API_KEY,
       codeCoverage: {
         exclude: ['cypress/**/*.*']
-      },
+      }
     },
     setupNodeEvents(on, config) {
       require('@cypress/code-coverage/task')(on, config)

cypress/e2e/example.cy.js

@@ -1,9 +1,42 @@
 // https://docs.cypress.io/api/introduction/api.html
 
-describe('My First Test', () => {
-  it('visits the app root url', () => {
+describe('Test open route services endpoint components', () => {
+  it('visits the app root url & click buttons', () => {
+    cy.viewport(1800,1000)
+    //test directions
     cy.visit('/')
-    cy.contains('h1', 'You did it!')
+    cy.contains('h3', 'You’ve successfully created a project with')
+    cy.get('.leaflet-marker-icon').should('have.length', 4)
+    cy.get('.ors_call').should('contain.text', 'routing')
+    //test elevation
+    cy.contains('button','Elevation').click()
+    cy.get('.leaflet-marker-icon').should('have.length', 2)
+    cy.get('.ors_call').should('contain.text', 'geometry')
+
+    //test geocode
+    cy.contains('button','Geocode').click()
+    cy.get('.leaflet-marker-icon').should('have.length', 10)
     cy.get('.ors_call').should('contain.text', 'geocoding')
+
+    //test Isochrones
+    cy.contains('button','Isochrones').click()
+    cy.get('.leaflet-marker-icon').should('have.length', 3)
+    cy.get('.ors_call').should('contain.text', 'isochrones')
+
+    //test Matrix
+    cy.contains('button','Matrix').click()
+    cy.get('.leaflet-marker-icon').should('have.length', 3)
+    cy.get('.ors_call').should('contain.text', 'matrix')
+
+    //test Optimization
+    cy.contains('button','Optimization').click()
+    cy.get('.leaflet-marker-icon').should('have.length', 5)
+    cy.get('.ors_call').should('contain.text', 'job')
+    cy.get('.ors_call').should('contain.text', 'vehicle')
+
+    //test Pois
+    cy.contains('button','Pois').click()
+    cy.get('.leaflet-marker-icon').should('have.length', 33)
+    cy.get('.ors_call').should('contain.text', 'pois')
   })
 })

dev_app/App.vue

@@ -1,15 +1,58 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-</script>
+<script src='./AppData.js'></script>
 
 <template>
   <header>
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+    <div class="title">
+      <h3>
+        You’ve successfully created a project with
+        <a href='https://vitejs.dev/' target='_blank' rel='noopener'>Vite</a> +
+        <a href='https://vuejs.org/' target='_blank' rel='noopener'>Vue 3</a>.
+      </h3>
     </div>
   </header>
 
-  <main>
-    <div>Hello</div>
-  </main>
+  <div class="sidebar">
+    <button
+        v-for="service in servicesData"
+        :key="service"
+        :class="['button', { active: renderedData === service }]"
+        @click="renderedData = service"
+    >
+      {{ service }}
+    </button>
+  </div>
+
+  <div class="main">
+    <div class="wrapper">
+      <component :is="renderedData"></component>
+    </div>
+  </div>
 </template>
+
+<style>
+.button {
+  border: none;
+  margin: 25px 2px;
+  width: 100%;
+  height: 55px;
+  background: darkseagreen;
+}
+.button:hover {
+  background: lightseagreen;
+}
+.button.active {
+  background: seagreen;
+}
+.sidebar {
+	position: fixed;
+  float: left;
+  width: 16%;
+	height: 100%;
+  padding: 15px;
+}
+.main {
+  float: right;
+  width: 80%;
+  padding: 15px;
+}
+</style>

dev_app/AppData.js

@@ -0,0 +1,34 @@
+import Directions from './components/DirectionsApp.vue'
+import Elevation from './components/ElevationApp.vue'
+import Geocode from './components/GeocodeApp.vue'
+import Isochrones from './components/IsochronesApp.vue'
+import Matrix from './components/MatrixApp.vue'
+import Optimization from './components/OptimizationApp.vue'
+import Pois from './components/PoisApp.vue'
+
+export default {
+  components: {
+    Directions,
+    Elevation,
+    Geocode,
+    Isochrones,
+    Matrix,
+    Optimization,
+    Pois
+  },
+  data() {
+    return {
+      renderedData: 'Directions',
+      servicesData: [
+        'Directions',
+        'Elevation',
+        'Geocode',
+        'Isochrones',
+        'Matrix',
+        'Optimization',
+        'Pois'
+      ]
+    }
+  },
+  methods: {}
+}

dev_app/components/DirectionsApp.js

@@ -0,0 +1,120 @@
+import Openrouteservice from '@/index.js'
+
+import blueIcon from './icons/blue_icon.png'
+import redIcon from "./icons/red_icon.png";
+import greenIcon from './icons/green_icon.png'
+
+import "leaflet/dist/leaflet.css";
+import {LMap, LTileLayer, LMarker, LIcon, LGeoJson} from "@vue-leaflet/vue-leaflet";
+
+export default {
+  components: {
+    LMap,
+    LTileLayer,
+    LMarker,
+    LIcon,
+    LGeoJson
+  },
+  props: {
+    msg: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      zoom: 14,
+      route: [],
+      center: {
+        lat: 0,
+        lon: 0
+      },
+      geojson: [],
+      colorStyle: [
+        {
+          color: '#2b82cb'
+        },
+        {
+          color: '#c3577a'
+        },
+        {
+          color: '#298f57'
+        }
+      ],
+
+
+      json_title: '',
+      json_data: {},
+
+      data_ready: false,
+      map_ready: false
+    }
+  },
+  computed: {
+    iconUrl() {
+      return [
+        blueIcon,
+        redIcon,
+        greenIcon
+      ]
+    },
+    iconSize() {
+      return [25, 41]
+    },
+    iconAnchor() {
+      return [15, 41]
+    }
+  },
+  methods: {},
+
+  async mounted() {
+    const orsDirections = new Openrouteservice.Directions({
+      api_key: import.meta.env.VITE_ORS_API_KEY
+    })
+
+    // add start and end points of your route here
+    this.route = [
+      [[8.690958, 49.404662], [8.687868, 49.390139]],
+      [[8.660958, 49.404662], [8.685868, 49.380139]]
+    ]
+
+    let response = {}
+    try {
+      response = await orsDirections.calculate({
+        coordinates: this.route[0],
+        profile: "driving-car",
+        extra_info: ["waytype", "steepness"],
+        format: "geojson",
+        api_version: 'v2'
+      })
+      this.json_title = 'Response'
+      this.center = {
+        lat: (response.bbox[1] + response.bbox[3]) / 2,
+        lon: (response.bbox[0] + response.bbox[2]) / 2
+      }
+      this.geojson[0] = response
+      this.json_data = JSON.stringify(response, null, "\t")
+    } catch (e) {
+      this.json_title = 'Error'
+      this.json_data = JSON.stringify(e, null, "\t")
+    }
+
+    try {
+      response = await orsDirections.calculate({
+        coordinates: this.route[1],
+        profile: "driving-car",
+        extra_info: ["waytype", "steepness"],
+        format: "geojson",
+        api_version: 'v2'
+      })
+      this.geojson[1] = response
+      this.json_data += ' Route 2: ' + JSON.stringify(response, null, "\t")
+    } catch (e) {
+      this.json_title = 'Error'
+      this.json_data = JSON.stringify(e, null, "\t")
+    }
+
+    this.data_ready = true
+    this.map_ready = true;
+  }
+}

dev_app/components/DirectionsApp.vue

@@ -0,0 +1,54 @@
+<script src='./DirectionsApp.js'></script>
+
+<template>
+  <div>
+    <h1 class='green'>{{ msg }}</h1>
+  </div>
+
+  <div class='leaflet' v-if='map_ready'>
+    <l-map ref='map' :useGlobalLeaflet='false' v-model:zoom='zoom' :center='[center.lat, center.lon]'>
+      <l-tile-layer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          layer-type="base"
+          name="OpenStreetMap"
+      ></l-tile-layer>
+
+      <div v-for='(key, index) in route' :key='key'>
+        <l-marker :lat-lng='[route[index][0][1], route[index][0][0]]'>
+          <l-icon :icon-url="iconUrl[index]" :icon-size="iconSize" :icon-anchor="iconAnchor"></l-icon>
+        </l-marker>
+        <l-marker :lat-lng='[route[index][1][1], route[index][1][0]]'>
+          <l-icon :icon-url="iconUrl[index]" :icon-size="iconSize" :icon-anchor="iconAnchor"></l-icon>
+        </l-marker>
+        <l-geo-json :geojson='geojson[index]' :options='colorStyle[index]'></l-geo-json>
+      </div>
+
+    </l-map>
+  </div>
+
+  <div>
+    <p class='ors_title' v-if='data_ready'>
+      {{ json_title }}
+    </p>
+    <p class='ors_call' v-if='data_ready'>
+      {{ json_data }}
+    </p>
+  </div>
+</template>
+
+<style>
+.green {
+  color: green;
+}
+.leaflet {
+  height: 850px;
+  width: 100%;
+	padding-bottom: 15px;
+}
+.ors_title {
+  font-weight: bold;
+}
+.ors_call {
+  font-size: x-small;
+}
+</style>