I have an interactive map built with react-leaflet on which I want to render two vector tile layers, one of them renders points and the other renders polygons. The tiles are served by my own backend under the zoom, x, y coordinates system (zxy) and my URL is something similar to https://example.com/.../tiles/{z}/{x}/{y}
The problem is I have not been able to render the layers at all.
My knowledge on React and leaflet is very limited, so the only thing I tried so far is to use a standard TileLayer:
<TileLayer
attribution='me'
url="http://localhost:8000/api/v3/polygon-tiles/{z}/{x}/{y}"
maxZoom={20}
minZoom={15}
/>
As far as my understanding goes, this doesn't work because the TileLayer component only works when rendering image based tiles, not vectors.
Related
My current use case is to align a 2d image to a 3d model inside the forge viewer allowing zoom as well as panning functionalities. I have tried the following implementations -
Adding the 2d image as an overlay scene on the forge viewer but the problem there is that I can't position the model on the image precisely even though i have tried translating, rotating and scaling the model programatically.
Loading two different viewers on top of each other and then using viewer.getState() and viewer.restoreState() to sync the state between the two viewers on Autodesk.Viewing.CAMERA_CHANGE_EVENT.
Placing the image inside the HTML beneath the forge viewer and then disabling the pointer events on the viewer and using Javascript to zoom both the viewer and the image in sync. But the problem there is that the measure tool doesn't seem to work right.
What am i missing?
I assume that you simply want to insert a 2D raster image into the viewer scene. That can certainly be done using the 1st approach you suggested. Use an overlay scene or the SceneBuilder extension to add a custom three.js mesh into the scene, and then apply your image as a texture to the mesh.
Regarding the placement of the mesh in the viewer scene, that really depends on your use case and the type of models you're working with. For example, if you wanted to place the image under the 3D model (perhaps the picture contains some satellite imagery), you could find the bounding box of the model using the viewer APIs (viewer.model.getBoundingBox()), and place the three.js object with your image at the bottom side of it.
I am planning the development of a map service, where I'd like to display a list of markers on top of a custom "base layer" consisting in vector tiles rendered with TileServer-GL.
I understand that TileServer-GL render vector tiles based on an .mbtiles tileset and style with a .json style file made for instance with Maputnik.
When comes the step of displaying that into an interactive map, for instance with Mapbox GL JS, I understand that you can specify the tiles served by TileServer-GL as a third party source (https://docs.mapbox.com/mapbox-gl-js/example/third-party/), but it seems that you then need to add layers one by one, and specifying the style of each layer. But I thought that's what the tile server already does! Have I misunderstood anything?
Thanks for your help
I'm not exactly sure what you're asking, but basically you will:
Construct a Mapbox GL style file (.json) which refers to all the layers you have created, where they are hosted, and how you want each of them displayed.
Initialise a map object that loads that style file:
const map = new mapboxgl.Map({
// ...
style: 'http://localhost:8000/style.json
});
I would like to create a webpage that displays one image at a time with shapes and annotations shown over it. Each image should have a unique URL address in the address bar.
I have a set of images as PNGs. For each image there is a set of shapes (rectangles, polylines - as pairs of x,y coordinates in pixels) and annotations (location on the image x, y in pixels and a short text as string) to be displayed over it.
When user loads the unique url for an image they should see it with shapes displayed on top of it and annotation markers shown as circles. When user presses a button labeled „next“ the page loads the next PNG with its corresponding shapes and annotations. User can click on an annotation marker and a text balloon should open to show the text for the annotation.
How to approach developing this? I am asking since I don’t have an overview of web app frameworks or the current best practices for databases and graphic formats for online content.
I have experience in programming - Python, datascience, Procedural geometry, Unity for game development (C#), Lua - but not for the web.
I can do a WebGL app using Unity to do what i want and link it to a MySQL database but it feels like shooting a fly with bazooka. Maybe there is an easier, simpler way. Any advice or tips would be appreciated.
The best tip, I think, is in one of the tags of your question: canvas.
Images can be drawn onto it, as well as shapes. To handle your markers you could compare the coordinates of a click on the canvas to the coordinates of your markers (see this post for further info on getting the click coordinates). The annotation balloons could be realised by hiding or showing a simple <div> on click.
As for web app frameworks, depending on how fancy it should be you could do it "by hand" in native html and css, or use something with nice predefined components, like Bootstrap.
Depending on where you will be hosting this webpage, you will, or will not have to worry about the backend/server. There are numerous hosting providers available that provide user-friendly admin panels.
I am attempting to develop a stack of OS Raster basemaps to be served by Geoserver as WMS.
I have set up separate image mosaic layers for the different map styles, and set appropriate Zoom Layering levels as styles for the layers. Each individual layer displays as required both in OL preview and within GIS applications.
If I combine these layers in a Layer Group however, the preview displays a blank image, although the Palette_Index values are displayed for both layers underneath the preview image.
Is it possible to accomplish what I am attempting to do in Geoserver, and serve the multiple raster layers as a single WMS?
Any assistance would be greatly appreciated.
ADD:
Geoserver version is 2.8.0
Layer Group is simply compiled of the two imagemosaic Layers. The only change I have made from the default selections is to compute the bounds and apply an SLD style to each layer with a simple MaxScaleDenominator added which works for the layers when viewed individually.
Also tried with the standard raster sld with no editing, and the issue persists
The question is pretty descriptive.
I am working on a website that provides locations for filming.
All the data in the site is currently stored in a MySQL database including geocode data for google maps.
I need to show polygon areas for the different london boroughs that has locations.
I have all the data as kml files, idealy i would like to store this in the MySQL database.
I have had success using fusion tables to display this data, but it seems silly to me to have to have this data duplicated on google just to use a fusion map layer, can i simply use a kml layer to render this data rather than having to create a fusion table and rendering it from that?
If so, is there a resource someone could point me to for more information?
UPDATE:
Thank you for the responses so far, i thought i would update the question with a little more info .
I eventually want to have all the areas displayed at the same time on my map and then when an area is clicked on ideally it would take you to another page on the website showing locations for that specific area.
I had initially tried using KML layers but i was getting errors saying my KML was invalid.
The KML was initially stored in a field in my database table, i think probably the errors were due to me not understanding exactly how google read in the KML data.
Using polygons would be far simpler to implement as i can get this data via JSON and then render the polygons from that.
I know now its not possible to have info windows with polygons, but i would just prefer to jump directly to another website page with info for that particular area using a click handler rather than show an info window.
Alternatively as suggested showing a tool-tip with a brief description of the area and a link to the page would be better, how the tooltip itself, is it possible to render on top the map?
I am slightly worried that I will reach the layer limit for the KML.
Is it possible to have multiple polygons rendered with KML on one layer, or do i need a separate layer for each clickable area?
The Google Maps API provides a pretty straightforward method to draw polygons.
Basic Example:
var polygon = new google.maps.Polygon({
map: your_google_map_instance,
paths: array_of_latlng_points,
fillColor: "#336699",
fillOpacity: .5,
})
EDIT: For this approach, you would need to parse your KML files (sorry, must've missed that when I first read it). You can import the KML files to a KML layer
You can overlay Polygons using KmlLayer, FusionTablesLayer (as you know), or native google.maps.Polygon objects.
KmlLayer and FusionTablesLayer render them as tiles, so for lots of Polygons (if you only need click events) will be more efficient. There are limitations on the number of KmlLayers that can be displayed on the map at one time and on FusionTablesLayer (but those don't seem to be causing you problems).
There are also third party parsers available for KML (geoxml3, geoxml-v3) which will take your KML and render it as native google.maps.Polygon objects. For lots of Polygons, this will be less efficient than tile based rendering, but it does allow mouseover/mouseout, and changing the properties of the Polygons dynamically.
You could also try data layers what have lots of events so you can display tooltips, info window, status text on various mouse events.
See samples in documentation:
https://developers.google.com/maps/documentation/javascript/datalayer
If you have many polygons (where the actual value of many depends on multiple factors, can be anywhere between 100 and 1,000) the best is to use a built in layer type. The fastest are the ones rendered on server, e.g. kml layer because this doesn't create hundreds of DOM elements in browser but still exposes click events so infoboxes can be displayed for each item.
In the worst case you can implement your own rendering with an image map, obviously by using an existing library like mapnik.
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes