raucao/r2b22-map
raucao/r2b22-map
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Hello world

Browse Source
This commit is contained in:
Râu Cao 2022-09-02 10:28:38 +02:00
commit 1374c1bc9d
Signed by: raucao
GPG Key ID: 15E65F399D084BA9
11 changed files with 157705 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules
dist

BIN
data/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

18
geo/poi.json Normal file
View File

@ -0,0 +1,18 @@
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Start in Genoa"
},
"geometry": {
"type": "Point",
"coordinates": [
8.918618,
44.407408
]
}
}
]
}

156273
geo/route.json Normal file
View File

File diff suppressed because it is too large Load Diff

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/x&#45;icon" href="https://openlayers.org/favicon.ico" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Road2Bitcoin Live Map</title>
</head>
<body>
<div id="map"></div>
<script type="module" src="./main.js"></script>
</body>
</html>

87
main.js Normal file
View File

@ -0,0 +1,87 @@
import './style.css';
import Feature from 'ol/Feature';
import GeoJSON from 'ol/format/GeoJSON';
import {Map, View} from 'ol';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {Icon, Stroke, Style} from 'ol/style';
import {OSM, Vector as VectorSource} from 'ol/source';
import {useGeographic} from 'ol/proj';
import geojsonRoute from './geo/route.json'
import geojsonPOI from './geo/poi.json'
useGeographic();
const styles = {
lineOrange: new Style({
stroke: new Stroke({
color: '#FF9900',
// lineDash: [8],
width: 5,
}),
}),
lineGrey: new Style({
stroke: new Stroke({
color: '#555555',
// lineDash: [8],
width: 5,
}),
}),
iconStop: new Style({
image: new Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'data/icon.png',
}),
})
}
const lastStageFinished = 4;
const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
const vectorSourceStagesCompleted = new VectorSource();
const vectorSourceStagesAhead = new VectorSource();
for (const stage of stagesCompleted) {
vectorSourceStagesCompleted.addFeature(new GeoJSON().readFeature(stage));
}
for (const stage of stagesAhead) {
vectorSourceStagesAhead.addFeature(new GeoJSON().readFeature(stage));
}
const stagesCompletedLayer = new VectorLayer({
source: vectorSourceStagesCompleted,
style: styles.lineOrange
});
const stagesAheadLayer = new VectorLayer({
source: vectorSourceStagesAhead,
style: styles.lineGrey
});
const vectorSourcePOI = new VectorSource({
features: new GeoJSON().readFeatures(geojsonPOI),
});
const poiLayer = new VectorLayer({
source: vectorSourcePOI,
style: styles.iconStop,
});
const view = new View({
center: [10.6, 46.5],
zoom: 6
})
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
}),
stagesCompletedLayer,
stagesAheadLayer,
poiLayer
],
view: view
});

1262
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

15
package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "map",
"version": "1.0.0",
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview"
},
"devDependencies": {
"vite": "^3.0.3"
},
"dependencies": {
"ol": "latest"
}
}

18
readme.md Normal file
View File

@ -0,0 +1,18 @@
# OpenLayers + Vite
This example demonstrates how the `ol` package can be used with [Vite](https://vitejs.dev/).
To get started, run the following (requires Node 14+):
npx create-ol-app my-app --template vite
Then change into your new `my-app` directory and start a development server (available at http://localhost:5173):
cd my-app
npm start
To generate a build ready for production:
npm run build
Then deploy the contents of the `dist` directory to your server. You can also run `npm run serve` to serve the results of the `dist` directory for preview.

12
style.css Normal file
View File

@ -0,0 +1,12 @@
@import "node_modules/ol/ol.css";
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}

5
vite.config.js Normal file
View File

@ -0,0 +1,5 @@
export default {
build: {
sourcemap: true,
}
}