ISO a decent javascript library for making custom/imaginary maps
April 4, 2018 10:26 AM   Subscribe

I want to make interactive maps of imaginary places, for display on the web in an interactive manner. I am a programmer, I am not really a javascript programmer but I can do a little JS if required.

Like let's assume that I have high quality map images (that I can make into tiles if necessary). I want to display zoomable versions of these maps, and I want to be able to add overlays of various types, like say:
* showing routes (via inputting a series of coordinates?)
* showing heat-map type data
* showing points of interest or other kinds of annotations

Googling is not helping - there are TONS of JS mapping libraries, but most of them seem interested in the real world, using real map tiles, streets, etc. It's not clear which of them, if any, would let me supply my own "world"

Ease of install/use is a big plus but I would take something fully featured over something easy if the easy one has a lot of limitations. I would prefer that it's relatively standalone and does not rely on some other framework (react, angular, etc, I don't want to get into a whole ecosystem just to show maps, if possible)
posted by RustyBrooks to Computers & Internet (10 answers total) 7 users marked this as a favorite
 
Google Maps lets you supply your own map tiles.

So does OpenStreetMap.
posted by Happy Dave at 10:34 AM on April 4, 2018


Best answer: Leaflet may be the thing. It basically adds slippy maps to a page, but you can also apply vector layers on top. It's very small, but been around for a while yet still being actively maintained.
posted by scruss at 10:58 AM on April 4, 2018


Best answer: Here's a leaflet tutorial on non-geographic maps.
posted by zamboni at 11:00 AM on April 4, 2018 [1 favorite]


+1 for leaflet. Once in the leaflet ecosystem, you can add in heatmapping and routing functionality fairly easily (though I'm not sure if the "routing machine" would understand non-real-world wayfinding features when generating its routes, so another option/literally drawing your own features may work better).

Alternatively, if you wanted to play around with random generation, you might consider this method of generating fantasy maps using d3.js (and here is the JavaScript code). Kind of a different rabbit hole, but might give you some ideas too!
posted by elephantsvanish at 11:27 AM on April 4, 2018 [1 favorite]


Here is a tutorial for scanning and georeferencing print maps -- based on the tutorial zamboni linked above, it seems like you could assign fictional latitude/longitude coordinates to your scanned maps to make it all sync up.
posted by elephantsvanish at 11:32 AM on April 4, 2018


Response by poster: All this stuff is looking fabulous, thank you so much
posted by RustyBrooks at 11:52 AM on April 4, 2018


Also suggesting Leaflet. It will require some coding, but you can follow examples as needed. I believe you will end up needing map tiles to make this work but it's possible you can do it with one giant image.

For points of interest you can create markers or add a custom GeoJSON layer. Assuming you already have calculated routes and just want to draw lines, again you can go with GeoJSON or write code that draws Polylines. For heatmaps you want the Leaflet.heat plugin.

A more modern option is Mapbox GL JS. It is open source and could be made to do this all, but is designed to work best with Mapbox's paid data services. The advantage is it's a modern vector tile renderer. Also has really nice heatmaps.
posted by Nelson at 1:45 PM on April 4, 2018


Response by poster: My maps are giant images for now, but I could easily make tiles out of them. I don't have vector maps and there's no such thing in these maps as roads or routable features (it's an in-game map for an online game)

Leaflet sounds pretty good, especially since there's a tutorial. I will probably at least try the others also.
posted by RustyBrooks at 2:01 PM on April 4, 2018


You may find this Leaflet sample particularly useful for figuring out how to make a custom coordinate system instead of degrees latitude / longitude.
posted by Nelson at 4:37 PM on April 4, 2018


Response by poster: I gave leaflet a go and I think it'll work great for me. Thanks for all the suggestions, though!
posted by RustyBrooks at 10:26 AM on April 6, 2018


« Older Personal injury attorney in Hawaii?   |   Help Identify Mr. Bigfoot: midcentury African wood... Newer »
This thread is closed to new comments.