diff --git a/api/api.go b/api/api.go
index ed88b97..14d5401 100755
--- a/api/api.go
+++ b/api/api.go
@@ -65,9 +65,6 @@ func NewAPI(e *echo.Echo, s *store.Store) {
 		return c.Redirect(http.StatusMovedPermanently, "/swagger/index.html")
 	})
 
-	// style
-	api.Static("/style", "./style")
-
 	api.Register()
 
 	for _, route := range api.Routes() {
diff --git a/server/server.go b/server/server.go
index ca2ec60..e3c0fe9 100755
--- a/server/server.go
+++ b/server/server.go
@@ -10,6 +10,7 @@ import (
 
 	"git.zhouxhere.com/zhouxhere/maptile/api"
 	"git.zhouxhere.com/zhouxhere/maptile/config"
+	"git.zhouxhere.com/zhouxhere/maptile/service"
 	"git.zhouxhere.com/zhouxhere/maptile/store"
 	"github.com/labstack/echo/v4"
 	"github.com/pkg/errors"
@@ -34,6 +35,7 @@ func NewServer(ctx context.Context, config *config.Config, store *store.Store) *
 	echoServer := echo.New()
 
 	api.NewAPI(echoServer, store)
+	service.NewMapService(echoServer, store)
 
 	addr := fmt.Sprintf("%s:%d", config.Addr, config.Port)
 	s.httpServer = &http.Server{
diff --git a/service/geojson.go b/service/geojson.go
new file mode 100644
index 0000000..ad3ed68
--- /dev/null
+++ b/service/geojson.go
@@ -0,0 +1,8 @@
+package service
+
+import "github.com/labstack/echo/v4"
+
+func (s *MapService) GetGeoJSONByName(c echo.Context) error {
+
+	return c.JSON(200, "ok")
+}
diff --git a/service/map.go b/service/map.go
new file mode 100644
index 0000000..ab474ce
--- /dev/null
+++ b/service/map.go
@@ -0,0 +1,75 @@
+package service
+
+import (
+	"context"
+	"fmt"
+	"log/slog"
+	"net/http"
+
+	"github.com/labstack/echo/v4"
+	"github.com/labstack/echo/v4/middleware"
+
+	_ "git.zhouxhere.com/zhouxhere/maptile/docs"
+	"git.zhouxhere.com/zhouxhere/maptile/store"
+)
+
+type MapService struct {
+	*echo.Echo
+	store *store.Store
+}
+
+func NewMapService(e *echo.Echo, s *store.Store) {
+	service := &MapService{e, s}
+
+	service.Use(middleware.Recover())
+
+	service.Use(middleware.RequestLoggerWithConfig(middleware.RequestLoggerConfig{LogStatus: true,
+		LogURI:      true,
+		LogError:    true,
+		HandleError: true, // forwards error to the global error handler, so it can decide appropriate status code
+		LogValuesFunc: func(c echo.Context, v middleware.RequestLoggerValues) error {
+			if v.Error != nil {
+				slog.LogAttrs(context.Background(), slog.LevelError, "REQUEST", slog.String("method", v.Method), slog.String("uri", v.URI), slog.Int("status", v.Status), slog.String("latency", v.Latency.String()), slog.String("error", v.Error.Error()))
+			} else {
+				slog.LogAttrs(context.Background(), slog.LevelInfo, "REQUEST", slog.String("method", v.Method), slog.String("uri", v.URI), slog.Int("status", v.Status), slog.String("latency", v.Latency.String()))
+			}
+			return nil
+		},
+	}))
+
+	service.HTTPErrorHandler = func(err error, c echo.Context) {
+		req := c.Request()
+		slog.LogAttrs(context.Background(), slog.LevelError, "REQUEST", slog.String("method", req.Method), slog.String("uri", req.RequestURI), slog.String("error", err.Error()))
+		c.JSON(http.StatusOK, err)
+	}
+
+	service.Use(middleware.CORSWithConfig(middleware.CORSConfig{
+		AllowOrigins: []string{"*"},
+		AllowMethods: []string{http.MethodGet, http.MethodPut, http.MethodPost, http.MethodDelete},
+		// AllowHeaders:     []string{"Content-Type", "Authorization"},
+	}))
+
+	service.Register()
+
+	for _, route := range service.Routes() {
+		fmt.Println(route.Method, route.Path)
+	}
+}
+
+func (s *MapService) Register() {
+
+	group := s.Group("/map")
+	// style
+	group.Static("/style", "./style")
+
+	// mbtiles
+	group.GET("/mbtiles/:name", s.GetMBTilesByName)
+	group.GET("/mbtiles/:name/:z/:x/:y", s.GetMBTilesByNameAndZAndXAndY)
+
+	// pmtiles
+	group.GET("/pmtiles/:name", s.GetPMTilesByName)
+	group.GET("/pmtiles/:name/:z/:x/:y", s.GetPMTilesByNameAndZAndXAndY)
+
+	// postgis
+	// group.GET("/postgis/:name", s.GetPostGISByName)
+}
diff --git a/api/mbtiles.go b/service/mbtiles.go
similarity index 83%
rename from api/mbtiles.go
rename to service/mbtiles.go
index 8b8bcdc..3dff532 100644
--- a/api/mbtiles.go
+++ b/service/mbtiles.go
@@ -1,4 +1,4 @@
-package api
+package service
 
 import (
 	"fmt"
@@ -18,14 +18,14 @@ import (
 // @Param name path string true "MBTiles名称"
 // @Success 200 {object} model.TileJSON
 // @Router /mbtiles/{name} [get]
-func (a *API) GetMBTilesByName(c echo.Context) error {
+func (s *MapService) GetMBTilesByName(c echo.Context) error {
 	name := c.Param("name")
 
-	if ok := a.store.Tile.CheckPool(maptool.MBTilesName, name); !ok {
+	if ok := s.store.Tile.CheckPool(maptool.MBTilesName, name); !ok {
 		return c.String(http.StatusBadRequest, "MBTiles not found")
 	}
 
-	data, err := a.store.Tile.GetTileJSON(maptool.MBTilesName, name)
+	data, err := s.store.Tile.GetTileJSON(maptool.MBTilesName, name)
 	if err != nil {
 		return c.String(http.StatusBadRequest, "Failed to get metadata")
 	}
@@ -47,7 +47,7 @@ func (a *API) GetMBTilesByName(c echo.Context) error {
 // @Param y path string true "y值"
 // @Success 200 {string} string "成功"
 // @Router /mbtiles/{name}/{z}/{x}/{y} [get]
-func (a *API) GetMBTilesByNameAndZAndXAndY(c echo.Context) error {
+func (s *MapService) GetMBTilesByNameAndZAndXAndY(c echo.Context) error {
 	name := c.Param("name")
 
 	z := c.Param("z")
@@ -66,11 +66,11 @@ func (a *API) GetMBTilesByNameAndZAndXAndY(c echo.Context) error {
 		return c.String(http.StatusBadRequest, "Invalid y value")
 	}
 
-	if ok := a.store.Tile.CheckPool(maptool.MBTilesName, name); !ok {
+	if ok := s.store.Tile.CheckPool(maptool.MBTilesName, name); !ok {
 		return c.String(http.StatusBadRequest, "MBTiles not found")
 	}
 
-	data, err := a.store.Tile.GetTile(maptool.MBTilesName, name, zValue, xValue, yValue)
+	data, err := s.store.Tile.GetTile(maptool.MBTilesName, name, zValue, xValue, yValue)
 
 	if err != nil {
 		return c.String(http.StatusNotFound, "Tile not found")
diff --git a/api/pmtiles.go b/service/pmtiles.go
similarity index 83%
rename from api/pmtiles.go
rename to service/pmtiles.go
index c116d58..880d5d6 100644
--- a/api/pmtiles.go
+++ b/service/pmtiles.go
@@ -1,4 +1,4 @@
-package api
+package service
 
 import (
 	"fmt"
@@ -18,14 +18,14 @@ import (
 // @Param name path string true "PMTiles名称"
 // @Success 200 {object} model.TileJSON
 // @Router /mbtiles/{name} [get]
-func (a *API) GetPMTilesByName(c echo.Context) error {
+func (s *MapService) GetPMTilesByName(c echo.Context) error {
 	name := c.Param("name")
 
-	if ok := a.store.Tile.CheckPool(maptool.PMTilesName, name); !ok {
+	if ok := s.store.Tile.CheckPool(maptool.PMTilesName, name); !ok {
 		return c.String(http.StatusBadRequest, "PMTiles not found")
 	}
 
-	data, err := a.store.Tile.GetTileJSON(maptool.PMTilesName, name)
+	data, err := s.store.Tile.GetTileJSON(maptool.PMTilesName, name)
 	if err != nil {
 		return c.String(http.StatusBadRequest, "Failed to get metadata")
 	}
@@ -47,7 +47,7 @@ func (a *API) GetPMTilesByName(c echo.Context) error {
 // @Param y path string true "y值"
 // @Success 200 {string} string "成功"
 // @Router /mbtiles/{name}/{z}/{x}/{y} [get]
-func (a *API) GetPMTilesByNameAndZAndXAndY(c echo.Context) error {
+func (s *MapService) GetPMTilesByNameAndZAndXAndY(c echo.Context) error {
 	name := c.Param("name")
 
 	z := c.Param("z")
@@ -66,11 +66,11 @@ func (a *API) GetPMTilesByNameAndZAndXAndY(c echo.Context) error {
 		return c.String(http.StatusBadRequest, "Invalid y value")
 	}
 
-	if ok := a.store.Tile.CheckPool(maptool.PMTilesName, name); !ok {
+	if ok := s.store.Tile.CheckPool(maptool.PMTilesName, name); !ok {
 		return c.String(http.StatusBadRequest, "PMTiles not found")
 	}
 
-	data, err := a.store.Tile.GetTile(maptool.PMTilesName, name, zValue, xValue, yValue)
+	data, err := s.store.Tile.GetTile(maptool.PMTilesName, name, zValue, xValue, yValue)
 
 	if err != nil {
 		return c.String(http.StatusNotFound, "Tile not found")
diff --git a/service/vector.go b/service/vector.go
new file mode 100644
index 0000000..ce66031
--- /dev/null
+++ b/service/vector.go
@@ -0,0 +1,8 @@
+package service
+
+import "github.com/labstack/echo/v4"
+
+func (s *MapService) GetVectorByName(c echo.Context) error {
+
+	return c.JSON(200, "ok")
+}
diff --git a/web/package.json b/web/package.json
index e6dbfcd..ed32b44 100755
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
     "@codemirror/language": "^6.11.1",
     "@codemirror/state": "^6.5.2",
     "@mapbox/mapbox-gl-draw": "^1.5.0",
+    "@simonwep/pickr": "^1.9.1",
     "@turf/turf": "^7.2.0",
     "@vueuse/nuxt": "^12.7.0",
     "codemirror": "^6.0.1",
diff --git a/web/public/style.json b/web/public/style.json
index f23da48..65818c4 100644
--- a/web/public/style.json
+++ b/web/public/style.json
@@ -24,12 +24,12 @@
   "sources": {
     "openmaptiles": {
       "type": "vector",
-      "url": "/api/v1/pmtiles/zhejiang-pm",
+      "url": "/map/pmtiles/zhejiang-pm",
       "maxzoom": 14
     }
   },
-  "sprite": "http://localhost:8080/style/sprite/icons/icons",
-  "glyphs": "http://localhost:8080/style/font/{fontstack}/{range}.pbf",
+  "sprite": "http://localhost:8080/map/style/sprite/icons/icons",
+  "glyphs": "http://localhost:8080/map/style/font/{fontstack}/{range}.pbf",
   "layers": [
     {
       "id": "background",