I'm developing an interactive web-based navigation application which user can search locations and navigate from point A to point B by an online map. The routing algorithm (find shortest trajectory between point A and B) is ready and generate geoJson based data. Also, the shapefile of desired area (map) is available. The main features would be:

  1. The application is based on php5.5, html5/css3 and jquery/ajax.
  2. The application would work with .shp (shapefile) data.
  3. The application must have the following features:
    • zoom in and zoom out
    • set point A and B (start and end of navigation) with right-click by user
    • draw trajectory from point A to point B (as soon as both of them were known) on map on the user's browser
    • get geographic information (like coordinate and nearby places) wherever the user right-clicked.

I've got a lot of search in this field and most of what I found was about jquery libraries like Leaflet. The disadvantage of these libraries was that they used online maps like google map or openstreetmap.

How can I develop an interactive web-based application which uses my own map and shapefiles?

Is there a jquery or php library that I missed.

  • Welcome to gis.stackexchange bijan! You already found out that displaying maps with your own data can be quite a bit of work and it will take you some days (at least) of playing around with some libraries. Look again at Leaflet and follow examples of other people that used it to display their own vector files. Also google for OpenLayers, D3, shapefile-js. – tilt Oct 15 '16 at 14:23

The part that you are missing is a map server. A map server has the job of taking raw map data and (ordinarily) serving it up as a styled bitmap image with the colors and format based on some pre-defined styling rules.

The servers then make those bitmaps available via a web accessible API that front end libraries like Leaflet or OpenLayers know how to communicate with, such as WMS (Web Map Service) or WTMS (Web Map Tile Service).

There are quite a few map servers to choose from, but I would recommend starting with GeoServer as it's well documented, easy to setup, works with all the most popular client libraries and has a helpful and responsive community.

GeoServer is a Java application that can be deployed using Tomcat or Jetty. It can accept Shapefile's and can be configured via a web interface. The styling is defined using an SLD (styled layer descriptor) which is XML based mark-up, so a little clunky, but not too bad.


As a backend for your maps you can use NextGIS Web (or http://nextgis.com free account). Nice QGIS or Mapserver styles are supported. Shapefiles can be styled in QGIS and upload to NextGIS Web with styles using NextGIS Connect plug-in.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.