hussam
/
map-for-cleverroute
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

example source code for cleverroute map now reads yaml with coworking spaces and adds markers of it to the map

main
Hussam Saoud 2 years ago
parent
80c580d3f2
commit
543f519688
1 changed files with 83 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 75
      examples/cleverroute.html

75
examples/cleverroute.html
Unescape View File

@ -30,11 +30,47 @@ @@ -30,11 +30,47 @@
white-space: nowrap;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="../dist/index.dev.js"></script>
<script src="https://gitea.cleverroute.net/hussam/map-for-cleverroute/raw/branch/main/dist/index.dev.js"></script>
<!-- <script src="../dist/index.dev.js"></script> -->
<script>
var marker;
function initMap() {
// var request = new XMLHttpRequest();
// request.open('GET', './Mouse-Over Yaml.yaml', true);
// request.responseType = 'blob';
// request.onload = function() {
// var reader = new FileReader();
// reader.readAsDataURL(request.response);
// reader.onload = function(e){
// console.log('DataURL:', e.target.result);
// };
// };
// request.send();
// const text = `
// # Employee records
// - martin:
// name: Martin D'vloper
// job: Developer
// skills:
// - python
// - perl
// - pascal
// - tabitha:
// name: Tabitha Bitumen
// job: Developer
// skills:
// - lisp
// - fortran
// - erlang
// `;
// const yaml = jsyaml.load(text);
// console.log(yaml);
async function initMap() {
var latLng = new google.maps.LatLng(48.7758, 9.1829);
var homeLatLng = new google.maps.LatLng(48.7758, 9.1829);
@ -43,9 +79,18 @@ @@ -43,9 +79,18 @@
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
let myData;
async function getData() {
fetch("./Mouse-Over Yaml.yaml")
.then((response) => response.text())
.then((yamlString) => jsyaml.load(yamlString))
.then((data) => {
console.log("data=", data);
myData = data;
myData.destinations.forEach((d) => {
marker = new markerWithLabel.MarkerWithLabel({
position: homeLatLng,
position: new google.maps.LatLng(d.lonLat[1], d.lonLat[0]),
map: map,
draggable: true,
raiseOnDrag: true,
@ -56,13 +101,29 @@ @@ -56,13 +101,29 @@
});
var iw = new google.maps.InfoWindow({
content: "<b>BRIK Coworking</b><br> \
<a href=\"https://soeren.cleverroute.net/?origin=Jesberg%2C%20Hessen&arrival=2022-04-29T10%3A00%3A00.000Z&destination=Stuttgart%2C%20Baden-W%C3%BCrttemberg\"> Fahrt finden mit cleverroute</a>",
content:
'<b>'+d.name+'</b><br> \
<a href="https://soeren.cleverroute.net/?origin=Jesberg%2C%20Hessen&arrival=2022-04-29T10%3A00%3A00.000Z&destination=Stuttgart%2C%20Baden-W%C3%BCrttemberg"> Fahrt finden mit cleverroute</a>',
});
google.maps.event.addListener(marker, "click", function (e) {
// window.parent.location.href = "https://bob.cleverroute.net"//`../?${toQueryString(p)}`;
iw.open(map, this);
});
});
});
}
await getData();
// marker = new markerWithLabel.MarkerWithLabel({
// position: homeLatLng,
// map: map,
// draggable: true,
// raiseOnDrag: true,
// labelContent: "A",
// labelAnchor: new google.maps.Point(-6, -35),
// labelClass: "labels", // the CSS class for the label
// labelInBackground: false,
// });
}
function log(h) {
document.getElementById("log").innerHTML += h + "<br />";
@ -70,9 +131,7 @@ @@ -70,9 +131,7 @@
</script>
</head>
<body onload="initMap()">
<p>
</p>
<p></p>
<div id="map_canvas" style="height: 400px; width: 100%"></div>
<div id="log"></div>
</body>

Write Preview
Loading…
Cancel
Save