How to Programming with Mapbox

angularjs,angular-ui-bootstrap,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...

Mapbox map in ui-bootstrap tab not loading tiles

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:...

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...

A simple map using Mapbox API not working?

leaflet,mapbox,markerclusterer

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 Markercluster - tooltip on hover issue

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...

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 to plot a marker away from another marker by 100 metres in Mapbox Leaflet?

javascript,jquery,placeholder,mapbox

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...

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...

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',...

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...

Change the placeholder text of an input field after initializing

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....

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....

Zoom in on maker group in leaflet mapbox?

javascript,navigation,mapbox,markers

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.

Mapbox: Marker Nav links outside of map

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); ...

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...

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 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 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...

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...

how change type map mapbox-leaflet

javascript,jquery,popup,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 ...

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

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,...

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?

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...

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...

My mapbox markers not displaying

mobile,maps,leaflet,mapbox,window-resize

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 :)...

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

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...

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 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...

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, how to detect whether a LatLng in current display area?

objective-c,mapbox,smcalloutview

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...

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; }); ...

How to change margins in 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....

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...

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...

Color transition effect in Leaflet.js?

leaflet,mapbox,cartography

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...

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...

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,...

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

I simply forgot to add the stylesheets.

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...

Leaflet - Event on tiles loading

javascript,jquery,mapbox,geojson

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); });...

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

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...

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.

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...

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.

array of marker layers is not being deleted from leaflet map

mapping,gis,mapbox,mapbox-gl-js

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...

Control pan and zoom animation duration in mapbox.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....

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.

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.

Leaflet z-index

javascript,geocoding,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...

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 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...

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:...

Trouble with leaflet maps (GET mapbox tiles unauthorized 401)

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

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...

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

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 = '"...

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' }); }); ...

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(); ...

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> ...

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 do I keep GeoJSON style after filter?

javascript,html5,cordova,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...

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...

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 mapbox.js offline caching

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/...

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...

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

openstreetmap,mapbox,geojson

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

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,...

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 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...

Mapbox JS markers not being removed using .removeLayer()

javascript,leaflet,reactjs,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...

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:...

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

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...

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...

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

google-maps,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...

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:...

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;...

How to add markers to Mapbox layer control?