農家さん支援で危険地帯マップを作成する
草刈機を運転させてもらいました。
スピード落とせば安全かと思いきや下りの斜面になると急にスピードが上がります。
ぬかるみ具合でも変わるかもしれません。
横向きで斜面を横断したらもしかしたらバランスを崩して倒れるかもと思いました。
そこで危険な角度になったら緯度経度情報をサーバに送信して、今後の注意喚起に使えないかと思い、緯度経度と危険レベル、発生時間をDBにもってGoogleMapに表示するサイトをためしにつくってみようと思いました。
Djangoは"DjangoGirls"というTutorialをやっただけの経験です。
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?key=AIzaSyAh_Ih0kqtE9CgopEecFZ0c1ilkIG3hnps&language=ja"
></script>
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<link rel="stylesheet" href="{% static 'googlemap/css/bootstrap.min.css' %}">
</head>
<body>
{% block extrahead %}
<link href="{% static 'map.css' %}" rel="stylesheet">
{% endblock %}
<h4 class="mt-4 border-bottom">Accident Locations</h4>
<!-- <div id='map' style="width:800px;height:800px;"></div> -->
<div id='map' ></div>
<script type="text/javascript">
/* var infoContent = "<h1>Placeholder Information</h1>";
var infoWindow = new google.maps.InfoWindow({
content: infoContent
}); */
const icons = [
'/static/level_1_icon_re.png',
'/static/level_2_icon_re.png',
];
const defPos = new google.maps.LatLng(36.7679949,138.2849613)
const options = { zoom: 16, center: defPos, mapTypeId: 'roadmap'}
const map = new google.maps.Map(document.querySelector('#map'), options)
/* map.addListener("center_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(() => {
map.panTo(marker.getPosition());
}, 10000);
}); */
var infoWindow = null;
{% for accident in accidents %}
var marker = new google.maps.Marker(
{position: new google.maps.LatLng({{accident.latitude}},{{accident.longitude}}),
map: map,
icon: {
url: icons[{{accident.level}}],
size: new google.maps.Size(64, 64)
},
label: {text: 'here!!', color:'blue'}}); /* this cemicollon is important. yoroshiku-desu */
(function(_marker) {
_marker.addListener("click", () => {
map.setZoom(19);
map.setCenter(_marker.getPosition());
var accident_date = "{{accident.created_date}}";
var infoContent = accident_date;
if (infoWindow != null) {
infoWindow.close();
}
infoWindow = new google.maps.InfoWindow({
content: infoContent
});
infoWindow.open(map, _marker);
});
})(marker);
{% endfor %}
</script>
"test"
</body>
</html>
0コメント