Skip to content

GitLab

Commit 11915bfa authored by Porter Libby's avatar Porter Libby
Browse files

testing leaflet for map view

parent dc83962d
Hide whitespace changes
Inline Side-by-side
public/css/map.css
View file @ 11915bfa
......@@ -4,6 +4,10 @@
height: 100%;
width: 100%;
}
#viewDiv{
width: 100%;
height: 100%;
}
.esri-coordinate-conversion{
width: 300px;
}
\ No newline at end of file
public/js/map.js
View file @ 11915bfa
/*
#
# Datavis 2.0
# Porter Libby - 2019 - initial setup
# pelibby16@earlham.edu
#
# Map functions
*/
var mapstate = 0; // keep track of which map overlay is being used
var default_center = [-13.7055,65.2941]; //default starting coords for the map view
var view;
var map;
var prev_points = [];
// Set map types
maptype1 = "topo";
maptype2 = "satellite";
require(["esri/Map", "esri/views/SceneView", "esri/views/MapView", "esri/Graphic", "esri/widgets/BasemapToggle", "esri/widgets/CoordinateConversion", "esri/PopupTemplate" ], function(
Map,
SceneView,
MapView,
Graphic,
BasemapToggle,
CoordinateConversion,
PopupTemplate
) {
map = new Map({
basemap: maptype1
});
view = new MapView({
center: [-13.68, 65.29],
container: "viewDiv",
map: map,
zoom: 18
});
var basemapToggle = new BasemapToggle({
viewModel: { // autocasts as new BasemapToggleViewModel()
view: view, // The view that provides access to the map's "streets" basemap
nextBasemap: maptype2 // Allows for toggling to the "hybrid" basemap
}
});
var coordinateConversionWidget = new CoordinateConversion({
view: view
});
view.ui.add(basemapToggle, {
position: "bottom-left",
width: 200
});
view.ui.add(coordinateConversionWidget, "bottom-left");
var map = null;
$( document ).ready(function() {
map = L.map('viewDiv').setView([63.44382, -20.272245], 13);
map.getSize();
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
});
function renderMap(){
map.invalidateSize();
}
function createPoints(points,color){
new_points = [points[0]];
prunes = 0;
for(x=1;x<points.length;x++){
if ((points[x].latitude == points[x-1].latitude) && (points[x].longitude == points[x-1].longitude) && (points[x].recordtime == points[x-1].recordtime)){
prunes++;
}else{
new_points.push(points[x]);
}
for(x = 0; x < points.length; x++){
console.log(points[x]);
p = points[x];
L.marker([ p["latitude"], p["longitude"] ]).addTo(map)
.bindPopup(p["recordtime"])
}
points = new_points
console.log(points);
console.info("Pruned " + prunes + " duplicate map points.");
console.warn('UPDATING MAP: this might take a minute!');
require(["esri/Map", "esri/views/SceneView", "esri/views/MapView", "esri/Graphic", "esri/widgets/BasemapToggle", "esri/widgets/CoordinateConversion", "esri/PopupTemplate", "esri/layers/FeatureLayer" ], function(
Map,
SceneView,
MapView,
Graphic,
BasemapToggle,
CoordinateConversion,
PopupTemplate,
FeatureLayer
){
if (prev_points.length != 0){
view.graphics.removeMany(prev_points);
prev_points = [];
}
out_points = [];
var markerSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: color,
};
if (points.length > 0){
view.center = [points[0].longitude, points[0].latitude]; // set center of view to the first point in the set
}
for(x=0;x<points.length;x++){
var point = {
type: "point", // autocasts as new Point()
longitude: points[x].longitude,
latitude: points[x].latitude
};
let timedate = new Date(points[x].recordtime).toString().split(" ")
let date = timedate[0] + " " + timedate[1] + " " + timedate[2] + ", " + timedate[3];
let time = timedate[4] + " " + timedate[6] + " " + timedate[7] + " " + timedate[8];
var pointAttr = {
Longitude: points[x].longitude,
Latitude: points[x].latitude,
Elevation: points[x].elevation,
Accuracy: points[x].accuracy,
Time: time,
Date: date,
Platform: points[x].platformid,
SensorType: points[x].sensortype,
SensorValue: points[x].value_1 + " " + points[x].sensorunits,
}
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol,
attributes: pointAttr,
popupTemplate: { // NEW
// autocasts as new PopupTemplate()
title: "{Platform} - {Time}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Longitude"
},
{
fieldName: "Latitude"
},
{
fieldName: "Elevation"
},
{
fieldName: "Accuracy"
},
{
fieldName: "Time"
},
{
fieldName: "Date"
},
{
fieldName: "Platform"
},
{
fieldName: "SensorType"
},
{
fieldName: "SensorValue"
}
]
}
]
}
});
out_points.push(pointGraphic);
}
prev_points = prev_points.concat(out_points);
view.graphics.addMany(out_points);
});
}
\ No newline at end of file
}
/*
{
"tripid": 27,
"siteid": 12,
"sectorid": 102,
"hostid": "aaef7faa",
"platformid": "ev4",
"sensorid": "81c",
"sensortype": "MPL3115A2-Air Temperature",
"sensorunits": "C",
"recordtime": "2019-06-05T12:39:53.000Z",
"longitude": -20.272245,
"latitude": 63.44382,
"quality": 0,
"elevation": 65,
"accuracy": 6.068,
"satellites": 17,
"value_1": "25.144",
"value_2": "0.0",
"value_3": "0.0",
"value_4": null,
"value_5": null,
"value_6": null
}
*/
\ No newline at end of file
public/js/util.js
View file @ 11915bfa
......@@ -20,6 +20,7 @@ function switchToMap(){
document.getElementById("mapView").style.display = "block";
console.log('switched to map view');
setTimeout(function(){ document.getElementById("loading").style.display = "none"; }, 10);
renderMap();
}
function switchToGraph(){
var dataview = document.getElementById("dataView");
......
views/index.ejs
View file @ 11915bfa
......@@ -5,17 +5,15 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>IFS Datavis Tool</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
<script src="https://js.arcgis.com/4.21/"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" integrity="sha512-Rp0yZ3NMh1xOUZ4VHYggmX4pq4ZJdpcOETH03qBD5qNDsqTBw1MzUnX0T5PcTJmr2mNTOmtbxsHaGwzjylNpHA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/data.js"></script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment