sim51/index.html

## index.html
<html>
<head>
    <title>Neo4j and JCDecaux API</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.1/lib/browser/neo4j-web.min.js"></script>

    <style>
        #map { width: 100%; height: 100%; }
    </style>
</head>
<body>

<div id="map"></div>

<script>
    var NEO4j_USER = 'readonly';
    var NEO4J_PASSWORD = 'r34d0n1y';
    var NEO4J_URL = 'bolt://localhost';
    var query = " \
            WITH point({latitude: {lat}, longitude: {lng}}) as my_position \
            MATCH (station:Station)-[:LAST_STATE]->(state:State) \
            WHERE state.status = 'OPEN' AND state.available_bikes > 0 \
            WITH station, state, distance(point({latitude: station.lat, longitude: station.lng}), my_position)  AS distance \
            ORDER BY  distance \
            LIMIT 5 \
            WITH collect( { \
                    type: 'Feature', \
                    geometry: { \
                        type: 'Point', \
                        coordinates: [station.lng, station.lat] \
                    }, \
                    properties : { \
                        name : station.name, \
                        distance: round(distance), \
                        address : station.address, \
                        free_bike: state.available_bikes, \
                        free_slot: state.available_bike_stands \
                    } \
                }) AS features \
            RETURN  { type: 'FeatureCollection', features: features } AS geojson";

    navigator.geolocation.getCurrentPosition(function(position) {
        var driver = neo4j.v1.driver(NEO4J_URL, neo4j.v1.auth.basic(NEO4j_USER, NEO4J_PASSWORD));
        var session = driver.session();
        session.run(query, { lat:position.coords.latitude, lng:position.coords.longitude }
        ).subscribe({
            onNext: function(record) {
                createMap(record._fields[0], position.coords);
                console.log(record._fields);
            },
            onCompleted: function() {
                // Completed!
                session.close();
            },
            onError: function(error) {
                console.log(error);
            }
        });

    });

    function createMap(geojson, coords) {
        var map = L.map('map').setView([coords.latitude, coords.longitude], 17);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'mapbox.light'
        }).addTo(map);

        // Add in a crosshair for the map
        var crosshairIcon = L.icon({
            iconUrl: 'http://www.clipartbest.com/cliparts/Kcn/g6e/Kcng6e9cq.png',
            iconSize:     [50, 50], // size of the icon
            iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
        });
        crosshair = new L.marker(map.getCenter(), {icon: crosshairIcon, clickable:false});
        crosshair.addTo(map);

        L.geoJSON(
            geojson,
            {
                onEachFeature: function(feature, layer) {
                    layer.bindPopup(" \
                        <h3>" + feature.properties.name + " ( " + feature.properties.distance + " meters)</h3> \
                        <p> " + feature.properties.address + "</p> \
                        <strong>Number of available bikes :</strong> " + feature.properties.free_bike + "<br/ > \
                        <strong>Number of free slots :</strong> " + feature.properties.free_slot + " <br/ >\
                    ")
                }
            }
        ).addTo(map);
    }
</script>

</body>
</html>
0Looking
	<html>
	<head>
	<title>Neo4j and JCDecaux API</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script src="https://cdn.rawgit.com/neo4j/neo4j-javascript-driver/1.1/lib/browser/neo4j-web.min.js"></script>

	<style>
	#map { width: 100%; height: 100%; }
	</style>
	</head>
	<body>

	<div id="map"></div>

	<script>
	var NEO4j_USER = 'readonly';
	var NEO4J_PASSWORD = 'r34d0n1y';
	var NEO4J_URL = 'bolt://localhost';
	var query = " \
	WITH point({latitude: {lat}, longitude: {lng}}) as my_position \
	MATCH (station:Station)-[:LAST_STATE]->(state:State) \
	WHERE state.status = 'OPEN' AND state.available_bikes > 0 \
	WITH station, state, distance(point({latitude: station.lat, longitude: station.lng}), my_position) AS distance \
	ORDER BY distance \
	LIMIT 5 \
	WITH collect( { \
	type: 'Feature', \
	geometry: { \
	type: 'Point', \
	coordinates: [station.lng, station.lat] \
	}, \
	properties : { \
	name : station.name, \
	distance: round(distance), \
	address : station.address, \
	free_bike: state.available_bikes, \
	free_slot: state.available_bike_stands \
	} \
	}) AS features \
	RETURN { type: 'FeatureCollection', features: features } AS geojson";

	navigator.geolocation.getCurrentPosition(function(position) {
	var driver = neo4j.v1.driver(NEO4J_URL, neo4j.v1.auth.basic(NEO4j_USER, NEO4J_PASSWORD));
	var session = driver.session();
	session.run(query, { lat:position.coords.latitude, lng:position.coords.longitude }
	).subscribe({
	onNext: function(record) {
	createMap(record._fields[0], position.coords);
	console.log(record._fields);
	},
	onCompleted: function() {
	// Completed!
	session.close();
	},
	onError: function(error) {
	console.log(error);
	}
	});

	});

	function createMap(geojson, coords) {
	var map = L.map('map').setView([coords.latitude, coords.longitude], 17);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
	'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
	'Imagery © <a href="http://mapbox.com">Mapbox</a>',
	id: 'mapbox.light'
	}).addTo(map);

	// Add in a crosshair for the map
	var crosshairIcon = L.icon({
	iconUrl: 'http://www.clipartbest.com/cliparts/Kcn/g6e/Kcng6e9cq.png',
	iconSize: [50, 50], // size of the icon
	iconAnchor: [10, 10], // point of the icon which will correspond to marker's location
	});
	crosshair = new L.marker(map.getCenter(), {icon: crosshairIcon, clickable:false});
	crosshair.addTo(map);

	L.geoJSON(
	geojson,
	{
	onEachFeature: function(feature, layer) {
	layer.bindPopup(" \
	<h3>" + feature.properties.name + " ( " + feature.properties.distance + " meters)</h3> \
	<p> " + feature.properties.address + "</p> \
	<strong>Number of available bikes :</strong> " + feature.properties.free_bike + "<br/ > \
	<strong>Number of free slots :</strong> " + feature.properties.free_slot + " <br/ >\
	")
	}
	}
	).addTo(map);
	}
	</script>

	</body>
	</html>
	0Looking