SolidJS•12mo ago

How to make a map?

So I want to have a map on my website, first when I thought about this I made a google api based map which obviously requires funds and its not useful for my case, then I searched little more and came to openstreetmap, postgis extensions that allow us to export map data into it which later we will query, currently I am on debian distro,

In my head what my approach should be is:

download data and export it to postgres database with postgis extension enabled and indexed automatically I had this done before so I know how to do it kind of
I should query the data from nodejs server that I will have and send it to the frontend and render it using leaflet or open layers

So actually I did the above thing before but I found it quite difficult it was rendering map with only lines and some data was missing I think I had styling problems which might be difficult.

then I came across tile server and followed instruction on this link multiple times but i couldn't make it work https://www.linuxbabe.com/linux-server/osm-openstreetmap-tile-server-ubuntu-22-04, recently I wanted to start learning docker to try to setup it from 0 or just install ubuntu on it and try to set it up there.

So please guide me with instructions, I am 17 so I don't really have that much experience especially with maps When I first saw these open source stuff I was like this is completely new world. So any instruction and help would be appreciated thanks in advance.

LinuxBabeGuoan Xiao (Admin)

Build Your Own OpenStreetMap Tile Server on Ubuntu 22.04

OpenStreetMap, aka OSM is a user-contributed world map. This post shows how to build your own OpenStreetMap tile server on Ubuntu 22.04.

bigmistqke•12/28/24, 12:40 PM

I used maplibre recently and it's really good!

Bbigmistqke I used maplibre recently and it's really good!

LukaOP•12/28/24, 1:54 PM

I will consider it

bigmistqke•12/28/24, 1:56 PM

https://maplibre.org/maplibre-gl-js/docs/ u can get up and running really quick

Introduction

MapLibre GL JS is a TypeScript library that uses WebGL to render interactive maps from vector tiles in a browser.

bigmistqke•12/28/24, 1:57 PM

if u want to customize your tilesets you can deploy your own tile server at some point, but if you just want a map for your website i would personally go for something that works out of the box.

bigmistqke•12/28/24, 1:57 PM

you can always add your own tile server later if you would want to

LukaOP•12/28/24, 2:11 PM

Basically I want to be able to display roads and terrain normally, I want 2 user to be able to share their current location which will update per some seconds, also I want to add icons on the map and I want o have only one country. will MapLibre be helpful in this case?

bigmistqke•12/28/24, 2:12 PM

what do you mean with 'normally'? like sattelite footage?

bigmistqke•12/28/24, 2:13 PM

they have this geojson feature for adding vectors and the like on top of maps: https://maplibre.org/maplibre-gl-js/docs/examples/geojson-polygon/

Add a GeoJSON polygon - MapLibre GL JS

MapLibre GL JS is a TypeScript library that uses WebGL to render interactive maps from vector tiles in a browser.

LukaOP•12/28/24, 2:14 PM

ahh cool I will start implementing and experience it myself. Is there any library which will make implementing maplibre with solid easier?

LukaOP•12/28/24, 2:14 PM

or I have to do vanilla way?

bigmistqke•12/28/24, 2:15 PM

vanilla way

bigmistqke•12/28/24, 2:15 PM

but no need for a wrapper

bigmistqke•12/28/24, 2:17 PM

LukaOP•12/28/24, 2:17 PM

is there any api limit?

bigmistqke•12/28/24, 2:17 PM

no, maplibre is completely opensource

bigmistqke•12/28/24, 2:18 PM

but idk about sattelite footage tbh

LukaOP•12/28/24, 2:19 PM

So I am meaning if 10-20 user concurently fetches the map will it work for all of them? because openstreetmap was also open source but later i found they had 1 request per second limit so I want to avoind any api limits

Bbigmistqke but idk about sattelite footage tbh

bigmistqke•12/28/24, 2:20 PM

this

LukaOP•12/28/24, 2:25 PM

I think I should upload the map data to postgresql and then make fetch request to my nodejs server which will return images/tiles. I tried other ways but I have limits all the time.

bigmistqke•12/28/24, 2:28 PM

ye mb if u need raster tilesets u might need to go that way ur right

bigmistqke•12/28/24, 2:28 PM

found https://medium.com/@go2garret/free-basemap-tiles-for-maplibre-18374fab60cb just too

Medium

Free Basemap Tiles for MapLibre

Free aerial, roads, and topography basemaps

bigmistqke•12/28/24, 2:29 PM

the ones from https://openicgc.github.io/ look pretty nice

Recursos ICGC en obert