Skip to content

Commit

Permalink
Create 2 example geojson and vector from the playground one.
Browse files Browse the repository at this point in the history
  • Loading branch information
@francois2metz
francois2metz committed Oct 10, 2024
1 parent cf9e201 commit 8f9b3b8
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 123 deletions.
127 changes: 127 additions & 0 deletions docs/examples/geojson.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
// Geojson source
//
// Render a dynamic geojson source
<template>
<mgl-map
:map-style="style"
:center="center"
:zoom="zoom"
height="500px"
>
<mgl-geo-json-source
source-id="geojson"
:data="geojsonSource.data"
>
<mgl-line-layer
layer-id="geojson"
:layout="layout"
:paint="paint"
/>
</mgl-geo-json-source>
</mgl-map>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {
MglMap,
MglGeoJsonSource,
MglLineLayer,
} from '@indoorequal/vue-maplibre-gl';
const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
const center = [ -122.483696, 37.833818 ];
const zoom = 15;
const lineString = [
[ -122.483696, 37.833818 ],
[ -122.483482, 37.833174 ],
[ -122.483396, 37.8327 ],
[ -122.483568, 37.832056 ],
[ -122.48404, 37.831141 ],
[ -122.48404, 37.830497 ],
[ -122.483482, 37.82992 ],
[ -122.483568, 37.829548 ],
[ -122.48507, 37.829446 ],
[ -122.4861, 37.828802 ],
[ -122.486958, 37.82931 ],
[ -122.487001, 37.830802 ],
[ -122.487516, 37.831683 ],
[ -122.488031, 37.832158 ],
[ -122.488889, 37.832971 ],
[ -122.489876, 37.832632 ],
[ -122.490434, 37.832937 ],
[ -122.49125, 37.832429 ],
[ -122.491636, 37.832564 ],
[ -122.492237, 37.833378 ],
[ -122.493782, 37.833683 ]
];
const geojsonSource = ref({
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: lineString.slice(0, 1)
}
}
]
},
});
onMounted(() => {
setInterval(() => {
if (geojsonSource.value.data.features[ 0 ].geometry.coordinates.length >= lineString.length) {
geojsonSource.value.data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: lineString.slice(0, 1)
}
}
]
};
} else {
geojsonSource.value.data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
...geojsonSource.value.data.features[ 0 ].geometry.coordinates,
lineString[ geojsonSource.value.data.features[ 0 ].geometry.coordinates.length ]
]
}
}
]
};
}
}, 1000);
});
const layout = {
'line-join': 'round',
'line-cap' : 'round'
};
const paint = {
'line-color': '#FF0000',
'line-width': 8
};
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>
127 changes: 4 additions & 123 deletions docs/examples/playground.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,6 @@
</button>
</mgl-custom-control>
<mgl-marker :coordinates="markerCoordinates" color="#cc0000" :scale="0.5"/>

<mgl-geo-json-source source-id="geojson" :data="geojsonSource.data">
<mgl-line-layer
v-if="geojsonSource.show"
layer-id="geojson"
:layout="layout"
:paint="paint"
@mouseenter="onMouseenter"
/>
</mgl-geo-json-source>

<mgl-vector-source source-id="libraries" :tiles="librariesSourceTiles">
<mgl-circle-layer layer-id="libraries" source-layer="libraries" :paint="librariesLayerCirclesPaint"/>
</mgl-vector-source>

