Add code and style for basic map display
This commit is contained in:
don philipe
18
src/main/java/de/spacedon/MyServlet.java
Normal file
18
src/main/java/de/spacedon/MyServlet.java
Normal file
@@ -0,0 +1,18 @@
|
||||
package de.spacedon;
|
||||
|
||||
import java.io.IOException;
|
||||
import jakarta.servlet.ServletException;
|
||||
import jakarta.servlet.http.HttpServlet;
|
||||
import jakarta.servlet.http.HttpServletRequest;
|
||||
import jakarta.servlet.http.HttpServletResponse;
|
||||
|
||||
public class MyServlet extends HttpServlet {
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@Override
|
||||
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
|
||||
response.setContentType("application/json");
|
||||
response.setStatus(HttpServletResponse.SC_OK);
|
||||
response.getWriter().println("{\"status\":\"ok\"}");
|
||||
}
|
||||
}
|
||||
36
src/main/java/de/spacedon/PilgrimServer.java
Normal file
36
src/main/java/de/spacedon/PilgrimServer.java
Normal file
@@ -0,0 +1,36 @@
|
||||
package de.spacedon;
|
||||
|
||||
import java.io.File;
|
||||
|
||||
import org.eclipse.jetty.server.Connector;
|
||||
import org.eclipse.jetty.server.Server;
|
||||
import org.eclipse.jetty.server.ServerConnector;
|
||||
import org.eclipse.jetty.servlet.DefaultServlet;
|
||||
import org.eclipse.jetty.servlet.ServletContextHandler;
|
||||
import org.eclipse.jetty.servlet.ServletHolder;
|
||||
|
||||
public class PilgrimServer {
|
||||
|
||||
/**
|
||||
* Register Servlets and start Jetty server
|
||||
*/
|
||||
public static void main(String[] args) throws Exception {
|
||||
Server server = new Server(8082);
|
||||
ServletContextHandler contextHandler = new ServletContextHandler(ServletContextHandler.SESSIONS);
|
||||
contextHandler.setContextPath("/");
|
||||
server.setHandler(contextHandler);
|
||||
|
||||
// register custom Servlet at endpoint /index
|
||||
contextHandler.addServlet(new ServletHolder(new MyServlet()), "/index");
|
||||
|
||||
// register index.html
|
||||
ServletHolder staticHolder = new ServletHolder(new DefaultServlet());
|
||||
staticHolder.setInitParameter("resourceBase", "src/main/webapp");
|
||||
staticHolder.setInitParameter("pathInfoOnly", "true");
|
||||
staticHolder.setInitParameter("dirAllowed", "false");
|
||||
contextHandler.addServlet(staticHolder, "/*");
|
||||
|
||||
server.start();
|
||||
server.join();
|
||||
}
|
||||
}
|
||||
85
src/main/webapp/index.html
Normal file
85
src/main/webapp/index.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Display a map</title>
|
||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<script src="lib.js"></script>
|
||||
<script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script>
|
||||
<link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#features {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20%;
|
||||
overflow: auto;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.maplibregl-popup {
|
||||
max-width: 200px;
|
||||
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
</div>
|
||||
|
||||
<pre id="features"></pre>
|
||||
<script>
|
||||
var map = new maplibregl.Map({ container: 'map', // container id
|
||||
//style: 'https://demotiles.maplibre.org/style.json', // style URL
|
||||
style: 'spacedon.json', // style URL
|
||||
center: [13, 51], // starting position [lng, lat]
|
||||
zoom: 6 // starting zoom
|
||||
});
|
||||
map.addControl(new maplibregl.NavigationControl());
|
||||
map.on('mousemove', function (e) {
|
||||
var features = map.queryRenderedFeatures(e.point);
|
||||
// Limit the number of properties we're displaying for
|
||||
// legibility and performance
|
||||
var displayProperties = [ 'type', 'properties', 'id', 'layer', 'source', 'sourceLayer', 'state' ];
|
||||
var displayFeatures = features.map(function (feat) {
|
||||
var displayFeat = {};
|
||||
displayProperties.forEach(function (prop) {
|
||||
displayFeat[prop] = feat[prop];
|
||||
});
|
||||
return displayFeat;
|
||||
});
|
||||
document.getElementById('features').innerHTML = JSON.stringify( displayFeatures, null, 2 );
|
||||
});
|
||||
map.on('click', function (e) {
|
||||
var coordinates = e.lngLat;
|
||||
|
||||
// Ensure that if the map is zoomed out such that multiple
|
||||
// copies of the feature are visible, the popup appears
|
||||
// over the copy being pointed to.
|
||||
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
||||
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
|
||||
}
|
||||
|
||||
new maplibregl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML('<button>start</button></br><button>via</button></br><button>finish</button>')
|
||||
.addTo(map);
|
||||
});
|
||||
const startMarker = new maplibregl.Marker({draggable: true})
|
||||
.setLngLat([0, 0]);
|
||||
const finishMarker = new maplibregl.Marker({draggable: true})
|
||||
.setLngLat([0, 0]);
|
||||
const viaMarkers = new Array();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
7
src/main/webapp/lib.js
Normal file
7
src/main/webapp/lib.js
Normal file
@@ -0,0 +1,7 @@
|
||||
let lib = new function () {
|
||||
this.setStartMarker = function (coordinates) {
|
||||
}
|
||||
this.setMarker = function (marker, lng, lat, map) {
|
||||
marker.setLngLat([lng, lat]).addTo(map);
|
||||
};
|
||||
};
|
||||
1849
src/main/webapp/spacedon.json
Normal file
1849
src/main/webapp/spacedon.json
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user