Showing open & vouched for public work spaces in an easy to view map.
wip
+94
README.md
README.md
This is a binary file and will not be displayed.
+18
_tmp.html
+18
_tmp.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
4
+
<head>
5
+
<title>Co-Work Café</title>
6
+
<link rel="stylesheet" type="text/css" href="./index.css">
7
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
8
+
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
9
+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
10
+
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
11
+
<script src="./index.js"></script>
12
+
</head>
13
+
14
+
<body>
15
+
<div id="mapid"></div>
16
+
</body>
17
+
18
+
</html>
assets/cafe-black.webp
assets/cafe-black.webp
This is a binary file and will not be displayed.
assets/cafe-brown.png
assets/cafe-brown.png
This is a binary file and will not be displayed.
assets/cafe-color.jpeg
assets/cafe-color.jpeg
This is a binary file and will not be displayed.
cafe-black.png
cafe-black.png
This is a binary file and will not be displayed.
+18
index.html
+18
index.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
4
+
<head>
5
+
<meta charset="UTF-8" />
6
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+
<title>Simple map</title>
8
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" />
9
+
<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"></script>
10
+
<link rel="stylesheet" href="style.css" />
11
+
</head>
12
+
13
+
<body>
14
+
<div id="map"></div>
15
+
<script src="script.js"></script>
16
+
</body>
17
+
18
+
</html>
+32
script.js
+32
script.js
···
1
+
// config map
2
+
let config = {
3
+
minZoom: 3,
4
+
// maxZoom: 18,
5
+
6
+
};
7
+
// magnification with which the map will start
8
+
const zoom = 5;
9
+
// co-ordinates
10
+
const lat = 40.713830752389896;
11
+
const lng = -98.18415927140622;
12
+
13
+
var cafeDarkIcon = L.icon({
14
+
iconUrl: './cafe-black.png',
15
+
// shadowUrl: 'leaf-shadow.png',
16
+
17
+
iconSize: [20, 20], // size of the icon
18
+
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
19
+
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
20
+
});
21
+
22
+
// calling map
23
+
const map = L.map("map", config).setView([lat, lng], zoom);
24
+
25
+
// Used to load and display tile layers on the map
26
+
// Most tile servers require attribution, which you can set under `Layer`
27
+
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
28
+
attribution:
29
+
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
30
+
}).addTo(map);
31
+
32
+
L.marker([44.168530, -72.865840], { icon: cafeDarkIcon }).addTo(map);
+26
style.css
+26
style.css
···
1
+
*,
2
+
:after,
3
+
:before {
4
+
box-sizing: border-box;
5
+
padding: 0;
6
+
margin: 0;
7
+
}
8
+
9
+
html {
10
+
height: 100%;
11
+
}
12
+
13
+
body,
14
+
html,
15
+
#map {
16
+
width: 100%;
17
+
height: 100%;
18
+
}
19
+
20
+
body {
21
+
position: relative;
22
+
min-height: 100%;
23
+
margin: 0;
24
+
padding: 0;
25
+
background-color: #f1f1f1;
26
+
}