networks of care
commit
26db40c524
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Networks of Care</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" type="image/x-icon" href=""/>
|
||||
<link rel="stylesheet" type="text/css" href="reset.css"/>
|
||||
<link rel="stylesheet" href="./style.css"/>
|
||||
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
|
||||
<base target="_parent">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2> Field </h2>
|
||||
<h2> Format </h2>
|
||||
<h2> Language </h2>
|
||||
|
||||
|
||||
<div id='map'></div>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
//map layers
|
||||
//var artobj = L.layerGroup();
|
||||
|
||||
|
||||
//function to remove duplicates in array
|
||||
function removeDuplicates(data) {
|
||||
return [...new Set(data)]
|
||||
};
|
||||
|
||||
// Leaflet
|
||||
var map = L.map('map', {
|
||||
zoomControl: false, //removes zoom controls
|
||||
crs: L.CRS.Simple, //changes coordinate reference system to a x,y one instead of map cartesian coordinates
|
||||
minZoom: -1,
|
||||
maxZoom: -2,
|
||||
//layers: [art, technology] //adds layers for my map
|
||||
});
|
||||
|
||||
var yx = L.latLng;
|
||||
|
||||
var xy = function(x, y) {
|
||||
if (L.Util.isArray(x)) { // When doing xy([x, y]);
|
||||
return yx(x[1], x[0]);
|
||||
}
|
||||
return yx(y, x); // When doing xy(x, y);
|
||||
};
|
||||
|
||||
var bounds = [xy(0, 0), xy(0, 0)]; //did this to remove border around map, showing on firefox
|
||||
|
||||
var image = L.imageOverlay('', bounds).addTo(map); //imageOverlay is the map image
|
||||
map.fitBounds(bounds);
|
||||
|
||||
map.setView(xy(1250, 750), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
|
||||
|
||||
|
||||
// Wiki Api
|
||||
var apiEndpoint = "https://hub.xpub.nl/networksofcare/mediawiki/api.php";
|
||||
|
||||
var params ="action=ask&format=json&query=[[Category%3ADiagram]] |%3FCategory |%3FConnection |%3FField";
|
||||
|
||||
// my query: All pages with category "diagram". Show "category", show "connection", show "field".
|
||||
// "diagram::include" is my way of annotating on the wiki which pages should be visible on the diagram. e.g. I may not want help pages there, main page, etc.
|
||||
// "connection::" is my annotation on the wiki for pages that are connected to others. e.g. "Lídia" page is connected to "Varia Code of Conducts". "ginger coons" page is connected to "LGM Code of Conducts".
|
||||
|
||||
//Main categories static location:
|
||||
var myIcon2 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Networking' });
|
||||
var myIcon3 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Linking' });
|
||||
var myIcon1 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Archiving' });
|
||||
L.marker(xy(1000, 400), {icon: myIcon1}).addTo(map);
|
||||
L.marker(xy(1600, 1200), {icon: myIcon2}).addTo(map); //Networking
|
||||
L.marker(xy(100, 1400), {icon: myIcon3}).addTo(map); //Linking
|
||||
|
||||
|
||||
|
||||
// exploring animations
|
||||
//L.marker(xy(1000, 400), {icon: L.icon({iconUrl: 'https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png', className: 'blinking'})}).addTo(map);
|
||||
|
||||
var dict = {} //this objects works as a dictionary to store page names and their coordinates
|
||||
var connectionarray = []; //this array will store page names and their connections
|
||||
var overlays = {}; //dictionary for map layers
|
||||
|
||||
|
||||
// makes random coordinates for the points
|
||||
var lanArray = [];
|
||||
for (var i = 1; i <= 50; i++) { //in 3+4th quadrant
|
||||
lanArray.push(i * 50); //* 50 means I only have coordinates ending with 0 or 5, making them more far apart
|
||||
}
|
||||
|
||||
var lonArray = [];
|
||||
for (var i = 1; i <= 15; i++) {
|
||||
lonArray.push(i * 50);
|
||||
}
|
||||
|
||||
var lan1Array = [];
|
||||
for (var i = 25; i <= 50; i++) {//2nd quadrant
|
||||
lan1Array.push(i * 50);
|
||||
}
|
||||
|
||||
var lon2Array = [];
|
||||
for (var i = 15; i <= 30; i++) {
|
||||
lon2Array.push(i * 50);
|
||||
}
|
||||
|
||||
var obj = L.layerGroup();
|
||||
|
||||
//create a variable for every field.
|
||||
//var variable_field = L.layerGroup();
|
||||
|
||||
|
||||
//The function to wrap the result. It waits for api call to be completed.
|
||||
var callback = function (response) {
|
||||
var pages = response.query.results;
|
||||
Object.keys(pages).forEach(function(key) { //for loop
|
||||
var pagename = pages[key].fulltext;//getting json keys
|
||||
var url = pages[key].fullurl;
|
||||
var category = pages[key].printouts.Category[0].fulltext;
|
||||
var connection = pages[key].printouts.Connection[0];
|
||||
var field = pages[key].printouts.Field;
|
||||
console.log(pagename); //printing to console
|
||||
|
||||
if (category == "Category:Archiving"){
|
||||
|
||||
for(var i = 0; i < field.length; i++){ //for each page with "field"...
|
||||
overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer
|
||||
}
|
||||
|
||||
var lan = lanArray[Math.floor(Math.random() * lanArray.length)]; //chooses random number from the array, x coordinate
|
||||
lanArray.splice(lanArray.indexOf(lan), 1); //removes the chosen number from the array to avoid repetitions
|
||||
|
||||
var lon = lonArray[Math.floor(Math.random() * lonArray.length)]; //chooses random number from the array, y coordinate
|
||||
lonArray.splice(lonArray.indexOf(lon), 1); //removes the chosen number from the array to avoid repetitions
|
||||
|
||||
var archivingcoordinates = xy(lan, lon);
|
||||
|
||||
//var travel = L.polyline([archivingcoordinates, xy(1000, 400)], {color:'lightgrey', weight: 10, lineCap: 'butt', offset: 50}).addTo(map).addTo(obj);//connects to "Archiving"
|
||||
var myIcon = L.divIcon({ iconSize: new L.Point(200, 50), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });//divIcon is the name, label. There's different types of icons.
|
||||
//L.circle(archivingcoordinates, {color: 'grey', radius: 5, fillOpacity: 100}).addTo(map);
|
||||
|
||||
L.marker(archivingcoordinates, {icon: myIcon}).addTo(map).addTo(obj);
|
||||
|
||||
|
||||
dict[pagename] = [lan, lon];//adding to the dictionary the page name and its coordinates
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (category == "Category:Networking"){
|
||||
var lan1 = lan1Array[Math.floor(Math.random() * lan1Array.length)]; //chooses random number from the array, x coordinate
|
||||
lan1Array.splice(lan1Array.indexOf(lan1), 1); //removes the chosen number from the array to avoid repetitions
|
||||
|
||||
var lon2 = lon2Array[Math.floor(Math.random() * lon2Array.length)]; //chooses random number from the array, x coordinate
|
||||
lon2Array.splice(lon2Array.indexOf(lon2), 1); //removes the chosen number from the array to avoid repetitions
|
||||
|
||||
var networkingcoordinates = xy(lan1, lon2);
|
||||
|
||||
//var travel = L.polyline([networkingcoordinates, xy(1500, 1200)], {color:'lightgrey', weight: 10, lineCap: 'butt'}).addTo(map);
|
||||
|
||||
var myIcon = L.divIcon({ className: 'leaflet-div-icon2', iconSize: new L.Point(150, 40), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
|
||||
//L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
|
||||
L.marker(networkingcoordinates, {icon: myIcon}).addTo(map);
|
||||
|
||||
dict[pagename] = [lan1, lon2];//adding to the dictionary the page name and its coordinates
|
||||
}
|
||||
|
||||
if ( typeof connection != 'undefined' ) { //if there is a "connection"
|
||||
var connection2 = pages[key].printouts.Connection[0].fulltext; //get the value
|
||||
connectionarray.push(connection2, pagename); //add value to array
|
||||
}
|
||||
});
|
||||
|
||||
//dealing with asynchronous code with an async function. Meaning, function two only starts when function one is complete.
|
||||
//I needed to only add elements to the layers menu after I had the array with the menu content full.
|
||||
function resolveAfter1Second() {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve('resolved');
|
||||
console.log(overlays);
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
async function asyncCall() {
|
||||
console.log('calling');
|
||||
const result = await resolveAfter1Second();
|
||||
|
||||
L.control.layers(null, overlays).addTo(map); //null is for no baselayer
|
||||
|
||||
console.log(result);
|
||||
// expected output: 'resolved'
|
||||
}
|
||||
|
||||
asyncCall();
|
||||
|
||||
//connecting with dash lines the pages with connections
|
||||
var groups = [];
|
||||
|
||||
//every page with a connection goes to "connectionarray" (see above).
|
||||
//this splits the array in pairs and adds them to "groups" as subarrays. Each subarray has now the two pages that should connect.
|
||||
for(var i = 0; i < connectionarray.length; i += 2){
|
||||
groups.push(connectionarray.slice(i, i + 2));
|
||||
}
|
||||
|
||||
//what is missing to connect the pages is the coordinates of the pages.
|
||||
//The coordinates of every page are stored in the dictionary, so I need to fetch them from there.
|
||||
for(var i = 0; i < groups.length; i++){
|
||||
var val1 = dict[groups[i][0]]; //gets the value stored in the dictionary of the first element of each subarray in "groups"
|
||||
var val2 = dict[groups[i][1]]; //gets the value of the second element
|
||||
var travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 2, dashArray: '10', lineCap: 'butt'}).addTo(map); //makes line. Done!
|
||||
}
|
||||
|
||||
//console.log(removeDuplicates(fieldarray));
|
||||
|
||||
}; //ends big function
|
||||
|
||||
|
||||
|
||||
var scriptTag = document.createElement("script"); // Dynamically create a "script" tag
|
||||
scriptTag.src = apiEndpoint + "?" + params + "&callback=callback"; // Point to the query string
|
||||
document.body.appendChild(scriptTag); // Add the script tag to the document
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,48 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@ -0,0 +1,792 @@
|
||||
@font-face {
|
||||
font-family: "lunchtype";
|
||||
src: url("/var/www/html/mediawiki/skins/Vector/fonts/lunchtype24-regular-expanded.woff");
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "lunchtype2";
|
||||
src: url("/var/www/html/mediawiki/skins/Vector/fonts/lunchtype25-regular_condensed-webfont.woff");
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* code than comes with leaflet */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
/* Prevents IE11 from highlighting tiles in blue */
|
||||
.leaflet-tile::selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer,
|
||||
.leaflet-container .leaflet-tile {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
/* Fallback for FF which doesn't support pinch-zoom */
|
||||
touch-action: none;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.leaflet-container a {
|
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 1%;
|
||||
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
will-change: opacity;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive,
|
||||
svg.leaflet-image-layer.leaflet-interactive path {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: black; /*color of link inside popup*/
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 20px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font-family: "lunchtype", serif;
|
||||
font-size: calc(10px + 0.5vw);
|
||||
line-height: 150%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
|
||||
.leaflet-default-icon-path {
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
/*border: 2px solid rgba(0,0,0,0.2);*/
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white; /*background of popup*/
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Helvetica, sans-serif;
|
||||
color: blue;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
|
||||
.leaflet-image-layer .leaflet-zoom-animated{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
/* my code from here */
|
||||
|
||||
|
||||
|
||||
.leaflet-container {
|
||||
background-color:rgba(255,0,0,0.0);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
/*background-image: url("IMG_8709.jpg");*/
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
|
||||
#map {
|
||||
width:100%;
|
||||
height:100%;
|
||||
|
||||
}
|
||||
|
||||
.leaflet-div-icon {
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
border: none;
|
||||
font-size: calc(9px + 2vw);
|
||||
font-family: "lunchtype2";
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.leaflet-div-icon a {
|
||||
font-family: "lunchtype";
|
||||
font-size: calc(9px + 0.2vw);
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
border: 2px solid lightgrey;
|
||||
border-radius: 500px;
|
||||
background-color: lightgrey;
|
||||
padding: 5px;
|
||||
transform: rotate(45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.leaflet-div-icon2 {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: calc(9px + 0.8vw);
|
||||
font-family: "lunchtype";
|
||||
font-weight: bold;
|
||||
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.leaflet-div-icon2 a {
|
||||
font-family: "lunchtype";
|
||||
font-size: calc(9px + 0.2vw);
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
border: 2px solid black;
|
||||
border-radius: 500px;
|
||||
background-color: black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes fade {
|
||||
0% {left:0px; top:0px;}
|
||||
75% {left:0px; top:50px;}
|
||||
100% {left:0px; top:0px;}
|
||||
}
|
||||
|
||||
.blinking {
|
||||
animation: fade 3s linear infinite alternate;
|
||||
}
|
||||
|
||||
.menu{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: "authentic";
|
||||
margin:1%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
font-size: calc(10px + 1vw);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: inline;
|
||||
font-size: calc(10px + 0.5vw);
|
||||
padding-right: 10%;
|
||||
}
|
||||
Loading…
Reference in New Issue