I've just started looking at mapbox, and I've run into an issue straight away.
I've copied the sample here;
https://www.mapbox.com/mapbox.js/example/v1.0.0/
Please note this part;
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWF1cmljZXdhbG1zbGV5IiwiYSI6ImNpbmxiZjc4djB5cjJ0dG0zejZjZHZxdjEifQ.CJHrqKevqria7ZbVMOMD5Q';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([40, -74.50], 9);
</script>
Un-editted it works in my webpage.
If I change the accessToken to my one, it works.
If I then change the mapID, though, from "mapbox.streets" to "myusername.mapID" (I've double checked these, they are correct) all I get is an empty map.
Any idea what I'm doing wrong?
This is probably what you are looking for — Add styles made with Mapbox Studio using styleLayer
Also, Check your Browsers console. In Firefox, I got the following error in the console
Error: Styles created with Mapbox Studio need to be
used with L.mapbox.styleLayer, not L.mapbox.tileLayer
Related
I am working on a new Leaflet map with 1.7.1.
I noticed on my mobile device browsers (on Safari and Chrome) that the popups are flickering (not displaying/not showing up). I went on the Leaflet website with my mobile trying one of their example e.g. on their very home-page and I am facing the same problem. Is this my mobile or this problem is already known?
After more research ... I found out that this is an actual bug.
By commenting the following lines of code in the JS file will resolve the problem.
// simulate click if the touch didn't move too much
// if (this._isTapValid()) {
// this._simulateEvent('click', first);
// }
I'd like to do exactly what https://api.mapbox.com/styles/v1/zugaldia/cimteac7b00mrb8m7okkkol8d.html?title=true&access_token=pk.eyJ1IjoienVnYWxkaWEiLCJhIjoiY2ltNnI0YXM0MDA0YXR5bHgxOTU0N2h5YyJ9.kBUkyDqT5S1gJOsMIAdJSw#11/38.8993/-77.0146 is doing.
It seems to use the MapBox GL tileset and style to place text on the map. It even shows more text at a zoomed in level.
How do we do that?
Can you point to a detailed example or video that shows the steps for loading the tileset (maybe from a GeoJSON file, etc)
Thanks.
It is really nice that we can do so much without javascript at all :)
This makes it easier for Android and iOS etc.
Notice the text for the School names:
Then when you zoom in, you see the text for the crime:
That is indeed a very nice map, he created it using Mapbox Studio uploading crime and school data as layer sources. You can learn more about creating your own map style by following along with the "design a map" guides. Once you've created a map you'll need to get the style ID by doing this:
(source: mapbox.com)
and then...
(source: mapbox.com)
Now you also mentioned using these maps within your Android or iOS app which is similar to using the api (link you gave above). Follow this example about including Mapbox studio style in your Android app. The example places the style url within XML like so:
<com.mapbox.mapboxsdk.maps.MapView
...
mapbox:style_url="mapbox://styles/<your-account-name>/<your-style-ID>"
/>
Hope this helps!
I m trying to save annotation in flexpaper.. I tried using this
marksArray = JSON.stringify($FlexPaper('documentViewer').getMarkList());
var initialMarks = JSON.parse(marksArray);
$FlexPaper('documentViewer').addMarks(initialMarks);
but it's not working..
In console, I tried using marks = $FlexPaper('documentViewer').getMarkList()[0];
I can see that its storing inside marks but for $FlexPaper('documentViewer').addMarks(marks) it's showing undefined.
Am I missing something? Please help me, Thanks in advance.
We 'll get the require files after downloading Annotations Web Server Package from flexpaper classic page. what I missed was <'flexpaper:annotations_handler runat="server"/> It should be inside the script in simple_document.aspx page. And In annotations_handlers.ascx page I shifted that (onMarkCreated ,onMarkDeleted,onMarkChanged) JQuery code to flexpaper_handlers.js file. After these changes its working for me.
I am looking to find a way to shoot and record video using the iPhone's camera using HTML 5. I referred this document.
http://www.w3.org/TR/html-media-capture/
I have tried using the HTML Media Capture API as told in several posts. But I cannot access the camera. I'm using the following code in my HTML file which is rendered in an UIWebView.
//A choose file button which is actually disabled came up.
<input type="file" accept="image/*" capture="camera" id="capture">
which didn't work.
And this code,
//Didn't worked
window.navigator.getUserMedia('audio, video', function(){
alert('Success');
}
, function(){
alert('Error');
});
and finally this one,
//This came up as [object Navigator]
alert(navigator);
//This came up as undefined.
alert(navigator.device);
Is video capture in iPhone actually possible via HTML 5? Does this means that Media Capture API of HTML 5 is not yet fully deployed? If so will it be in near future? Could someone point me in the right direction?
Not currently. You will have to use a framework like AppMobi or Apache DeviceReady(Phonegap) to get access to the native camera via JavaScript in a UIWebview.
I recently did a small jQuery snippet that allows me to show a loading img until the real image is loaded.
The snippet seems to work in Safari, Chrome but not FireFox.
FireFox only displays a loading alt and never switches to the loaded image.
Here is the snippet
var loading = $('<img src="/media/ajax-loader.gif" alt="loading" />');
$('.thumbnail').each(function(){
var loadIMG = loading.clone();
$(this).after(loadIMG).load(function(){
$(this).fadeIn('fast');
loadIMG.hide();
}).hide();
});
Any ideas why?
You haven't said what exactly is happing on FF but below can be one of the problem. From jquery documentation
It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.
Here's the link for plugin.
Edit:
Based on comments from load event, try below:
$('.thumbnail').each(function(){
var loadIMG = loading.clone();
$(this).after(loadIMG).load(function(){
$(this).fadeIn('fast');
loadIMG.hide();
}).hide();
if (this.complete) $(this).trigger("load");
});
Of course, the plug-in seems to be doing same thing along with handling some other scenarios as well as.