leaflet map

Haritha2298 · Feb 20, 2020 · 7562c1f · 7562c1f
1 parent 4ce4a6a
commit 7562c1f
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 64 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,3 +18,4 @@ build/
 
 .ipynb_checkpoints/
 
+scripts/my_script.py
diff --git a/app/routes.py b/app/routes.py
@@ -1,6 +1,7 @@
-from flask import render_template
+from flask import render_template, url_for
 from app import app
 
+
 @app.route('/')
 @app.route('/index')
 def index():

diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -0,0 +1 @@
+#leafletmap { height: 600px;}
diff --git a/app/static/js/amsterdam.js b/app/static/js/amsterdam.js
@@ -0,0 +1,44 @@
+// function to draw the amsterdam map
+// function draw(geo_data) {
+//     "use strict";
+//     var margin = 75,
+//         width = 1400-margin,
+//         height = 600-margin;
+
+//     var svg = d3.select("#geoMap")
+//                 .append("svg")
+//                 .attr("width", width + margin)
+//                 .attr("height", height + margin)
+//                 .append("g")
+//                 .attr("class", "map");
+
+//     var projection = d3.geo.mercator()
+//                            .scale(150)
+//                            .translate( [width / 2, height / 1.5]);
+
+//     var path = d3.geo.path().projection(projection);
+
+//     var map = svg.selectAll('path')
+//                  .data(geo_data.features)
+//                  .enter()
+//                  .append('path')
+//                  .attr('d', path)
+//                  .style('fill', 'lightBlue')
+//                  .style('stroke', 'black')
+//                  .style('stroke-width', 0.5);
+// };
+
+// var adamMap = d3.json("../data/world_countries.json");
+
+// d3.json("../data/world_countries.json", draw);
+
+var adamMap = L.map('leafletMap').setView([52.3667, 4.8945], 13);
+
+L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?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: 18,
+    id: 'mapbox/streets-v11',
+    tileSize: 512,
+    zoomOffset: -1,
+    accessToken: 'pk.eyJ1Ijoibmlsc2xlaCIsImEiOiJjazZ1bDN0OWEwNjUwM21vYTB6Nmk3a3ZpIn0.mCcdD-MMyecijCUrRJKNCg'
+}).addTo(adamMap);
diff --git a/app/static/style.css b/app/static/style.css
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -1,38 +1,24 @@
 <html>
     <head>
-        <link rel="stylesheet" href="style.css">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <!-- <style>
-        * {
-          box-sizing: border-box;
-        }
-        
-        /* Create two unequal columns that floats next to each other */
-        .column {
-          float: left;
-          padding: 10px;
-          height: 300px; /* Should be removed. Only for demonstration */
-        }
+        <!-- our css stylesheet -->
+        <link rel="stylesheet" href="../static/css/style.css">
+
+        <!-- D3 package -->
+        <script src="https://d3js.org/d3.v5.min.js"></script>
 
-        .left {
-          width: 25%;
-        }
+        <!-- Leaflet library -->
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+        crossorigin=""/>
+
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+        crossorigin=""></script>
 
-        .right {
-          width: 75%;
-        }
-        
-        /* Clear floats after the columns */
-        .row:after {
-          content: "";
-          display: table;
-          clear: both;
-        }
-        </style>  -->
+        <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
     <body>
         <!-- <div>Visualization: <a href="/index">Home</a></div> -->
-        <hr>
         {% block content %}{% endblock %}
     </body>
 </html>
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -1,18 +1,17 @@
 {% extends "base.html" %}
 
 {% block content %}
-  <h2>Visualization</h2>
+  <h3>Amsterdam Map</h3>
 
-  <div class="row">
-
-    <div class="column left" style="background-color:#aaa;">
-      <h2>Navigation Bar</h2>
-    </div>
+  <div id="navigation" class="row">
+    <h4>Navigation</h4>
+  </div>
 
-    <div class="column right" style="background-color:#bbb;">
-      <h2>Map of Amsterdam</h2>
-    </div>
+  <div id="geoMap" class="row">
 
+    <div id='leafletMap'></div>
+    <script type="text/javascript" src="../static/js/amsterdam.js"></script>
+
   </div>
 
 {% endblock %}

diff --git a/scripts/data_read.py b/scripts/data_read.py
@@ -1,7 +1,6 @@
 import json
 import pandas as pd
 
-
 def read_json(file):
     # Open the file
     with open(file, 'r') as f:
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,3 +18,4 @@ build/

		.ipynb_checkpoints/

		scripts/my_script.py