I have a high res fictional map (PNG) of a ancient city. How can implement it as a game where people buy plots on it?

  • I have an image with Dimensions - 2000 x 2000.
  • I Managed to use Maptiler and create tiles and display it on a webpage using leaflet
  • I want my users to hover/click on any plot of land, then that particular plot is zoomed in.
  • Now the problem is I need a "shapefile" to determine the boundaries of each plot.
  • Need help in coming up with a shape file for that high res image.

Just pointing me in the direction with couple of tools/concepts will be very much helpful. (If anyone had previous experience in doing such works, please share)

  • Are the plots drawn on your image ? If yes, you have to digitize your plots in a GIS software. You can convert your image (raster) into polygons (vector) but an image often has different pixel colors so the conversion into polygons will be a little messy. It's often more accurate and cleaner to do it manually (but you can try automatic vectorization, to see the result). May 11 at 14:47
  • Thanks for the info. So, I took a sample image of a map outline and tried to Polygonize it using QGIS (Raster -> Vector). But this is how it looks - ibb.co/ZSFG2sx. Is this how its supposed to look? Or if we need to do it manually can you tell me on how to? Just a high level help? May 11 at 15:17
  • Yes, it's how it's supposed to look, that's why I talked about messy things in my first comment. As you use QGIS, please look at this training manual part : docs.qgis.org/3.22/en/docs/training_manual/create_vector_data/… May 11 at 15:25
  • Had a look at it. I think that'll help me. Assume that once I finish vectorizing all the plots manually. How should I proceed further? Can I export it directly as a shapefile from QGIS or is there any intermediary step (any other conversion) that I need to do before getting to shapefile? May 11 at 16:30
  • In this tutorial, the first step is to create a new shapefile of polygons on your disk. May 11 at 16:37

1 Answer 1


Here's a workflow using QGIS and some data from the Leaflet examples.

Before you start, read the Leaflet tutorial about L.CRS.Simple. I mean it. Stop what you're doing, and read it.

  1. Lauch QGIS.
  2. Read https://docs.qgis.org/3.22/en/docs/user_manual/introduction/qgis_gui.html#control-the-map-canvas
  3. Click on the projection button on the bottom-right, the one saying "EPSG:4326" or some other number.
  4. Read https://docs.qgis.org/3.22/en/docs/user_manual/working_with_projections/working_with_projections.html#project-coordinate-reference-systems
  5. Set the project's CRS to "No CRS / Unknown / Non-earth projection", since you have a game map.
  6. Read https://docs.qgis.org/3.22/en/docs/user_manual/working_with_raster/georeferencer.html , from top to bottom.
  7. In the menu bar, click Raster then Georeferencer.
  8. Add the 2000x2000 image to the georeferencer
  9. Set two control points in two opposite corners of the image. Set the coordinates of the control points as you want/wish.
  10. In the configuration of the transformation, enable "only create georeferencing file"
  11. Run the georeferencing process. You should have the main QGIS window with the raster file being displayed in the layers list and shown in the main work area.
  12. Read https://docs.qgis.org/3.22/en/docs/user_manual/managing_data_source/create_layers.html
  13. Create a new vector layer of the desired type (geojson, shapefile, whatever). Make sure your created vector layer supports polygons. It's not possible to create a CRS-less vector layer, so beware that any further processing of the vector data shall ignore the CRS.
  14. Read https://docs.qgis.org/3.22/en/docs/user_manual/working_with_vector/editing_geometry_attributes.html
  15. Enable editing of your vector layer.
  16. Start digitizing polygons.
  17. Disable editing of your vector layer, so changes are saved.

There are, of course, a myriad different ways to approach this task. This workflow is by no means the best or the only one, but should get you started.

  • Finally you are back ^_^
    – Taras
    May 11 at 18:42

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