shimizu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    日本全国に1361店舗あるファミリーレストラン「ガスト」を効率よく回れるルートを検討するための案。
巡回セールスマン問題ににたやつ。
焼きなまし法(simulated annealing)を使って算出しているけれど、なかなか最適なルートは作れない。
関東から東北にかけてが特にあやしげ。
データは2019年4月26日時点のもの。
Built with blockbuilder.org

  
## allLines.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              allLines.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html lang='jp'>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.css" />
<script src="https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.min.js"></script>

<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#mapid {
    width:100%;
    height:100%;
}

</style>

</head>
<body>

<div id="mapid"></div>

<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>

<script>
var mymap = L.map('mapid').setView([31.2913471,130.274312], 6);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 10,
    id: 'mapbox.light',
    accessToken: 'pk.eyJ1Ijoic2hpbWl6dSIsImEiOiJjam95MDBhamYxMjA1M2tyemk2aHMwenp5In0.i2kMIJulhyPLwp3jiLlpsA'
}).addTo(mymap);


var p1 = sendGetReauest('allLines.geojson');
var p2 = sendGetReauest('points.geojson');

Promise.all([p1, p2]).then(function(data){
    var lines = data[0];
    var points = data[1];
    console.log(data)

    L.geoJSON(lines, {
        style: {
    "color": "#d1000f",
    "weight": 1,
    "opacity": 1
    }
    }).addTo(mymap);


    var geojsonMarkerOptions = {
        radius: 8,
        fillColor: "#f8d202",
        color: "#d1000f",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.65
    };

    var onEachFeature = function(feature, layer) {
        if (feature.properties && feature.properties.name) {
            layer.bindPopup(feature.properties.name + "<br>" + feature.properties.address);
        }
    }

    L.geoJSON(points, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        },
        onEachFeature: onEachFeature
    }).addTo(mymap);

});


function sendGetReauest(url) {
    return fetch(url, {
        method: "GET",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        }
    })
    .then(function(response){ return response.json() });
}


</script>
</body>
</html>

## points.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              points.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang='jp'>
	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
	integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
	crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
	integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
	crossorigin=""></script>

	<link rel="stylesheet" href="https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.css" />
	<script src="https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.min.js"></script>

	<style>
	html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	}

	#mapid {
	width:100%;
	height:100%;
	}

	</style>

	</head>
	<body>

	<div id="mapid"></div>

	<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>

	<script>
	var mymap = L.map('mapid').setView([31.2913471,130.274312], 6);
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
	attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
	maxZoom: 10,
	id: 'mapbox.light',
	accessToken: 'pk.eyJ1Ijoic2hpbWl6dSIsImEiOiJjam95MDBhamYxMjA1M2tyemk2aHMwenp5In0.i2kMIJulhyPLwp3jiLlpsA'
	}).addTo(mymap);


	var p1 = sendGetReauest('allLines.geojson');
	var p2 = sendGetReauest('points.geojson');

	Promise.all([p1, p2]).then(function(data){
	var lines = data[0];
	var points = data[1];
	console.log(data)

	L.geoJSON(lines, {
	style: {
	"color": "#d1000f",
	"weight": 1,
	"opacity": 1
	}
	}).addTo(mymap);


	var geojsonMarkerOptions = {
	radius: 8,
	fillColor: "#f8d202",
	color: "#d1000f",
	weight: 1,
	opacity: 1,
	fillOpacity: 0.65
	};

	var onEachFeature = function(feature, layer) {
	if (feature.properties && feature.properties.name) {
	layer.bindPopup(feature.properties.name + "<br>" + feature.properties.address);
	}
	}

	L.geoJSON(points, {
	pointToLayer: function (feature, latlng) {
	return L.circleMarker(latlng, geojsonMarkerOptions);
	},
	onEachFeature: onEachFeature
	}).addTo(mymap);

	});


	function sendGetReauest(url) {
	return fetch(url, {
	method: "GET",
	headers: {
	"Content-Type": "application/json; charset=utf-8",
	}
	})
	.then(function(response){ return response.json() });
	}



	</script>
	</body>
	</html>