InteractiveMap Web GIS(https://mapmarker.net)

Description

Front End Part is based on React, leaflet, PIXIjs and Html5.
Back End Part is based on SpringBoot and MongoDB.

Designed a Web Application based on React, JavaScript, SpringBoot and MongoDB, it’s a GIS platform, it provides interactive maps, where itineraries and events can be marked directly on the map, we provide some different styles of map for the user! Various 2D interactive markers are provided, users can add point Markers, rectangles, polygons, lines, circles, text and user can even make map as a Canvas using brush tool to draw draft, it’s easy to use especially on the mobile device with a touching screen. What's more, users can sign up and sign in with their username and password and search the citys by the name.
The map is based on Leaflet which is famous in the GIS area. Leaflet itself can't support any text on it, that’s an issue. I use PIXIjs to draw text, and innovatively integrate the text layer onto the leaflet map, so that the functions of the interactive map has been expanded.
Use html5 canvas to create the brush tool, so users could make rough sketch with the map as the background.
All the tools, menu and maps are integrated by React framework, and use Redux to transfer the state between different Components.

HomePage
Login
Change User Avatar
Edit Profile
Take ScreenShots
Point Mark
put point marker on the map
Polygon Mark
select the polygon tool and then click the key point on the map to draw the Polygon
Text Mark
write the text into the property menu, then put the text onto the map
Circle Mark
Click on the center of the circle and drag to draw the circle
Line Mark
click on the map to select the key point to draw a line
Paint on the map
select the Paint Tool, then there is a canvas added onto to map, so that you can draw what you what on to the map
Rectangle Mark
use two key point to draw a rectangle onto the map