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

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?

Related

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

Leaflet js fictional map

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.

How to get KML or JSON data of (polygon) area using Google Map URL using JS or PHP

I would like get the KML or JSON data for the red polygon (as far as I know it's called polygon) area. I want to display the area in a custom map of my application and I will place some markers within this area.
You can check this example: https://goo.gl/maps/7SIeg
I just need to grab the KML or JSON object of the co-ordinates the red marked area.
I had same question.But, no there is no option that you can get KML of searched area and google maps will extract you a polygon.
But you can use various resources like
http://www.mapmash.in/kmlpolygon.html
http://geojson.io/
to create polygons yourself.
Regards,
Suyash

Get coordinates from image

I am developing a wayfinder app for the library building. I'm developing it using HTML and JavaScript. I've mapped all the coordinates of library rooms on the image, and I'm navigating one object over the image to show the directions, and I'm using jquery.path to navigate the object.
But now I want to change the size of the image, I want to make it bigger than earlier, but now have to map all coordinates. :(
Anyone please suggest me another ways to map coordinates quickly.

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.

Categories