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
});
Related
I have two tileset with coordinate (created from GeoJSON file):
tilest # 1. Point on map.
tilest # 2. Route on map.
Both tilesets are so big - so, I don't what to make client to download data source and filter it.
I've created custom Mapbox style and added two layers with these tilesets as data sources.
I want to show the map from style:
without these custom layers
with only first layer
with only second layer
with both layers
Is it possible to do with Mapbox Static API (https://www.mapbox.com/api-documentation/#static)? Or mapbox caches and makes rasterisation from all layers in style and separate them is not possible?
In general, what is the best strategy for huge tilesets? Should I make different style for every case and switch them on client?
I need to draw some graphics over google maps. Graphics is not always transparent, so I'd like to draw text labels (country names, city names, etc.) over my graphics.
For graphics I use overlay map type , it is shown over base map. But I failed to draw labels over it?
I guessed that there shall be a way to draw base map twice, with different style settings (so I style map with not labels, put my overlay, and then put overlay with roadmap with labels only), but it does not seem like I can use basic map types as overlay ones. Another way I see is to manually get tile with labels only by composing URL. This works, but as far as I understand accessing map tiles directly is prohibited by ToS.
Is there a working and, well, legal way to do that?
Here is jsfiddle which illustrates URL composing solution: https://jsfiddle.net/GRaAL/jyr81p2c/
// here is how I get google maps tile with labels only
function getLabelsOnlyTile(coord, zoom) {
return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i" + zoom + "!2i" + (coord.x) + "!3i" + (coord.y) + "!4i512!2m3!1e0!2sm!3i353022921!3m14!2sen!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLmU6bHxwLnY6b24!4e0";
}
I found that StyledMapType could be used as overlay map type (have same interfaces), so I created StyledMapType with labels only and instead of registering it in map type registry just added it as overlay, this way:
var onlyLabels = new google.maps.StyledMapType([...], {name: 'labels'});
//draw useful data over map
map.overlayMapTypes.insertAt(0, new UsefulDataOverlay());
//and then draw labels over it
map.overlayMapTypes.insertAt(1, onlyLabels);
Full working example is here: https://jsfiddle.net/GRaAL/jyr81p2c/2/
You might want to check MapLabel for Google Maps V3:
This library allows text to be added to the map at a particular location. Note that the user's browser must support Canvas for the label to be displayed.
MapLabel class
This class extends OverlayView.
Note that browser <canvas> support is required for the label to be displayed. Analytics
Source:
https://github.com/googlemaps/js-map-label
How to add text label in Google Map API
Hope this helps
I've developed a HTML application that displays a map. This map has many fixed markers (they do not change in time).
Due to that:
I want to speed up the application
I want to hide the marker position from malicious users (so they can't use the information I've gathered for they're own porpose)
I want to convert the markers to a tile layer.
I've been googleing without success how to do this. Anyone has faced this problem and has a nice easy solution?
Thanks!
If the markers never change, there is a great solution:
Mapbox.
You can create your map with the markers, then the mapbox servors will send the tiles with the markers.
You can use a quadkey. It'similar to a quadtree. You can download my PHP class hilbert-curve # phpclasses.org. It also uses a quadkey.
I have many different KML layers on a Google Map (v3). Random colors of markers were assigned to each set of markers. I would like to be able to control this, however.
So far, this is what I have:
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var kmlLayerOptions = { preserveViewport: true, suppressInfoWindows: true };
var Layer1 = new google.maps.KmlLayer('http://myurl.com/1.xml', kmlLayerOptions);
Layer1.setMap(map);
var Layer2 = new google.maps.KmlLayer('http://myurl.com/2.xml', kmlLayerOptions);
Layer2.setMap(map);
I need to be able to say I want Layer 1 to use blue markers and layer 2 to use red markers, but I can't seem to figure this out.
From what I can tell, there is no way to do this with the kmlLayerOptions, which is where it would seem like it would happen, so I don't see where else I could logically make this change other than directly on the layer object.
You can't change it with KmlLayer (at least currently, you could create an Enhancement request to add the functionality).
You can do it with FusionTablesLayers (import your KML into FusionTables, then use either the User Interface to set the icons or dynamic styling in the Google Maps API v3 (assuming you need less than 5 different icons, and the ones you want are available in FusionTables).
A final option would be to edit the existing KML to use the icons you want.
The KmlLayer renders according to the styling in the KML document itself, and you cannot override this in any layer options.
If you don't want to modify the KML itself, you could use a third party library such as http://code.google.com/p/geoxml3/ to render the KML on the clientside rather than having Google's servers render it, and this would give you the ability to override the rendering defaults.
And by custom map I mean custom map tiles, as in, mapping another planet. I've looked all around but can't see to find any resources pointing how to do this on Google's or any website.
I know it's possible because I've seen it done before on a website, but unfortunately the website that has the link to THAT site is down so I can't get to it.
Have a look at the API. This might help you by loading own images as an overlay:
Image Map Types
Implementing a MapType to act as a base map type can be a time-consuming and laborious >task. The API provides a special class that implements the MapType interface for the most >common map types: map types that consist of tiles made up of single image files.
This class, the ImageMapType class, is constructed using an ImageMapTypeOptions object specification defining the following required properties:
tileSize (required) specifies the size of the tile (of type google.maps.Size). >Sizes must be rectangular though they need not be square.
getTileUrl (required) specifies the function, usually provided as an inline >function literal, to handle selection of the proper image tile based on supplied world >coordinates and zoom level.