Menu
  • HOME
  • TAGS

MapBox iOS SDK - First steps

ios,mapbox

OK, whoever is struggling with that. The trick is to set the zoom BEFORE you set the center coordinate.. ..for whatever reason....

My mapbox markers not displaying

javascript,mapbox

After debugging by the elimination method, I finally found the source of the problem. It was in the css, in an external theme. The culprit was this line: img { max-width: 100% !important; } I removed it and the markers came back :)...

In Mapbox.js, how to smooth a polyline?

javascript,geometry,leaflet,mapbox

You can use turf-bezier to create an interpolated bezier line out of any LineString geometry.

In leaflet, how to detect whether a LatLng in current display area?

leaflet,mapbox

map.getBounds().contains(point); Returns true if point (LatLng object) is in the map view. See the docs: http://leafletjs.com/reference.html#map-getbounds...

Zoom in on maker group in leaflet mapbox?

leaflet,mapbox

Switch from using layerGroup to featureGroup, theb you can use getBounds() on a feature group to retrieve its bounds, then use map.fitBounds(result) to zoom to that view.

How to work around the CORS issue in Surface API from mapbox?

ajax,api,cors,mapbox

We can send cross domain AJAX requests using JSONP. Below is the simple JSONP Request: $.ajax({ url : url, dataType:"jsonp", }); Source Working like a charm. :)...

Hide provinces in MapBox

leaflet,mapbox

I assume you are talking about the background tile layer. It is png tiles served from a server, so unless they have a set without those borders, no, there is no way to remove them. However, you can custom roll your own tiles using a variety of methods. Mapbox methods:...

Using circular images for RMPointAnnotation

ios,objective-c,mapbox

Are you sure that your image has alpha transparency around the circle? Also, you can just use RMAnnotation and the RMMapViewDelegate method to provide a layer (RMMarker or otherwise) for it rather than having RMPointAnnotation try to provide it for you.

Leaflet: How to get pixel position of a lat lng after zoom, before zoom begins

javascript,svg,d3.js,leaflet,mapbox

You need to listen for the "zoomanim" event and get the new center of your circle by doing the following: var coord = map._latLngToNewLayerPoint(new L.LatLng(51.5, -0.087), e.zoom, e.center); The animation of the marker is performed by CSS, specifically the class selected ".leaflet-zoom-anim .leaflet-zoom-animated" (look in leaflet.css). You need to do...

Thick white lines on mapbox/leaflet js map

javascript,css,d3.js,leaflet,mapbox

Line 155 in your styles.css: div.popup img { padding-bottom: 5px; padding-top: 5px; } Tiles are images too so that rule affects the images in your tilelayer...

Mapbox JS markers not being removed using .removeLayer()

javascript,leaflet,mapbox

The 'removeLayer' method just removes the layer from your map instance and keeps it intact so you can re-add it later. You'll need to call the clearLayers() of L.mapbox.FeatureLayer which will remove all the added features from the layer: featureLayer.clearLayers(); Also you're overwriting the reference featureLayer which holds your layer...

How can I update GeoJSON on my mapbox map after it has been created?

javascript,jquery,mapbox,geojson

I'm getting a 401 error when using your token: Failed to load resource: the server responded with a status of 401 (Unauthorized) When i use your code with Mapbox's example token and map (note, you should be using your own token and map) it's perfectly fine: L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ'; var...

array of marker layers is not being deleted from leaflet map

javascript,leaflet,mapbox

Old markers are getting redrawn because you're not emptying the marker array after you clear the layers on the map. After your first if statement you need to empty markers variable by setting markers = []. This way, when marker.push gets called in your forEach loop, their getting added to...

Mapbox Geocoding

javascript,geocoding,mapbox

