A Spring Boot example spatial (Mysql & VueLayer)

Frameworks used

• SpringBoot 2.4.0

• Docker MySQL 8.0.22

• VueJS 2.5.17

• VueLayer v0.11.4

Launch

Requires the following software : Maven (with JDK 11), NPM, Docker & Docker-Compose (> 1.13.0)

Ports used : 8080 for API, 8000 for WEB, 3306 for MySQL

First terminal - API

docker-compose up -d mysql
cd api; mvn clean spring-boot:run

# Continue when you see :
# 2020-11-21 14:33:51.625 INFO 143935 --- [main] fr.jco.api.ApiApplication : Started ApiApplication in 2.113 seconds (JVM running for 2.374)

Second terminal - Web

# Launch WEB
cd web; npm install; npm run start

Then, visit: http://localhost:8000/

JAVA Notes

• Entity should use the right Point class.

@Entity
public class YourEntity {
	@Column(columnDefinition = "POINT")
	private org.locationtech.jts.geom.Point point; // Use locationtech package
}

• Use the right dialect for spatial :

spring.jpa.properties.hibernate.dialect: org.hibernate.spatial.dialect.mysql.MySQL8SpatialDialect

• Jackson needs org.locationtech.spatial4j to READ / WRITE Geometry items

@Configuration
public class JacksonConfig {
	// Bean to serialize / deserialize all objects which extend org.locationtech.jts.geom.Geometry (Point, Polygon, LineString)
	@Bean
	public org.locationtech.spatial4j.io.jackson.ShapesAsGeoJSONModule shapeAsJson() {
		return new org.locationtech.spatial4j.io.jackson.ShapesAsGeoJSONModule();
	}
}

API Result :

{
  "id":1,
  "name":"Mairie du 1er Arrondissement de Lyon",
  "point": {
    "type": "Point",
    "coordinates": [45.76944, 4.8301]
  },
  "address": "2 place Sathonay - 69283 Lyon",
  "phone": "04.72.98.54.04",
  "webSite": "https://www.mairie1.lyon.fr"
}

Enjoy !