Polygon highlighting with Mapbox or Leaflet
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' }); }); ...
Leaflet - Event on tiles loading
If you've got a lot of L.mapbox.TileLayer instances and you don't want to add the eventhandler manually to each instance like Alexandru Pufan suggests in his answer you could still use a loop and Object's instanceof method: map.eachLayer(function (layer) { if (layer instanceof L.mapbox.TileLayer) { layer.on('tileload', function(e) { console.log(e); });...
Cannot show markers in MapView
ios,objective-c,iphone,mapbox,rubymotion
That code should work: class MapScreen < PM::Screen def on_load RMConfiguration.configuration.setAccessToken("...") self.view.addSubview(map_view) annotation = RMAnnotation.alloc.initWithMapView(map_view, coordinate: map_view.centerCoordinate, andTitle: 'Hello') map_view.addAnnotation(annotation) end def map_view return @map_view if @map_view source = RMMBTilesSource.alloc.initWithTileSetResource('control-room-0.2.0', ofType:'mbtiles') @map_view ||= RMMapView.alloc.initWithFrame(self.view.bounds, andTilesource:source).tap do...
Mapbox studio labeling - prioritize label placement by feature size
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...
Flask and Jinja2 url_for error - concatenating json object into url_for
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...
Leaflet Markercluster - tooltip on hover issue
leaflet,mapbox,markerclusterer
You need to use the onEachFeature option to get the individual markers and bind handlers to the mouseover and mouseout events: onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.title); layer.on("mouseover", function () { layer.openPopup(); }); layer.on("mouseout", function () { layer.closePopup(); }); } Here's a working example on Plunker: http://plnkr.co/edit/hfjOWv3uCBFawDGqR3Ue?p=preview Note: i'm not...
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:...
Set default marker filter in 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; }); ...
In leaflet, how to calculate the Pixel Distance between two LatLng object?
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...
How to add markers to Mapbox layer control?
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...
How to remove all layers and features from map?
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...
Mapbox map styling for description box
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...
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...
setBounds to two different featureGroups at once mapbox leaflet?
map.fitBounds(myFeatureGroup1.getBounds().extend(myFeatureGroup2.getBounds())); See the LatLngBounds documentation, this is the first documented method....
How to get City / State / Country for Mapbox using reverse geocoding?
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...
MBXMapKit MBXOfflineMapDownloader size of download
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...
Zoom in on maker group in 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.
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 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/...
When do I need mapbox.js?
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....
Is there a way to filter geojson by clicking polygon in Leaflet?
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;...
getting user location and creating map not in sync
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: 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...
How to add markers via GeoJSON to an existing layer, without having to reset it
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',...
In leaflet, how to detect whether a LatLng in current display area?
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...
How to implement offline map in web application and where can i get the map tiles for download?
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...
Can't show two layers one above another in RMMapView from Mapbox SDK iOS
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...
Load GeoJSON into layer from a URL?
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...
Google Maps v2 for Android map tiles overlapping
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...
Mapbox select pin listener
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...
array of marker layers is not being deleted from leaflet map
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...
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.
how change type map mapbox-leaflet
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 ...
Custom Mapbox Geocoder Control
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...
Leaflet/Mapbox Markers Don't Repeat After Scrolling Around the Atlas
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...
Using circular images for RMPointAnnotation
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.
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 work around the CORS issue in Surface API from 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. :)...
MapBox ESRI Data Layer
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...
A simple map using Mapbox API not working?
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...
Leaflet coordinates wrapping
Short answer: nope. It's not implemented and trying to override default latLng behavior would break some parts of Leaflet code....
Mapbox tiles are not showing for V3 (401 not authorized) and messed with V4
I simply forgot to add the stylesheets.
In leaflet/mapbox, why can't I set the duration of `map.fitBounds`?
It should be set as: map.fitBounds(bounds, { padding: [50, 50], maxZoom: 18, animate: true, pan: { duration: 10 } }); ...
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,...
How to add markers to map box map?
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...
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...
Several different leaflet maps on same page
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...
Serving untouched data through Mapbox's static API
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...
Mapbox keeps GPS Lock after app is the background on Android
It seems you don't have to disable the MyLocationOverlay when in the lifecycle methods onResume/onPause. The Mapbox SDK seems to handle that for you.
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:...
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.
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...
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';...
How to remove MapBox logo from bottom left corner?
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...
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...
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....
geojson ignored when using 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:...
How to plot a marker away from another marker by 100 metres in Mapbox Leaflet?
I've forked your fiddle to show an example. It's based on these answers: http://gis.stackexchange.com/questions/25877/how-to-generate-random-locations-nearby-my-location var r = 100/111300 // = 100 meters , y0 = original_lat , x0 = original_lng , u = Math.random() , v = Math.random() , w = r * Math.sqrt(u) , t = 2 * Math.PI...
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>"); ...
leafleft/mapbox markers stack on top of each other
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....
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...
Removing geojson layers Mapbox.js/Leaflet.js
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...
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...
Routing between places with mapbox or similar direction api
You could use L.mapbox.FeatureLayer to render your featurecollection in combination with a filter: var featureLayer = L.mapbox.featureLayer('data.geo.json').addTo(map); var filter = function (feature) { // Check if feature is a linestring if (feature.geometry.type == 'Linestring') { // Check if has property wheelchair and value is yes if (feature.properties.hasOwnProperty('wheelchair') && feature.properties.wheelchair ===...
Mapbox JS markers not being removed using .removeLayer()
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 to change url titleLayer 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....
Leaflet-Omnivore make external file.geojson available to javascript variable
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,...
Markers not plotting on map using Mapbox and leaflet?
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...
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...
How can I add a data source hosted Mapbox into a mapbox-gl-js project
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...
Using MapBox wms with ArcGis
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...
Convert zip/postcode to latitude and longitude with mapbox API
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/...
Leaflet.js/Mapbox.js On Library Ready event?
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> ...
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...
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); ...
Mapbox tile is not being added to leaflet.js map?
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 © <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:...
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...
Mapbox Geocoding
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...
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...
How to use a mapbox map in cartodb
Your tileLayer url is faulty, it expects the url to have placeholders for zoomlevel {z} and {x} and {y} for the axis values. You've used the url from an actual tile, which will not work. L.tileLayer('https://a.tiles.mapbox.com/v4/felixmichel.kh7h21lp/{z}/{x}/{y}.png?access_token={token}', { attribution: 'Mapbox', subdomains: ['a','b','c','d'], token: 'pk.eyJ1IjoiZmVsaXhtaWNoZWwiLCJhIjoiZWZrazRjOCJ9.62fkOEqGMxFxJZPJuo2iIQ' }).addTo(map); Note that as you can see,...
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...
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...
Leaflet z-index
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...
How do I keep GeoJSON style after filter?
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...
Color transition effect in Leaflet.js?
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...
how to take snapshot in mapbox ios sdk of full map
Actually You can use a method called takeSnapshot in a RMMapView it returns an UIImage so you can use it for whatever you want, here is an example blurring my snapshot -(UIImage*) performScreenshotAndBlur { UIImage *blurImage = self.mapView.takeSnapshot; blurImage = [blurImage applyBlurWithRadius:10 tintColor:[UIColor colorWithRed:0.067 green:0.067 blue:0.067 alpha:0.2] saturationDeltaFactor:1.8 maskImage:nil]; return...
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...
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 = '"...
Centering map on user location with MBXMapkit (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:...
Trouble with leaflet maps (GET mapbox tiles unauthorized 401)
Set up your tileLayer to include your map's id and your user token: var tileLayer = L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', { attribution: 'Map data © <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: <YOUR MAPID HERE>, token: <YOUR TOKEN HERE> }); Here's...