Basically you have to register a listener for select event: geocoder_control.on('select', function(object){ var coord = object.feature.geometry.coordinates; //create and add your marker }); I've made an example for you: http://plnkr.co/edit/joOXJ6?p=preview...

Removing geojson layers Mapbox.js/Leaflet.js

leaflet,mapbox

Hm, okay - a few tweaks are necessary or recommended here: drawLocations(layer._geojson) Anything starting with a underscore in leaflet or Mapbox should be considered off-limits. Use the .getGeoJSON method instead. drawLocations(layer.getGeoJSON()); It doesn't look like you're actually adding layers to the assetLayerGroup. If you wanted to do that, you would...

A simple map using Mapbox API not working?

leaflet,mapbox

You're using the wrong parameters for L.mapbox.map, the first element is correct, that's for the ID of a HTML element or a reference to an HTML element. The second however, isn't for the options object. The second is for your mapbox mapid (or url, or tilejson), which you get when...

Seeing high CPU spikes in MapBox using SQLite3_Step

xcode,sqlite3,cpu,mapbox,route-me

Check out the 1.5.0 version, released just today, which improves disk caching performance and might address this for you.

geojson ignored when using mapbox

mapbox

That's happening because L.GeoJSON doesn't automaticly know that you want to set the marker options, so if it encounters a Point feature, it simply adds a default marker. If you want to do something special with point features, you can use the pointToLayer function of L.GeoJSON, check the following example:...

Serving untouched data through Mapbox's static API

mapbox

The short answer is you can't do this: Mapbox's API is ESPG:900913-only. The long answer is that if you really want to, you can use GDAL to represent your ESPG:4326 image as a non-geographic 900913 image. This is, to be clear, the long route and means that you'll need to...

Control pan and zoom animation duration in mapbox.js

mapping,gis,mapbox,mapbox-gl-js

Take a look at this fiddle. You can use a function like: function jumpTo(index){ map.setView(positions[index], 4, { pan: { animate: true, duration: 2 }, zoom: { animate: true } }); } And control it on moveend event....

React.js and Mapbox: mapbox map not rendering properly when using react.js

javascript,leaflet,reactjs,mapbox

You're missing the related CSS? You always need to set the height of the element: html, body, #map { height: 100%; } I am unable to test because of React but it sounds like the map is unable to get the correct dimensions from the element. That usually happens if...

how change type map mapbox-leaflet

leaflet,mapbox

Like this: // Provide your access token L.mapbox.accessToken = 'pk.yyyyyyyyyyyyyyyy'; // Create a map in the div #map L.mapbox.map('map', 'jonataswalker.kieo57jb'); //put yours here ...

Mapbox get latitude and longitude from device precise location

android,location,mapbox

There currently is a bit of disconnect between instantiating the UserLocationOverlay directly versus using the infrastructure bundled into the MapView. Give the following a try instead: // Setup UserLocation monitoring MapView mv = (MapView) view.findViewById(R.id.locateMeMapView); mv.setUserLocationEnabled(true); mv.setUserLocationTrackingMode(UserLocationOverlay.TrackingMode.FOLLOW); mv.setUserLocationRequiredZoom(10); // Retrieve UserLocation mv.getUserLocation(); ...

In leaflet, how to calculate the Pixel Distance between two LatLng object?

gis,leaflet,mapbox

You can convert your coordinates to screen points using: http://leafletjs.com/reference.html#map-latlngtolayerpoint And then measure the distance between the two points with: http://leafletjs.com/reference.html#point-distanceto...

mapbox geojson properties not available on hover

javascript,leaflet,mapbox,geojson

What you are doing is handling events of the featureLayer, not of the individual layers that are contained within the featureLayer. FeatureLayer is a group of layers, a layer for each feature within the collection you pass to it on initialization. Take this collection for instance, renders three markers in...

Can't show two layers one above another in RMMapView from Mapbox SDK iOS

ios,objective-c,mapbox

The usage looks right. One thing you might want to look at if you are not expecting to toggle the visibility of either layer is RMCompositeSource, which will fetch in parallel and client-side composite the layers, caching the result, and is a more efficient way to show layers that are...

Moving a UIImageView with a UIButton

ios,uiimageview,uibutton,mapbox

One problem is that ship is a local variable that you create in the first block of code. When that code block goes out of scope, ship will be nil, so when you try to set it's center in the button method, it won't work. You need to create a...

how to change url titleLayer mapbox

leaflet,mapbox

You can assign to variable like: var url1 = 'https://{s}.tiles.mapbox.com/v4/mysaqygi.m8jo7i0g/{z}/{x}/{y}.png'; var tileLayer = L.tileLayer(url1,{}); and then tileLayer.setUrl(url2); http://leafletjs.com/reference.html#tilelayer-seturl You can see here a demo of leaflet basemaps....

Mapbox map styling for description box

javascript,html,css,mapbox

Why not use the default control layer and create a custom L.Control? Doing that, the positioning is all taken care of for you: JS: var MyCustomControl = L.Control.extend({ options: { // Default control position position: 'bottomleft' }, onAdd: function (map) { // Create a container with classname and return it...

Open Leaflet Popup at bottom of marker

javascript,leaflet,mapbox

You have to provide the marker a customized Icon. You can use the same image, but you have to tweak the popupAnchor property to do that. See for reference http://leafletjs.com/reference.html#icon and http://leafletjs.com/examples/custom-icons.html In your case you'll have to do (considering the default icon is 25 x 41 px, iconAnchor could...

Polygon highlighting with Mapbox or Leaflet

javascript,leaflet,mapbox

Using Leaflet, you simply have to define a function to set the style of the polygon on mouseover event. For example: polygonLayer.on('mouseover', function (this) { this.setStyle({ fillOpacity: 0, color: 'black' }); }); ...

Flask and Jinja2 url_for error - concatenating json object into url_for

python,flask,jinja2,mapbox

feature is a JavaScript object. Jinja doesn't have access to those; it runs on the server, whereas your JavaScript runs in the client. feature doesn't exist when your template is rendered. You will need to handle the concatenation with JavaScript. var commoncontent = '<div><img src="{{ url_for("static", filename="images/eol/thumbs/big/") }}' + feature.properties.category.localimageurl.jpg...

How to move marker in Leaflet along a circle?

javascript,algorithm,leaflet,mapbox

The parametric equations that give you the points along a circle's circumference are given by: x = Xc + R * cos(theta) y = Yc + R * sin(theta) Where, x,y is a point on the circumference, Xc, Yc is the centre of the circle, R is its radius and...

When do I need mapbox.js?

leaflet,mapbox

Mapbox.js provides a convenient way to consume Mapbox services — tiles, geocoding, markers, etc — and helps developers comply with licensing/attribution terms automatically. It also looks like it adds some design scaffolding. Anything prefixed with L.mapbox in the API documentation is custom, but all features of Leaflet are still available....

Mapbox tiles are not showing for V3 (401 not authorized) and messed with V4

leaflet,mapbox

I simply forgot to add the stylesheets.

Mapbox tile is not being added to leaflet.js map?

google-maps,leaflet,mapbox

You need to add your token to the request otherwise you'll get 404: {"message":"Not Authorized - No Token"} Correct code: L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', subdomains: ['a','b','c','d'], mapId: 'myMapId', token:...

Leaflet-Omnivore make external file.geojson available to javascript variable

leaflet,mapbox,turfjs

Instead of using omnivore to grab the pts layer... Why not declare a pts variable, use jQuery.getJSON to grab pts.geojson and assign that response to the pts variable, then call L.geoJson(pts).addTo(map). Then you have the layer added, and you have the original geojson structure available for use in other places,...

how to implement mapbox.js offline caching

javascript,html5,cordova,mapbox

I don't know who told you or where you read that it's possible while using mapbox-js (some kind of reference would be nice) but it isn't and that's why you can't find it. However, it is possible using the iOS or Android SDK's: https://www.mapbox.com/help/ios-offline/ https://www.mapbox.com/help/android-offline/...

How do I keep GeoJSON style after filter?

javascript,mapbox

When you apply a filter, the filtered features get re-added to the layer, since you only apply the style on the ready event when you at first load the features and they get added, you'll lose the style when you use the filter because of the re-adding. You should apply...

How to add markers to map box map?

mapbox

Two problems: coordinate order and north/south east/west This coordinate: "coordinates": [ -40.729423, 73.981437 ] Is in latitude, longitude order. Mapbox, and the GeoJSON standard format that this data is in, specifies a longitude, latitude order (similarly, KML, Shapefiles, and most other geospatial data formats specify longitude, latitude rather than the...

Load GeoJSON into layer from a URL?

javascript,leaflet,mapbox

You can use ajax to snag the data from your own site Here is a jquery way of doing it. $.ajax({ dataType: "json", //you shouldn't need to declare geojson url: "data/district.geojson", success: function(data) { //whatever you want to do with the data, alternatively you could use a closer around the...

leafleft/mapbox markers stack on top of each other

leaflet,mapbox

Leaflet does not spread markers by default. You are using a custom CSS class for your markers. Check your CSS paddings, margins and borders. They sometimes add up....

resulting HTML from $compile(custom-directive) doesn't bind {{values}}

angularjs,angularjs-directive,angularjs-scope,mapbox,angularjs-compile

You need to return the compile angular element instead of returning html of that element. Only returning the html will never carry the angular two way binding. By using compiled object you can keep your binding working. Code this.createPopup = function(marker) { var popup = "<mapbox-marker-popup" + "title = '"...

Google Maps v2 for Android map tiles overlapping

android,google-maps,mapbox

you can just use: map.setMapType(GoogleMap.MAP_TYPE_NONE); Refs: https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap#setMapType(int) https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap#MAP_TYPE_NONE...

getting user location and creating map not in sync

ios,swift,mapbox

Location manager is running asynchronously (expected behavior), which means that it returns immediately and finishes creating the map as soon as the create map box method is called. However, it doesn't mean that the map has gotten a location yet. I'm thinking that the best way to implement this would...

Leaflet coordinates wrapping

javascript,leaflet,mapbox

Short answer: nope. It's not implemented and trying to override default latLng behavior would break some parts of Leaflet code....

Leaflet.js/Mapbox.js On Library Ready event?

javascript,leaflet,mapbox

Too be short, there isn't. You could however, hook into the onload event of the script tag: <script type="text/javascript" onload="console.log(L)" src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> ...

Leaflet/Mapbox Markers Don't Repeat After Scrolling Around the Atlas

leaflet,mapbox

Use the worldCopyJump option of L.mapbox.map (L.map): With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible. Working example on Plunker: http://plnkr.co/edit/cbDNH6Rs5SbBKGY7LQGe?p=preview Reference: http://leafletjs.com/reference.html#map-worldcopyjump...

How to remove MapBox logo from bottom left corner?

javascript,mapbox

You can only completely remove the attribution on maps that do not contain Mapbox (Streets, Terrain, Satellite) or OpenStreetMap layers. This is because the OpenStreetMap and DigitalGlobe data contained in these layers legally require attribution. If your map doesn’t include these layers, you can remove the default attribution by setting...

MapBox ESRI Data Layer

json,gis,spatial,mapbox,esri

MapBox seems to only accept Latitude and Longitude coordinates (from what I can tell at least). The coordinates you have in your file come from ESRI 102100 (3857) projection system - the clue is near the beginning of your file: "spatialReference":{"wkid":102100,"latestWkid":3857}..." Normally, you'd have to convert this yourself, a good...

mapbox leaflet javascript pane layer control

javascript,leaflet,layer,mapbox,pane

Put explicit zIndexes on your mbstyle and mblabels layers: var mbstyle = L.mapbox.tileLayer('statecodemog.aa380654', { 'zIndex': 1 }); var mblabels = L.mapbox.tileLayer('statecodemog.798453f5', { 'clickable': 'false', 'zIndex': 1000 }); Then tell your L.control.layers not to mess around with the zIndexes: L.control.layers(baseLayers, groupedOverlays, { 'autoZIndex': false }).addTo(map); A working fork of your Fiddle:...

How to implement offline map in web application and where can i get the map tiles for download?

openstreetmap,mapbox

Use leaflet with an offline caching option, something like: https://github.com/tbicr/OfflineMap/tree/master/leaflet_idb_sql_site You can find more options here...

Leaflet - how to remove previous marker automatically

javascript,node.js,leaflet,mapbox

You can remove layers from the map using the removeLayer function of L.Map. A marker is also seen as a layer in Leaflet. So in your onclick handler, first remove the current marker, then create a new marker and add to the map. Something like this will do the trick:...

Best library/API to build an Android app making use of offline maps

android,geolocation,maps,google-maps-android-api-2,mapbox

I use Nutiteq His is fully featured library that has many unique features...

In mapbox can you only disable the ability to zoom in?

mapbox

You can take advantage of the minZoom and maxZoom options when you create your map. This way the user can only zoom in so far but can still zoom out. L.mapbox.accessToken = 'accessToken'; L.mapbox.map('map', 'mapId', {zoomControl: false, attributionControl: false, minZoom: 5}); ...

setBounds to two different featureGroups at once mapbox leaflet?

leaflet,mapbox

map.fitBounds(myFeatureGroup1.getBounds().extend(myFeatureGroup2.getBounds())); See the LatLngBounds documentation, this is the first documented method....

How to add markers via GeoJSON to an existing layer, without having to reset it

maps,mapbox,geojson

You could try something like this, it depends on two functions inherited from L.LayerGroup called removeLayer & addLayer: // Create featurelayer and add it to the map var featureLayer1 = L.mapbox.featureLayer(mapid).addTo(map); // Create another featurelayer, don't add it to the map var featureLayer2 = L.mapbox.featureLayer(mapid); // Wait until ready featureLayer2.on('ready',...

How can I fix bootstrap leaflet map mobile display?

twitter-bootstrap,mobile,leaflet,mapbox,window-resize

the maps now work. the issue was http/https. two things had to be changed. 1) the method of calling the tiles and associated php script initially, i used tileserver.php to call 'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson' now i'm using mbtiles-server.php to call 'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png") note: php script had to be in...

Leaflet — can't change radius on circlemarker on zoom

javascript,leaflet,mapbox

You need to reset the style once the zoom changes. Simply add the below line in your map.on('zoomend') function timeline.setStyle(damsStyle) so, your function would be like this map.on('zoomend', function(e) { var currentZoom = map.getZoom(); console.log("Current Zoom" + " " + currentZoom); if (currentZoom <= 6) { damsRadius = 2; }...

How to load and destroy maps on panning than loading it completely on load

javascript,leaflet,openstreetmap,mapbox

Assuming you are using the javascript api of Mapbox with a tilelayer, you could set the unloadInvisibleTiles option of that tilelayer. If true, all the tiles that are not visible after panning are removed (for better performance). true by default on mobile WebKit, otherwise false. Setting the option when instanciating...

Centering map on user location with MBXMapkit (Mapbox)

ios,mapkit,mapbox

The authoritative way to do this is to pass includeMetadata:NO and you won't get this starting info: https://www.mapbox.com/mbxmapkit/api/Classes/MBXRasterTileOverlay.html#//api/name/initWithMapID:includeMetadata:includeMarkers:...

How can I add a data source hosted Mapbox into a mapbox-gl-js project

mapbox,mapbox-gl-js,mapbox-gl

The new way to do this is via Map#addSource: map.addSource('foo-bar.ci58c127', { type: 'vector', url: 'mapbox://foo-bar.ci58c127' }); The first argument is the source ID, which you can use when adding layers: map.addLayer({ "id": "markers", "type": "symbol", "source": "foo-bar.ci58c127", "layout": { ... }, "paint": { ... } }); Whenever there are breaking...

How to get click event of marker using MapBox SDK?

android,mapbox,marker,clicklistener

I got the solution for marker click event in mapbox using a functionality provided by mapbox sdk called ItemizedIconOverlay. I have done like following : public void placeGTMarker() { alMarkerGT = new ArrayList<Marker>(); marker = new Marker("my Marker", "", latLng); marker.setMarker(activity.getResources() .getDrawable(R.drawable.map_pin)); mv.addMarker(marker); alMarkerGT.add(marker); itemizedIconOverlayGT = new ItemizedIconOverlay(activity, alMarkerGT, new...

Is there a way to filter geojson by clicking polygon in Leaflet?

leaflet,mapbox

It's just a matter of hooking on to the click event of the layer, clearing the group and add that single layer. Also hook on to the map click, remove the single layer and restore the rest. Here's a quick-n-dirty example: // vars to store stuff var geojson, source, selected;...

How to add markers to Mapbox layer control?

javascript,mapbox

At the moment you're using their example ID and maps. You're not supposed to do that. If you would have read at the bottom of the page you posted it says: Use this example by copying its source into your own HTML page and replacing the Map ID with one...

Mapbox select pin listener

android,mapbox

I spend almost one day to find it. If somebody have same problem you can find the listener here: myMapBoxView.setMapViewListener(new MapViewListener() { @Override public void onShowMarker(MapView mapView, Marker marker) { } @Override public void onHideMarker(MapView mapView, Marker marker) { } @Override public void onTapMarker(MapView mapView, Marker marker) { } @Override...

How to get City / State / Country for Mapbox using reverse geocoding?

geocoding,mapbox

I ended up coming up with this function based on what mapbox returned. The root node gives the town/city, and then gives the context around it. It was a matter of checking which context was the postal code and excluding that, while rebuilding the string. //builds proper format of location...

install optimise with npm from optimist.js file

javascript,node.js,ubuntu,npm,mapbox

If you just want to use the package, $ npm install -g carto should be enough to get you started. Note that you might need to use sudo for that command. Node.js is centered around a package manager called "npm". Every npm project has a package.json at its root directory...

Adding geoJSON feature attribues to mapbox popup

javascript,gis,leaflet,mapbox,geojson

You're using the layer variable: marker.bindPopup("<p>" + layer.feature.properties.name + "</p>"); The layer variable does not contain the feature object. You are looping over the contained layers assigning them to the marker variable, those have the feature object, so you should that: marker.bindPopup("<p>" + marker.feature.properties.name + "</p>"); ...

Switch for making background map from Mapbox visible/invisible in D3

javascript,d3.js,data-visualization,mapbox

You need to load the tileLayer seperately so you can create a reference to it which you can then in turn use to create a layercontrol which can easily enable/disable layers: L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ'; // Create the tileLayer. var tileLayer = L.mapbox.tileLayer('examples.map-i86nkdio'); var map = L.mapbox.map('mapbox', null, { // Do...

Using MapBox wms with ArcGis

javascript,arcgis,mapbox

As I was able to override the Mapbox function, I could add extra querystring parameters. A quick look at the ArcGis Export Map api (http://resources.esri.com/help/9.3/arcgisserver/apis/rest/export.html), I saw that bboxSR could do the trick. From the api help page: bboxSR: The well-known ID of the spatial reference of the bbox. If...

Color transition effect in Leaflet.js?

leaflet,mapbox

By using Chrome Web inspector, you can watch how this effect is managed with TileLayers stacked on top of each other, and the CSS opacity attribute changing as time passes on.So it sounds like there would be some custom JS timing setup you would need to duplicate this, probably with...

Set default marker filter in mapbox

javascript,html,filter,mapbox

Wouldn't the solution be to just add the below directly after myLayer.setGeoJSON(geoJson).addTo(map);? myLayer.setFilter(function(f) { return f.properties['development'] === true; }); ...

Leaflet z-index

javascript,leaflet,mapbox

Currently it's not available in the Leaflet API. Luckily if Leaflet is using SVG, all objects are DOM elements and we can simply change their order. Here's a sample code: L.Path.prototype.setZIndex = function (index) { var obj = $(this._container || this._path); if (!obj.length) return; // not supported on canvas var...

proper implementation of invalidateSize() to display mapbox/leaflet on mobile device

mobile,maps,leaflet,mapbox,window-resize

the maps now work. the issue was http/https. two things had to be changed. 1) the method of calling the tiles and associated php script initially, i used tileserver.php to call 'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson' now i'm using mbtiles-server.php to call 'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png") note: php script had to be in...

Convert zip/postcode to latitude and longitude with mapbox API

javascript,geolocation,mapbox

Mapbox has it's own geocoding API in public beta: Geocoding requests are queries composed of location text or lat/lon coordinates that can be used to find corresponding place data. A geocoding request includes a geocoding {index} in requests which specifies the dataset to use to find place data. https://www.mapbox.com/developers/api/geocoding/...

Mapbox map in ui-bootstrap tab not loading tiles

angularjs,angular-ui-bootstrap,mapbox

The map gets initialized when the mapcontainer is not visible, that's why it fails. You're on the right path with calling invalidateSize but you need to do that when the tab becomes visible. I see you've already setup an event which you could hook into in your directive link function:...

The “open popup programmatically” button not working on my mapbox.js map I have created

javascript,jquery,popup,mapbox

Solved. This part: map.featureLayer.on('ready', function(e) { document.getElementById('open-popup').onclick = clickButton; }); never fires because you already have another event: myLayer.on('layeradd', function(e) { The onready event is for asynchronous calls. Reference here. L.mapbox.accessToken = 'pk.eyJ1Ijoic21vcnJpczMiLCJhIjoiU1RtclNJMCJ9.AWDKQ9l9dY32tB5J8srivg'; var map = L.mapbox.map('mapbox', 'smorris3.78f0898a', { attributionControl: false, zoomControl: false, legendControl: { position: 'bottomleft' } }) .setView([32.888065,...

MBXMapKit MBXOfflineMapDownloader size of download

ios,mapbox

There is an in-progress feature for determining total files before actually kicking off the download: https://github.com/mapbox/mbxmapkit/pull/137 But otherwise, yes, that sounds decent. As far as calculating the space, tile sizes will vary, but you could run some sample use cases of your app and get some average tile sizes as...

Change the placeholder text of an input field after initializing

javascript,jquery,placeholder,mapbox

It wasn't working in your example because jQuery wasn't included. If you don't want to use jQuery, you could use the following: Updated Example document.querySelector('.leaflet-control-mapbox-geocoder-form input').placeholder = "Search for Location"; You can also add an event listener for the ready event and then change the placeholder attribute within the callback....

How to remove all layers and features from map?

jquery,leaflet,mapbox

Loop over all the layers added to the map using the eachLayer method of L.Map, then call the removeLayer method of L.Map on each of them: map.eachLayer(function (layer) { map.removeLayer(layer); }); References: eachLayer: http://leafletjs.com/reference.html#map-eachlayer removeLayer: http://leafletjs.com/reference.html#map-removelayer Please note that this wil remove ALL the layers from your map. That means...

Displaying a Highchart Line Chart in Mapbox Marker Pop-up

javascript,jquery,highcharts,mapbox

I try with this solution, may it will help you, JSFiddle HTML: <head lang="en"> <title></title> </head> <body> <div id='map'></div> </body> CSS: body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .sparkline { height: 100px; width: 200px; } jQuery: L.mapbox.accessToken = 'pk.eyJ1IjoibmF1dGlseXRpY3MiLCJhIjoidG5tdktlMCJ9.Ktr2w0QzGrAN2UNtrJJziw';...

In leaflet/mapbox, why can't I set the duration of `map.fitBounds`?

gis,leaflet,mapbox

It should be set as: map.fitBounds(bounds, { padding: [50, 50], maxZoom: 18, animate: true, pan: { duration: 10 } }); ...

Custom Mapbox Geocoder Control

leaflet,geocoding,mapbox

If you were to show Mapbox geocoder results not in conjunction with one of their maps, it would violate the Mapbox Terms of Service. This would explain why there are no independent libraries for doing so. But what you describe doesn't sound like it would necessarily run afoul of the...

Markers not plotting on map using Mapbox and leaflet?

jquery,leaflet,mapbox

You're not adding your L.mapbox.featureLayer (pivotslayer) to you mapinstance: var pivotsLayer = L.mapbox.featureLayer(); Assuming you have a reference to your map instance in a variable called map: var pivotsLayer = L.mapbox.featureLayer().addTo(map); // or map.addLayer(pivotsLayer); I've tried your data: http://plnkr.co/edit/VjijEh?p=preview and your circle is ending up somewhere in the atlantic above...

How to change margins in SMCalloutView

objective-c,mapbox,smcalloutview

You have to overwrite the SMCalloutView as I did here: https://github.com/Olinguito/YoIntervengoiOS/blob/master/Pods/SMCalloutView/SMCalloutView.m#L18 Hope it helps you....

Mapbox: Marker Nav links outside of map

javascript,navigation,mapbox,markers

Here it is. All you have to do is something like: var content = '<h2>New Content!<\/h2>' + '<p>' + marker.feature.properties.title + '<br \/>' + 'link: ' + marker.feature.properties.weburl + '<\/p>'; marker.bindPopup(content); ...

Open leaflet marker using url parameter not working now that markercluster is used

javascript,leaflet,mapbox,markerclusterer

My guess (am unable to test this) is that your map is still zooming while you call openPopup on the marker. At that time the marker isn't added to the map yet because of your cluster so the popup won't show. You could try to wait untill the setView method...

Mapbox studio labeling - prioritize label placement by feature size

css,label,mapbox

Yes, MapBox Studio places labels based on the order of the features in the data. So depending on how you store your data, you will have to do some pre-processing. If you can store your data in a PostGIS database, it's very easy to do things like this on the...

Do embedded GeoJSON styles work with Mapbox GL?

javascript,maps,mapbox,mapbox-gl-js

Currently, no - simplestyle-spec isn't supported in Mapbox GL. Currently the GeoJSON support is still very primitive, given that the focus was initially on vector tiles. simplestyle-spec support is certainly in the plans.

Several different leaflet maps on same page

leaflet,mapbox,gpx

You had an error with trying to call fitBounds on a undefined object.. This codeblock here resolves the issue. Notice how I pass the map reference(ref:ref) to GPX in its options hash so I can clearly retrieve it later as opposed to trying to grab it via index.The GPX retrieval...