</mgl-map>
</div>
<div style="margin-bottom: 20px">Version: {{ mapVersion }}</div>
Expand Down Expand Up @@ -87,116 +72,30 @@ import {
MglGeolocateControl,
MglCustomControl,
MglMarker,
MglGeoJsonSource,
MglLineLayer,
MglVectorSource,
MglCircleLayer
} from '@indoorequal/vue-maplibre-gl';
import { mdiCursorDefaultClick } from '@mdi/js';
import { CircleLayerSpecification, LineLayerSpecification, LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
import { FeatureCollection, LineString } from 'geojson';
import { LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
MglDefaults.style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
console.log('MglDefaults', MglDefaults);
const lineString = [
[ -122.483696, 37.833818 ],
[ -122.483482, 37.833174 ],
[ -122.483396, 37.8327 ],
[ -122.483568, 37.832056 ],
[ -122.48404, 37.831141 ],
[ -122.48404, 37.830497 ],
[ -122.483482, 37.82992 ],
[ -122.483568, 37.829548 ],
[ -122.48507, 37.829446 ],
[ -122.4861, 37.828802 ],
[ -122.486958, 37.82931 ],
[ -122.487001, 37.830802 ],
[ -122.487516, 37.831683 ],
[ -122.488031, 37.832158 ],
[ -122.488889, 37.832971 ],
[ -122.489876, 37.832632 ],
[ -122.490434, 37.832937 ],
[ -122.49125, 37.832429 ],
[ -122.491636, 37.832564 ],
[ -122.492237, 37.833378 ],
[ -122.493782, 37.833683 ]
];
export default defineComponent({
name : 'App',
components: {
MglCircleLayer, MglVectorSource, MglLineLayer, MglGeoJsonSource, MglMarker, MglCustomControl,
MglMarker, MglCustomControl,
MglGeolocateControl, MglScaleControl, MglNavigationControl, MglAttributionControl, MglFullscreenControl, MglMap
},
setup() {
const map = useMap(),
mapVersion = ref<string>(),
showCustomControl = ref(true),
loaded = ref(0),
markerCoordinates = ref<LngLatLike>([ 13.377507, 52.516267 ]),
geojsonSource = ref({
data: <FeatureCollection<LineString>>({
type : 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry : {
type: 'LineString',
coordinates: [
[ -122.483696, 37.833818 ],
[ -122.483482, 37.833174 ]
]
}
}
]
}),
show: true
});
markerCoordinates = ref<LngLatLike>([ 13.377507, 52.516267 ]);
watch(() => map.isLoaded, () => (console.log('IS LOADED', map)), { immediate: true });
watch(() => map.isMounted, (v: boolean) => (console.log('IS MOUNTED', v)), { immediate: true });
onMounted(() => {
setTimeout(() => (markerCoordinates.value = [ 13.377507, 42.516267 ]), 5000);
setInterval(() => {
if (geojsonSource.value.data.features[ 0 ].geometry.coordinates.length >= lineString.length) {
geojsonSource.value.data = <FeatureCollection<LineString>>{
type : 'FeatureCollection',
features: [
{
type : 'Feature',
properties: {},
geometry : {
type : 'LineString',
coordinates: [
[ -122.483696, 37.833818 ],
[ -122.483482, 37.833174 ]
]
}
}
]
};
} else {
geojsonSource.value.data = <FeatureCollection<LineString>>{
type : 'FeatureCollection',
features: [
{
type : 'Feature',
properties: {},
geometry : {
type : 'LineString',
coordinates: [
...geojsonSource.value.data.features[ 0 ].geometry.coordinates,
lineString[ geojsonSource.value.data.features[ 0 ].geometry.coordinates.length ]
]
}
}
]
};
}
}, 1000);
});
function onLoad(e: MglEvent) {
Expand All @@ -205,32 +104,14 @@ export default defineComponent({
console.log(e.type, e, e.map.version);
}
function onMouseenter(e: MapLayerMouseEvent) {
console.log('EVENT', e.type, e.lngLat);
}
return {
showCustomControl, loaded, map, mapVersion, markerCoordinates, geojsonSource, onLoad, onMouseenter,
geojsonSourceData : geojsonSource.data,
showCustomControl, loaded, map, mapVersion, markerCoordinates, onLoad,
isZooming : ref(false),
controlPosition : ref(Position.TOP_LEFT),
showMap : ref(true),
center : [ -122.483696, 37.833818 ] as LngLatLike,
zoom : 15,
buttonIcon : mdiCursorDefaultClick,
layout : {
'line-join': 'round',
'line-cap' : 'round'
} as LineLayerSpecification['layout'],
paint : {
'line-color': '#FF0000',
'line-width': 8
} as LineLayerSpecification['paint'],
librariesSourceTiles : [ 'https://api.librarydata.uk/libraries/{z}/{x}/{y}.mvt' ],
librariesLayerCirclesPaint: {
'circle-radius': 5,
'circle-color' : '#1b5e20'
} as CircleLayerSpecification['paint']
};
}
});
Expand Down
47 changes: 47 additions & 0 deletions docs/examples/vector.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// Vector source
//
// Display a vector source
<template>
<mgl-map
:map-style="style"
:center="center"
:zoom="zoom"
height="500px"
>
<mgl-vector-source
source-id="libraries"
:tiles="librariesSourceTiles"
>
<mgl-circle-layer
layer-id="libraries"
source-layer="libraries"
:paint="librariesLayerCirclesPaint"
/>
</mgl-vector-source>

</mgl-map>
</template>

<script setup lang="ts">
import {
MglMap,
MglVectorSource,
MglCircleLayer
} from '@indoorequal/vue-maplibre-gl';
import { CircleLayerSpecification, LineLayerSpecification, LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
const style = 'https://api.maptiler.com/maps/streets/style.json?key=cQX2iET1gmOW38bedbUh';
const center = [-3.002233964444031, 53.71773428766181];
const zoom = 5;
const librariesSourceTiles = [ 'https://api.librarydata.uk/libraries/{z}/{x}/{y}.mvt' ];
const librariesLayerCirclesPaint = {
'circle-radius': 5,
'circle-color' : '#1b5e20'
} as CircleLayerSpecification['paint'];
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>

0 comments on commit 8f9b3b8

Please sign in to comment.