As far as I can see, Mapbox GL JS is not supported by IE 10 and below. Correct?
I want to implement GL-JS for my site, but need to support these incompatible browsers, and am hoping to find an elegant solution, probably just showing them the mapbox tile layer I'm currently using.
I thought IE conditional comments would do it, but they only work up to IE9, leaving a gap where a lot of my users are.
I know I can use if (!mapboxgl.supported()) within the javascript function block, but I also need to conditionally load the javascript and css files. No point loading them both - would probably cause conflicts, and it's just plain dodgy.
So… suggestions?
Mapbox GL JS renders maps using WebGL which is only supported in IE11+
If compatibility is important, you have two options:
use Mapbox.js (raster tiles) in all cases
use Mapbox GL JS in supported browsers, use Mapbox.js in unsupported browsers
You can check for support without loading unnecessary Javascript or CSS files by using the mapbox-gl-supported module and loading additional JS and CSS files dynamically
var scriptElement = document.createElement('script');
scriptElement.setAttribute('src', 'https://api.mapbox.com/mapbox-gl-js/v0.20.1/mapbox-gl.js');
document.body.appendChild(scriptElement);
Related
I am hosting my own map tiles on my server. Is there a way to use Mapbox GL JS completely for free or do I have to pay for it anyway, when I am using the framework? Their website is a bit contradictive, on the one hand they have a pricing on the other hand they say it is an open source project, which is free. So I am confused.
Mapbox-GL-JS is completely free, up to version 1.13 (as in free beer, and also as in free speech). However, the Mapbox styles (and their associated resources, such as glyphs and sprites) are not, so you will need to find an alternative source, such as Maptiler for those.
From version 2.0 it is different. Any use of the Mapbox GL JS library consumes API credits, which are "free as in beer" up to a certain point, then paying. The source code is proprietary, open source (as in you can browse it) but not free (you are very limited in what you can do with it).
Since version 2.0, Mapbox gl js is no longer open source
However there are two open source forks of Mapbox GL libraries:
For javascript Maplibre GL JS
For Android and iOS Maplibre GL Native
I'm trying to optimize the speed of a web page, where a Leaflet map is included. According to GTMetrix and Google PageSpeed Insight, I should:
Optimize the following images to reduce their size [several images served from 'https://services.arcgisonline.com/ArcGIS/rest/services/...'], serving them in next-gen formats
Defer parsing of the JavaScript https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js
Serve 'leaflet.js' and 'leaflet.css' inline
I would appreciate any similar experiences optimizing Leaflet maps. Is it worth serving JS and CSS of Leaflet inline? Can I modify the code to call 'arcgisonline.com' images in other lighter formats?
The code of my simple webpage
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js'></script>
<div id='myMap' style='height:700px;width:700px;'></div>
<script>
var map = L.map('myMap').setView([51.505, -0.09], 13);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {maxZoom: 19, attribution: 'Tiles © Esri — Source: Sources: Esri, DigitalGlobe'}).addTo(map);L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {maxZoom: 19}).addTo(map);
L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}', {maxZoom: 19}).addTo(map); L.marker([51.505, -0.09]).addTo(map);
</script>
Thank you very much.
this is quite old and may come a bit general to your question, but regarding geodata:
you should decrease the amount of data that is loaded (i.e. do you really need all observations?)
you should simplify the geometries if you work with polygons. The incredible mapshaper does a lot there for your speed. You can use it e.g. in R with the rmapshaper package to preprocess your data before.
you could think of using vector tiles and implement a tileserver between backend and frontend that preloads your data for different zoom levels (use.e.g. geoserver) or alternatively tile the data dynamically inside your database (postgis is able to do that with st_AsMV()) and serve tiles to your leaflet interace which then needs a plugin to create dynamic requests for the server based on the current bounding box of the map or alternatively use a webmapframework that supports tiling in the frontend (e.g. openlayers).
Most of the speed "optimizations" you refer to are general to webpages, there is little specific to Leaflet in particular.
Deferring is usually approached by simply placing your JS (including the Leaflet script tag) just before the end of your page body, so that it does not delay rendering of the rest of your HTML.
You can implement true deferring but then it becomes more complex ensuring your script executes after Leaflet is done loading; the easiest would be in that case to indeed inline Leaflet JS together with your script. But then you lose the potential cache of Leaflet asset, in case your visitor had browsed to other websites which have used these exact same assets.
In the case of Leaflet, you can also use a "skeleton" as a placeholder for your map, so that your visitor sees a static image while Leaflet and your script are loading. Make sure you have the right to host the static image.
It is more theoretical question, rather than some problem.
I'm planning to develop some wrapper for leaflet (encapsulate work with leaflet for other developer teams with some API in/out), and I'm wondering if to use react-leaflet or to use native leaflet library.
There is very long list of available plugins for leaflet, and as far as i see only +-10 of them implemented for react-leaflet.
From your experience, does all the original leaflet plugins works fine with react-leaflet? How often do you encountered with problem and which one are not working at all?
It should be possible to create a custom component for any react-leaflet extension.
I'm building up experience with web development and my next projects are some web maps. I've looked into Google Maps and Open Street Maps and would like to use OSM for a project as it contains more detailed information of building footprints.
I've tried styling Google Maps which seemed fairly straightforward, but I'm a little lost with OSM. I've got to the point of trying to create my own renders (with TileMill) but this is crashing my system due to the amount of data.
What I essentially need is this (but for the UK);
http://maps.stamen.com/#terrain/12/37.7706/-122.3782
Are there any resources which you can recommend or how easy/ difficult is this to create myself? I think I would need to create the map (with TileMill or similar and then find my own servers to host), or is there an easy way to convert the standard map to Grayscale?
I want to keep it as simple as possible so please any recommendations?
Turning the standard map to grayscale: I might be very late to this but for anyone else running into this question: I found a very easy solution if you're working with HTML and Javascript using OpenLayers and the standard OpenStreetMap-Tile-Layer in color. I took the solution from here: https://openlayers.org/en/latest/examples/semi-transparent-layer.html
I don't know much about web development but this solution worked for me. Upon creating the map, as done in main.js in the example from the link, a class name is defined ('bw')
className: 'bw',
that can be used in index.html to manipulate the style o f it in the part:
<style>
.bw {
filter: grayscale(100%);
}
</style>
My application was altering a pre-built web-map from the qgis2web extension for QGIS. I was able to turn the tile layers from the background map to grayscale so the results would stand out more.
You could use https://github.com/Zverik/leaflet-grayscale to display any tile layer in grayscale. It's a plugin built upon the leaflet map displaying library.
I'm looking to perform some dynamic charting based on a model via GWT on HTML5 compliant browsers.
I know that the following library exists :
GWT Canvas
The problem is that this library does not support drawing text within the canvas so I can draw lines but no write text on my charts.
I haven't been able to find any other plugin that works with the Canvas in GWT (which is really odd given the HTML5 push by Google).
Does such a component exist?
You could take a look at the official canvas support in gwt-incubator. http://code.google.com/p/google-web-toolkit-incubator/wiki/GWTCanvas
The GWT incubator seems to be more focussed on browser support. If you don't require this and wish to use more of the HTML5 Canvas features, see:
http://sourceforge.net/projects/html5canvas/