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
commit
543f519688
  1. 77
      examples/cleverroute.html

77
examples/cleverroute.html

@ -30,12 +30,48 @@ @@ -30,12 +30,48 @@
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 latLng = new google.maps.LatLng(48.7758,9.1829);
// 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);
var map = new google.maps.Map(document.getElementById("map_canvas"), {
@ -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>

Loading…
Cancel
Save