Visualize data on your map
If you are using leaflet.js to show a map in your web page, you can easily use geoserver to host your data files (ex: .shp files) and retrieved them in PNG format and layer on top of your map. Not only in PNG, it also sends data in several other formats as well.
This is how you layer the data on your leaflet map:
1. Download and install GeoServer in your local machine or server. (Mine it’s http://localhost:9090/geoserver/)
2. Create a workspace for your work.
3. Then create a store for your data files.
4. Now you can create your map layers by selecting the data files in your store.
5. You can change the way data plotted on the map by changing it’s styles and link the style to the layer.
6. You can preview the layers by clicking on “Layer Preview” and selecting the format you want (Mine its PNG).
7. Go to the javascript file where your code for leaflet map is kept and add a tile layer
var layer= L.tileLayer.wms("http://localhost:9090/geoserver/wms", { layers: 'workspaceName:LayerName',
format: 'image/png',
transparent: true,
version: “1.1.1”
});
8. Now you may see the data layer plotted on your leaflet map.