Leaflet js fictional map - javascript

I am new to Leaflet and I would like to find out if how to create a fully interactive fictional map. I have an image that I would like to convert to a leaflet map. This image has a number of connections and points like a graph basically.
I want to first of all convert that image to the map, be able to hover over the points, highlight them and display information about them and also to create animations at some point but not immediately with the connections. There is also a requirement to display permanent labels next to each point.
Is that at all possible in Leaflet?

Is that at all possible in Leaflet?
Yes.
Start by reading the leaflet tutorial for non-geographical maps.

Related

how to display moving points on a map from a database

There are logs where it is indicated: board number, time, date, latitude and longitude. information about their movement is constantly updated and new boards appear. how to display their movement on the map?
To display markers on a map, you can perhaps use Leafletjs for Javascript.
It is useful library that allows you to use a large array of mapping basemaps, and plot overlays on it, such as adding markers based on latitude or longitude, or drawing polygons or shapes. You can also overlay multiple maps, and there is a lot of functionality linked to the elements.
See their tutorials to get started or reference the documentation to see how you can manipulate the markers on a map.

Google Earth embebed, create grid layout in Satellite view

I'm working currently in a project where we need to create a new feature that allow to the user zoom in a Google Earth map embedded in a web app, and create a grid layout over the map, so the user should be able to "mark" some elements of the maps, for example, some specific buildings etc. But we need to create kind of square around the element, so it is not a single point, but at least 3 or 4 as needed to round the element.
We need to save those elements map with its coordinates and assign an ID to every element of the created grid.
Is it that possible? Is there a JS library that I could use?
Google Earth does not currently make an API or embedding available. If you don't need the full 3D view, then you can do this with the Google Maps API. There is a "drawing" library available that you can use to draw objects on the map. More info here:
https://developers.google.com/maps/documentation/javascript/drawinglayer

"map-like" interface for HTML with PDF as background

What I've got:
PDF map with coordinates of corners (in the real world)
Dynamic list of coordinates to display as markers
I need to get a map, only consisting of the PDF with a marker for each coordinate that are clickable. The list of coordinates obviously is dynamic, so I can't just draw them on the PDF directly. I must be able to zoom/pan.
I know that I could use Google Maps API (exactly what I did until now) to display the data-points as markers with some callback to display the additional information. However I can't find a way to use the PDF as an overlay without tiling the PDF into rasterized images (MapTiler).
Is there any JS library that would help me achieve my goal?
Or is there a way to do it in Google Maps?

How do draw polygons which can be used with OpenLayers?

I can draw custom shapes using polygons in Inkscape. My goal is to display these shapes on top of the map of the US at fixed positions. The map and the polygons will display on a webpage with the ability to zoom in and out and pan. I wanted to know if these polygons can be placed on such a map using OpenLayers. How? Example anywhere? I am not familiar enough with OpenLayers and would learn it more if it can meet my requirements. I need to programmatically be able to color fill each shape either server or client side. I also want to place markers on the map based on lon/lat coordinates. Does OpenLayers support all this?
This is an example of what I want to do. The area in orange was defined in Inkscape and the color orange can be a different color set programmatically. This is a simple svg file displayed on the web page.
You should be able to treat the exported SVG as a regular image overlay. Here is the OpenLayers API for image overlays and here is another SO answer with a very basic image overlay example. OpenLayers supports markers, though if you're embedding the SVG as a flat image, I'm not sure if OpenLayers will allow you to style the SVG elements out of the box...
As an aside, Polymaps is an alternative mapping library that's slightly more SVG-oriented; it's especially good for stuff like dynamically transforming SVG layers based on data, manipulating styles and classes for SVG elements, etc. Per your example, here's their example for very simply throwing an image (with defined top-right / bottom-left coordinates) on a map.

How to display millions of markers on google map (Using Web GL instead of Google Map Marker) with tool tips info on every marker when clicked?

I'm trying to make a web page which displaying a google map with so many markers (can be up to millions of markers) that looked up from data like json.
I try to make it using "google.maps.Marker" but it went very slowly (can be hang) on map rendering when there are so many markers. Then I found that it can be solved by using WEB GL
to render those markers on map like colored points on map. For now, I can make it until that step.
But there are still some problem I got, like below:
Right now I draw markers on map using Web GL like colored points, you can see like this link http://psousa.net/demos/webgl/ (I learned from it). How to change that point shape into triangle shape or circle shape instead of point/rectangle shape like that?
When every point of markers is clicked, there must be a mouse down event that will show some informations about that point (like name, description, etc.). How to implement that mouse event on every single of marker using Web GL?

Categories