How to load geojson from controller to google api with thymeleaf on Spring Boot?
Multi tool use
How to load geojson from controller to google api with thymeleaf on Spring Boot?
I´m trying to load or add my json (with GeoJson format) from my controller sending to HTML page by Thymeleaf to display on Google API MAP but i can´t do it (nothing happend, the map don´t load the geojson, there is no error on the Console, just nothing append. Just appear the Map but without any Mark of my Json .)
On my Controller i generate my GeoJson with Json Objects, and then i send to the page with Model.
This is my controller (i already validate my json on geojson.io and it works):
@GetMapping("/test")
public String Json( Model model) throws JSONException {
JSONObject featureCollection = new JSONObject();
featureCollection.put("type", "FeatureCollection");
JSONObject properties = new JSONObject();
properties.put("name", "ESPG:4326");
JSONObject crs = new JSONObject();
crs.put("type", "name");
crs.put("properties", properties);
featureCollection.put("crs", crs);
JSONArray features = new JSONArray();
.
.
.
.
// System.out.println(featureCollection.toString());
// }
}
//System.out.println(featureCollection.toString());
model.addAttribute("geojson",featureCollection);
return "test";
}
This is my HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="initMap()">
<div id="map"></div>
<script th:inline="javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom : 4,
center : {
lat : -7,
lng : 137
}
});
var json = [[${geojson}]];
//var geojson = /*[[${geojson}]]*/'default';
map.data.addGeoJson(json);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&callback=initMap">
</script>
</body>
</html>
Yes, my fault. I already modify.
– K. Cisneros
Jul 1 at 20:47
1 Answer
1
Answer:
Was necessary Parse the object:
var json = JSON.parse([[${geojson}]]);
map.data.addGeoJson(json);
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
"but i can´t do it" - please explain in detail what this means. Include all error messages and/or stack trace (format as code) and explain what troubleshooting steps you have performed and what you found. Please visit the help center and especially read How to Ask.
– Jim Garrison
Jul 1 at 20:14