Skip to content
Snippets Groups Projects
Commit cee90625 authored by Moreau Elise's avatar Moreau Elise
Browse files

add open layer and bundle js file

parent 1215fde1
Branches
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
public/assets/css/general.css
+ 4
− 0
View file @ cee90625
...@@ -125,3 +125,7 @@ body, html { ...@@ -125,3 +125,7 @@ body, html {
grid-column: 2/5; grid-column: 2/5;
grid-row: 4/5; grid-row: 4/5;
} }
#map {
height: 400px;
width: 100%;
}
\ No newline at end of file
public/assets/dist/map.css 0 → 100644
+ 277
− 0
View file @ cee90625
.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 2px solid blue;
}
.ol-mouse-position {
top: 8px;
right: 8px;
position: absolute;
}
.ol-scale-line {
background: rgba(0,60,136,0.3);
border-radius: 4px;
bottom: 8px;
left: 8px;
padding: 2px;
position: absolute;
}
.ol-scale-line-inner {
border: 1px solid #eee;
border-top: none;
color: #eee;
font-size: 10px;
text-align: center;
margin: 1px;
will-change: contents, width;
transition: all 0.25s;
}
.ol-scale-bar {
position: absolute;
bottom: 8px;
left: 8px;
}
.ol-scale-step-marker {
width: 1px;
height: 15px;
background-color: #000000;
float: right;
z-Index: 10;
}
.ol-scale-step-text {
position: absolute;
bottom: -5px;
font-size: 12px;
z-Index: 11;
color: #000000;
text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
}
.ol-scale-text {
position: absolute;
font-size: 14px;
text-align: center;
bottom: 25px;
color: #000000;
text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
}
.ol-scale-singlebar {
position: relative;
height: 10px;
z-Index: 9;
box-sizing: border-box;
border: 1px solid black;
}
.ol-unsupported {
display: none;
}
.ol-viewport, .ol-unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ol-selectable {
-webkit-touch-callout: default;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.ol-grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
.ol-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.ol-control {
position: absolute;
background-color: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
.ol-control:hover {
background-color: rgba(255,255,255,0.6);
}
.ol-zoom {
top: .5em;
left: .5em;
}
.ol-rotate {
top: .5em;
right: .5em;
transition: opacity .25s linear, visibility 0s linear;
}
.ol-rotate.ol-hidden {
opacity: 0;
visibility: hidden;
transition: opacity .25s linear, visibility 0s linear .25s;
}
.ol-zoom-extent {
top: 4.643em;
left: .5em;
}
.ol-full-screen {
right: .5em;
top: .5em;
}
.ol-control button {
display: block;
margin: 1px;
padding: 0;
color: white;
font-size: 1.14em;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 1.375em;
width: 1.375em;
line-height: .4em;
background-color: rgba(0,60,136,0.5);
border: none;
border-radius: 2px;
}
.ol-control button::-moz-focus-inner {
border: none;
padding: 0;
}
.ol-zoom-extent button {
line-height: 1.4em;
}
.ol-compass {
display: block;
font-weight: normal;
font-size: 1.2em;
will-change: transform;
}
.ol-touch .ol-control button {
font-size: 1.5em;
}
.ol-touch .ol-zoom-extent {
top: 5.5em;
}
.ol-control button:hover,
.ol-control button:focus {
text-decoration: none;
background-color: rgba(0,60,136,0.7);
}
.ol-zoom .ol-zoom-in {
border-radius: 2px 2px 0 0;
}
.ol-zoom .ol-zoom-out {
border-radius: 0 0 2px 2px;
}
.ol-attribution {
text-align: right;
bottom: .5em;
right: .5em;
max-width: calc(100% - 1.3em);
}
.ol-attribution ul {
margin: 0;
padding: 0 .5em;
color: #000;
text-shadow: 0 0 2px #fff;
}
.ol-attribution li {
display: inline;
list-style: none;
}
.ol-attribution li:not(:last-child):after {
content: " ";
}
.ol-attribution img {
max-height: 2em;
max-width: inherit;
vertical-align: middle;
}
.ol-attribution ul, .ol-attribution button {
display: inline-block;
}
.ol-attribution.ol-collapsed ul {
display: none;
}
.ol-attribution:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
.ol-attribution.ol-uncollapsible {
bottom: 0;
right: 0;
border-radius: 4px 0 0;
}
.ol-attribution.ol-uncollapsible img {
margin-top: -.2em;
max-height: 1.6em;
}
.ol-attribution.ol-uncollapsible button {
display: none;
}
.ol-zoomslider {
top: 4.5em;
left: .5em;
height: 200px;
}
.ol-zoomslider button {
position: relative;
height: 10px;
}
.ol-touch .ol-zoomslider {
top: 5.5em;
}
.ol-overviewmap {
left: 0.5em;
bottom: 0.5em;
}
.ol-overviewmap.ol-uncollapsible {
bottom: 0;
left: 0;
border-radius: 0 4px 0 0;
}
.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
display: inline-block;
}
.ol-overviewmap .ol-overviewmap-map {
border: 1px solid #7b98bc;
height: 150px;
margin: 2px;
width: 150px;
}
.ol-overviewmap:not(.ol-collapsed) button{
bottom: 1px;
left: 2px;
position: absolute;
}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
display: none;
}
.ol-overviewmap:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
.ol-overviewmap-box {
border: 2px dotted rgba(0,60,136,0.7);
}
.ol-overviewmap .ol-overviewmap-box:hover {
cursor: move;
}
/*# sourceMappingURL=/map.css.map */
\ No newline at end of file
public/assets/dist/map.css.map 0 → 100644
+ 1
− 0
View file @ cee90625
{"version":3,"sources":["../../../node_modules/ol/ol.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"map.css","sourceRoot":"../js","sourcesContent":[".ol-box {\n box-sizing: border-box;\n border-radius: 2px;\n border: 2px solid blue;\n}\n\n.ol-mouse-position {\n top: 8px;\n right: 8px;\n position: absolute;\n}\n\n.ol-scale-line {\n background: rgba(0,60,136,0.3);\n border-radius: 4px;\n bottom: 8px;\n left: 8px;\n padding: 2px;\n position: absolute;\n}\n.ol-scale-line-inner {\n border: 1px solid #eee;\n border-top: none;\n color: #eee;\n font-size: 10px;\n text-align: center;\n margin: 1px;\n will-change: contents, width;\n transition: all 0.25s;\n}\n.ol-scale-bar {\n position: absolute;\n bottom: 8px;\n left: 8px;\n}\n.ol-scale-step-marker {\n width: 1px;\n height: 15px;\n background-color: #000000;\n float: right;\n z-Index: 10;\n}\n.ol-scale-step-text {\n position: absolute;\n bottom: -5px;\n font-size: 12px;\n z-Index: 11;\n color: #000000;\n text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;\n}\n.ol-scale-text {\n position: absolute;\n font-size: 14px;\n text-align: center;\n bottom: 25px;\n color: #000000;\n text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;\n}\n.ol-scale-singlebar {\n position: relative;\n height: 10px;\n z-Index: 9;\n box-sizing: border-box;\n border: 1px solid black;\n}\n\n.ol-unsupported {\n display: none;\n}\n.ol-viewport, .ol-unselectable {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n}\n.ol-selectable {\n -webkit-touch-callout: default;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text;\n}\n.ol-grabbing {\n cursor: -webkit-grabbing;\n cursor: -moz-grabbing;\n cursor: grabbing;\n}\n.ol-grab {\n cursor: move;\n cursor: -webkit-grab;\n cursor: -moz-grab;\n cursor: grab;\n}\n.ol-control {\n position: absolute;\n background-color: rgba(255,255,255,0.4);\n border-radius: 4px;\n padding: 2px;\n}\n.ol-control:hover {\n background-color: rgba(255,255,255,0.6);\n}\n.ol-zoom {\n top: .5em;\n left: .5em;\n}\n.ol-rotate {\n top: .5em;\n right: .5em;\n transition: opacity .25s linear, visibility 0s linear;\n}\n.ol-rotate.ol-hidden {\n opacity: 0;\n visibility: hidden;\n transition: opacity .25s linear, visibility 0s linear .25s;\n}\n.ol-zoom-extent {\n top: 4.643em;\n left: .5em;\n}\n.ol-full-screen {\n right: .5em;\n top: .5em;\n}\n\n.ol-control button {\n display: block;\n margin: 1px;\n padding: 0;\n color: white;\n font-size: 1.14em;\n font-weight: bold;\n text-decoration: none;\n text-align: center;\n height: 1.375em;\n width: 1.375em;\n line-height: .4em;\n background-color: rgba(0,60,136,0.5);\n border: none;\n border-radius: 2px;\n}\n.ol-control button::-moz-focus-inner {\n border: none;\n padding: 0;\n}\n.ol-zoom-extent button {\n line-height: 1.4em;\n}\n.ol-compass {\n display: block;\n font-weight: normal;\n font-size: 1.2em;\n will-change: transform;\n}\n.ol-touch .ol-control button {\n font-size: 1.5em;\n}\n.ol-touch .ol-zoom-extent {\n top: 5.5em;\n}\n.ol-control button:hover,\n.ol-control button:focus {\n text-decoration: none;\n background-color: rgba(0,60,136,0.7);\n}\n.ol-zoom .ol-zoom-in {\n border-radius: 2px 2px 0 0;\n}\n.ol-zoom .ol-zoom-out {\n border-radius: 0 0 2px 2px;\n}\n\n\n.ol-attribution {\n text-align: right;\n bottom: .5em;\n right: .5em;\n max-width: calc(100% - 1.3em);\n}\n\n.ol-attribution ul {\n margin: 0;\n padding: 0 .5em;\n color: #000;\n text-shadow: 0 0 2px #fff;\n}\n.ol-attribution li {\n display: inline;\n list-style: none;\n}\n.ol-attribution li:not(:last-child):after {\n content: \" \";\n}\n.ol-attribution img {\n max-height: 2em;\n max-width: inherit;\n vertical-align: middle;\n}\n.ol-attribution ul, .ol-attribution button {\n display: inline-block;\n}\n.ol-attribution.ol-collapsed ul {\n display: none;\n}\n.ol-attribution:not(.ol-collapsed) {\n background: rgba(255,255,255,0.8);\n}\n.ol-attribution.ol-uncollapsible {\n bottom: 0;\n right: 0;\n border-radius: 4px 0 0;\n}\n.ol-attribution.ol-uncollapsible img {\n margin-top: -.2em;\n max-height: 1.6em;\n}\n.ol-attribution.ol-uncollapsible button {\n display: none;\n}\n\n.ol-zoomslider {\n top: 4.5em;\n left: .5em;\n height: 200px;\n}\n.ol-zoomslider button {\n position: relative;\n height: 10px;\n}\n\n.ol-touch .ol-zoomslider {\n top: 5.5em;\n}\n\n.ol-overviewmap {\n left: 0.5em;\n bottom: 0.5em;\n}\n.ol-overviewmap.ol-uncollapsible {\n bottom: 0;\n left: 0;\n border-radius: 0 4px 0 0;\n}\n.ol-overviewmap .ol-overviewmap-map,\n.ol-overviewmap button {\n display: inline-block;\n}\n.ol-overviewmap .ol-overviewmap-map {\n border: 1px solid #7b98bc;\n height: 150px;\n margin: 2px;\n width: 150px;\n}\n.ol-overviewmap:not(.ol-collapsed) button{\n bottom: 1px;\n left: 2px;\n position: absolute;\n}\n.ol-overviewmap.ol-collapsed .ol-overviewmap-map,\n.ol-overviewmap.ol-uncollapsible button {\n display: none;\n}\n.ol-overviewmap:not(.ol-collapsed) {\n background: rgba(255,255,255,0.8);\n}\n.ol-overviewmap-box {\n border: 2px dotted rgba(0,60,136,0.7);\n}\n\n.ol-overviewmap .ol-overviewmap-box:hover {\n cursor: move;\n}\n"]}
\ No newline at end of file
public/assets/dist/map.js 0 → 100644
+ 57025
− 0
View file @ cee90625
This diff is collapsed.
public/assets/dist/map.js.map 0 → 100644
+ 1
− 0
View file @ cee90625
This diff is collapsed.
public/assets/js/general.js deleted 100644 → 0
+ 0
− 5
View file @ 1215fde1
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
$('.ui.dropdown')
.dropdown()
;
\ No newline at end of file
public/assets/js/map.js 0 → 100644
+ 67
− 0
View file @ cee90625
import 'ol/ol.css';
import { Map, View } from 'ol';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Fill, Stroke, Style, Circle } from 'ol/style';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Layer from 'ol/layer/Layer';
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
$('.ui.dropdown')
.dropdown()
;
export function viewMap(center, users){
let longLat = [center.long, center.lat];
let WebMercator = fromLonLat(longLat);
const features = users.map(({ location }) => {
if (!location) { return; }
const { longitude, latitude } = location;
if (!longitude || !latitude) { return; }
const marker = new Feature({
geometry: new Point(fromLonLat([longitude, latitude])),
name: `[${longitude},${latitude}]`
});
marker.setStyle(
new Style({
image: new Circle({
fill: new Fill({ color: '#ff0000' }),
stroke: new Stroke({ color: '#000000', width: 1 }),
radius: 5
})
})
);
return marker;
});
const tileLayer = new TileLayer({
source: new OSM()
});
const vectorLayer = new VectorLayer({
source: new VectorSource({ features: features.filter(f => f) })
});
const map = new Map({
target: 'map',
layers: [
tileLayer,
vectorLayer,
],
view: new View({
center: WebMercator,
zoom: 13
})
});
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment