In Mapbox how can you toggle layers from a style on iOS? - javascript

I'm trying to toggle layers in iOS for MapBox but can't figure out how it's done. I've been looking at this example:
https://www.mapbox.com/mapbox.js/example/v1.0.0/layers/
But I can't figure out how to use this file with the map view in Xcode. Can anyone give me any info on how this is done? Or whether it's possible?
Just a bit of background on the setup, I have a mapview created and running fine. I then have numerous GPX trails which have been exported in to TileSets and added to a style as a layer. I have a layer called 'where_trail' which I want to toggle on and off with a button. Currently all the layers are drawing on the map, I just can't figure out how to access the layers and hide them. Can anyone offer me some guidance on this please?
Thanks

That example is for Mapbox.js and written in JavaScript: it's intended for use with our JavaScript framework, which, if you're in Swift, Objc, and Xcode, is not what you're using.
There isn't yet a full-fledged example of switching styles for the iOS framework, but the property to pay attention to is the styleURL - you can assign the value of that map property to a new NSURL, which you can get from Studio or from a default style. Wire this up to an action and it should do exactly what you're looking for.

Related

How can I display OSM maps in Flutter 'Web'?

I'm trying to create a custom map using Flutter Web that would be capable of displaying custom statistics for a place for COVID-19.
First we'll have a interface that display statistics for our entire planet:
https://google.com/covid19-map/?hl=en (Just like htisw)
Then the user can click on any country to zoom-in with probably an ease-in transition to see the number of cases in each state or province of that country. Assuming that I am able to fetch the exact co-ordinates of the epicenter in that country, I would like to deepen the shade in those parts in such a way that it lightens out as we move towards areas which have a lower number of cases.
Is it possible in Flutter Web?
I came across this plugin (thanks to this thread on SO Openstreetmap in Flutter?)
https://pub.dev/packages/flutter_map
but it doesn't explicitly say that it supports Flutter Web.
I tried fetching the tiles from OSM(Open Street Map) and displaying the maps on Flutter Web with the help of the example given in the above site https://pub.dev/packages/flutter_map#open-street-map-provider
But it didn't really display anything, maybe because a certain widget or function didn't work as expected.
According to your experience, which is the best way to achieve what I am looking for?
If possible, please describe the answer in such a way as if you were me and trying to do what I am doing.
Flutter_map doesn’t support flutter web.
You may check out the below Flutter Maps widget which has support for all the platforms including web.
https://pub.dev/packages/syncfusion_flutter_maps
Regarding the requirements you have mentioned, you can try the below things.
By dynamically changing the focal point and zoom level based on the click position, the easing effect can be achieved.
https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-zoom-level-programmatically
With the combination of dynamically adding shape sublayers on top of the tile layer and color mapping for that shape sublayers, you may achieve this.
https://help.syncfusion.com/flutter/maps/shape-sublayer#shape-sublayer-on-tile-layer
https://help.syncfusion.com/flutter/maps/shape#range-color-mapping

Use mapbox for rendering inside pixi-js or any other webgl/canvas framework?

I love the styling options provided by mapbox and need to know if there is any way I can use their map api for a game I am writing.
I dont think I can make any use of a fully finished solution that just loads the map into a container element (mapbox-gl-js) but rather would need image data etc. to use myself in a different engine.
Is this even possible with mapbox? How would I do it?
Turns out I was looking in the wrong place. Mapbox has its "static" api which allows to fetch the tiles as images directly without rendering it interactively.
So for anyone looking to use mapbox customly then make sure too check out their static api over at: https://www.mapbox.com/api-documentation/#static

OpenLayers 3 Vector Layer loses styling when map pans or zooms

UPDATE
I tried adding the files into a Snippet or JSFiddle to make it available to people to edit, but JSFiddle is banned and I cannot upload text files into a Snippet. Unless there's a better way to do it, here's the public repo for the files.
Hi, everyone!
I'm working on switching from OpenLayers 2 to OpenLayers 3 and supplementing my reading of by trying some things out on my own. There's a project that I'm building here that should be fairly simple: take form inputs and use them as parameters for building a vector layer. The interface works as intended, save for one problem.
Whenever I pan the map or zoom it, the vector layer seems to disappear. I can't for the life of me imagine what's going on. Anyone able to help me figure out what I can do to keep the layer in place?
Thanks!
Dheeraj
The answer was in line 77 here. It turns out that for whatever reason, I misunderstood falsiness in JavaScript and my style-builder function was erring on undefined styles. Who knew? The rest of the code works, though!!!
Big thanks to #ahocevar for being willing to help!

Connect off canvas menu with markers

I'm working on a mapping project and I need to mark some building to display some data for that specific building. Basically, literally I'm trying to build something like this
I have found off canvas project and I'm using it for mine map, here is a working JSFIDDLE example.
For the map I'm using openlayers3, openstreetmap, I'm not using google-maps and I'm not interesting in using it, I'm just referencing on this picture because they have a nice example of this off canvas display data menu.
As you can see I have marked different area around NYC and I would like to, when I click on the example I trigger off canvas menu (don't mind off canvas nav-bar style it will change) and display proper data for that object.
Mine question is:
What is the best way to do this, I would like to learn how to glue this off-canvas to mine map, so markers can trigger off-canvas?
I know that there is a hidden <input type="checkbox" id="nav-trigger" class="nav-trigger" /> who I displaying as hamburger icon which is used to trigger off canvas menu. But I do not understand how can I connect all markers to the canvas to display different data for each building.
I would like to learn how can I do this? It will be great to use javascript or jquery for this, I don't thing that openlayers3 have this kind of flexibility, but maybe there is, I'm little confused about this, can someone help me build this, thank you.

How to superpose two GwtCanvas?

I'm trying to superpose two GwtCanvas (which use an Html5 canvas). I am able to get this effect by using an absolute panel. But by doing this, I can't get my object to fill my panel. I would like to this so I can do a whiteboard in GWT. So far, I'm pretty advance but I would like to have multiple canvas overlay to support undo or preview. For example, if we draw a rectangle, it would be good to preview it as we move the mouse. I have found a javascript tutorial to do this :
ex:
http://dev.opera.com/articles/view/html5-canvas-painting/
There is a javascript example, but I'm not sure how to do the bridge between GWT and JavaScript. Any ideas ?
I think you should go for GWT JSNI - This way you would be able to access your JS from GWT code. You can find more information about JSNI at the following location:
http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html

Categories