I'm developing an application using OpenStreetMap that utilizes the OpenSeaMap tiles. I can add the base 'Seamark' layers to my render fine, but because there are a lot of land tiles where there is no data available accessing these returns a 404 from the server, and they are rendered as a transparent red overlay on the map.
This looks ugly and is of no use, so I'd like to just ignore a 404 and not render the red 'missing tile' overlay. How do I do that?
Try adding this to your HTML head
<style>
.olImageLoadError {
display: none;
}
</style>
I have created a sample application using openstreetmap and seamarks from openseamap. However, it seems I do not have the problem you described.
You can find the Project at here. You will also find a screenshot at the page.
Related
sometimes, normally with a drop in connection but not always, not all tiles load with mapbox via leafletjs
Is there a way to handle this? I am trying to sort this out with
tile_layer.on("load",callbackToNativeForMapStartedSuccess());
tile_layer.on("tileload",callbackToNativeForMapFinishedLoadSuccess());
tile_layer.on("tileerror",function(error, tile) {
callbackToNativeForMapFinishedLoadError(error.message)});
where I use callbackToNativeForMapFinishedLoadError to reload. But this doesn't always get called when some tiles are not loaded.
The callback to native is simply because I am executing this from within a WKWebView on iOS but that should make no difference
I guess error.message is incorrect. Look at the following snippet from https://github.com/Leaflet/Leaflet/blob/v0.7.3/src/layer/tile/TileLayer.js#L581
layer.fire('tileerror', {
tile: this,
url: this.src
});
The first argument is the tile itself and the 2nd is the url of the tile.
I'm using mapbox to show a pulsating icon of the closest ping for a given line. Meaning, I have a geojson line that is comprised of multiple ping locations, and what I am currently doing is when I hover the line I find the closest ping and display it.
Now the issue with this is this ping has a popup that shows some specific information about each individual ping. This popup covers the line in some situations which prevents the mousemove event on the map. This makes it so the closest ping isn't showed all of the time because the closest ping to my cursor location would be under the popup. Anyone have an idea of how to fix this? I've tried a few things including adding pointer-events: auto to the popup.
Here is a codepen showing what I'm talking about
You were super close. The correct answer is pointer-events: none;
Updated codepen.
(Edit - John)
For others coming to this I needed to make some popups "readonly" that would pass events through while leaving other popups as is. Steve was correct that setting pointer events to none works, but there isn't a way through CSS to style a parent element (aka the popup-content class). I ended up adding a class to the popups content element when I want to show it. Because Mapbox doesn't support this you have to fidget with it a little bit. The last change/update you make to the popup during a render cycle has to be the class update or Mapbox will remove the class
CSS
.no-pointer-events {
pointer-events: none !important;
}
JS
const popup = marker.getPopup();
popup.setHTML(... html here ...)
if (!popup.isOpen()) {
marker.togglePopup();
}
popup._content && popup._content.classList.add('no-pointer-events');
I have successfully added Navigation Control to my map, however the buttons are blank, no '+' or '-' on either of them. Is there another option I can use to place the '+' or '-' on them. Here is the code I used to create the Navigation controls.
this.map = new MapboxGL.Map(mapOptions);
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
I have seen similar examples using Mapbox Leaflet's zoomInText and zoomInTitle. Is there something similar I can use in Mapbox GL?
Can you provide any errors, or additional code that will help us figure out what exactly is the problem.
Navigation control is usually very straight forward as outlined here
When you inspect the element do you see a class?
.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in
That class should have a background image of the "+".
If you don't see it, you must not have included the css.
I was facing similar kind of issue while implementing in Angular2 but as lucas-wojciechowski has pointed out including the mapbox-gl.css will fix the issue.
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
In my case the navigation controls and the North arrow button were blank and the fullscreen button only partially visible in the wrong color. The problem was an old css file. Through changing the version number from 1.4.1. to 1.7.0 everything was corrected!
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
I've got an example data set of lines and points, representing peoples' journey to work and where they feel at risk from road accidents.
Now, the data have attributes such as Place (Home, Work, Danger) and the severity of accidents they fear in different places. So the wider question is how to visualise this on a web map. For that I've looked into Google Maps, Leaflet and OpenLayers3. Each of these looks great and allow nice styling but none, to my eye, have the neatness of CartoCSS for fast, complex and intuitive styling, like the code below used to create the image below:
So I tried it out in tile mill and this is what I came up with, after converting the things to raster tiles via TileMill.
But this is a silly way to do things: it cannot overlay a base layer and would be much more efficient to just serve the vector data and style them in the client side, perhaps using something like mapbox.js. But I cannot work out how to use the lovely CartoCSS language in the client side to style GeoJSON files. (How) Is this possible?
p.s. here's how I styled the above map
#tlines {
line-width:1;
line-color: #0b0;
}
#tpoints.points{
marker-width: 6;
}
#tpoints.points[Place='Danger'] {
marker-fill:#db0d0d;
}
#tpoints.points[Place='Home'] {
marker-fill:#db0;
}
#tpoints.points[Severity='1']{
marker-width: 4;}
#tpoints.points[Severity='2']{
marker-width: 6;}
#tpoints.points[Severity='3']{
marker-width: 10;}
I cannot work out how to use the lovely CartoCSS language in the client side to style GeoJSON files. (How) Is this possible?
It is not possible to use CartoCSS for styling features browser side.
To learn how to style GeoJSON in Mapbox.js/Leaflet.js take a look at the docs here:
Styling GeoJSON in Mapbox.js https://www.mapbox.com/mapbox.js/api/v1.6.2/l-geojson/ (works exactly as in Leaflet.js as Mapbox.js is based on Leaflet.js)
You can embed style options directly into the GeoJSON object with L.mapbox.simplestyle.style https://www.mapbox.com/mapbox.js/api/v1.6.2/l-mapbox-simplestyle-style/
Alex rightly points out that vector styling in Leaflet/Mapbox.js is a different creature than CartoCSS styling a la Tilemill or Mapbox Studio. However, it is possible to style features in a browser using CartoCSS; it just requires one of two things:
A different platform: CartoDB has an excellent JS library for styling hosted data with CartoCSS, based on leaflet and fully compatible with Mapbox basemaps.
Hosting your own tile server, either the CartoDB server or a combination of Mapbox-built tools.
If you are using GeoJson as data source, you may try the Leaflet.geojsonCSS plug-in for Leaflet.js. The Geojson CSS provides the styling definition for each feature in the collection in a css-like format. Using this requires to add the styling definition in the geojson beforehand.
Is there a way to style Tooltips in Google chart API? I've managed to only change the color of text using tooltip.textStyle. So is there any solution to change the white background to some other color (as shown on picture):
Test playground http://jsfiddle.net/nyNAg/
I found a solution through serendipity:
<style>
path {
fill: yellow;
}
</style>
Anyway, I did not find any configuration option for background in the google charts API.
Enable the tooltip to be handled by the HTML by writing this code in your options of google charts
CODE: tooltip: { isHtml: true } (,) add a comma if needed. :)
Now you can style tooltip using HTML and css. :)
/CSS Styling/
To style the tooltip box :
div.google-visualization-tooltip {}
To style the content like font size, color, etc
div.google-visualization-tooltip > ul > li > span {}
Use !important whenever needed ;)
http://jsfiddle.net/nyNAg/66/
It's possible to completely replace the label with custom HTML. It's maybe a bit complicated, but gives you full control of the content and style. See https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
As the Google Chart Tools API implements its SVG charts via an iframe hosted on it's servers, as per the Same Origin Policy you may not access or modify the content of another domain, unless via server-side manipulation prior to sending the client a response.
Given that, I'm not sure how you managed to change the text colour - perhaps a browser bug?
Another option might be to override inline-style rules e.g.
li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }
http://css-tricks.com/override-inline-styles-with-css/