Mapbox JavaScript API, a Leaflet Plugin

Overview

mapbox.js

Build Status

A Mapbox plugin for Leaflet, a lightweight JavaScript library for traditional raster maps.

For the state-of-the-art Mapbox vector maps library, see Mapbox GL JS.

API

Managed as Markdown in API.md, following the standards in DOCUMENTING.md

Examples

Usage

Recommended usage is via the Mapbox CDN, with code snippets available on the official documentation page

The mapbox.js file includes the Leaflet library. Alternatively, you can use mapbox.standalone.js, which does not include Leaflet (you will have to provide it yourself).

See the API documentation and Examples for further help.

Usage with Browserify

Install the mapbox.js module and add it to dependencies in package.json:

npm install mapbox.js --save

Require mapbox in your script:

// main.js

require('mapbox.js'); // <-- auto-attaches to window.L

Browserify it:

browserify main.js -o bundle.js

Usage as Download

You can download a built release at the mapbox.js-bower repository.

Building

Requires node.js installed on your system.

git clone https://github.com/mapbox/mapbox.js.git
cd mapbox.js
npm install
make

This project uses browserify to combine dependencies and installs a local copy when you run npm install. make will build the project in dist/.

Tests

Test with phantomjs:

npm test

To test in a browser, run a local development server and go to /test.

Version v0.x.x

Version v0.x.x can be accessed in the v0 branch..

Editing Icons

Requirements:

inkscape
pngquant
  1. Make edits to theme/images/icons.svg.
  2. Run ./theme/images/render.sh to update sprites from your edits.
  3. Add a CSS reference with the appropriate pixel coordinate if adding a new icon.

Running documentation locally

Documentation is powered by Jekyll. Running using the following command:

./jekyll.sh
Comments
  • click/touch events appear fundamentally broken on mobile

    click/touch events appear fundamentally broken on mobile

    A default, bare bones implementation of MapBox appears to 'eat' about every other click on android, and intermittently on iOS, to the point it would be impossible to use this system in any kind of production environment on mobile.

    By 'eat clicks' I am speaking specifically about tapping the zoom or layer buttons, etc. Is the MapBox team aware of this issue and is there any time window to expect a fix?

    opened by chschie 50
  • IE9 jsonp (?) issues

    IE9 jsonp (?) issues

    I'm observing 2 likely related issues w/ mapbox.js HEAD and IE9 (9.0.8112):

    1. mapbox.load() sporadically returning an empty tilejson object
    2. interactivity dead where MapBox hosting returns 304 (not modified)

    Example

    • http://mapbox.com/frame/?villeda.map-m1aei9is#5.00/34.866/-73.903
    • http://gis.nyc.gov/oem/he/map.htm (they're about to apply a fix for (1) where they'll embed the tilejson hash in the application, so issue 2 should be nicely observable there).

    I cannot reproduce these issues with an older setup, e. g.:

    http://www.npr.org/censusmap/#6.00/41.152/-90.943

    opened by lxbarth 22
  • Support JSPM package loading.

    Support JSPM package loading.

    As it stands using JSPM to load mapbox fails badly. This is unfortunate for me, since I would like to use mapbox instead of vanilla leaflet (which works under JSPM)

    I might be able to figure out how to fi this, but if you guys have ideas (or just suggestions to speed me up) that would be really helpful

    -Chris

    opened by lostinplace 17
  • Fixed layout

    Fixed layout

    • [x] We need a page to link to to show examples
    • [x] We need a page to link to to show plugins
    • [x] We need to add an obvious link back to mapbox. This means a logo like the rest of the site, not a hexagon or a text link.
    • [x] Framing for plugins landing page
    • [x] Framing for examples landing page
    opened by tmcw 14
  • Improved examples pages

    Improved examples pages

    I'm working on a new landing page for the site and want to emphasize our examples as a way to get started. In general, I would like to see a better search for examples implemented on this page and trying out a full width example layout. Here's a quick wireframe of what I have in mind:

    examples-wireframe

    • Searching for examples is emphasized at the top.
    • Example subject with links are exposed in a pane. I think this column layout will lend itself some stronger readability over what we currently have:

    examples-wireframe-contents

    • Code output is toggled and contained in the same panel as the example.
    • Optional content space below to walk through more elaborate examples.

    cc @geografa @tmcw

    opened by tristen 14
  • Mapbox sometimes doesn't resize

    Mapbox sometimes doesn't resize

    I don't have much data yet. Anecdotally, I know, that at somepoint after mapbox load, it will no longer load in new tiles to fill an expanded container when the window is resized.

    opened by joeybaker 14
  • Popup on marker not working on mobile devices

    Popup on marker not working on mobile devices

    I'm creating a map with Mapbox.js and I have a problem. I've added some markers to the map with a popup on each of them. Testing this on Chrome Desktop it works well, when I click the marker it shows the popup. But when I'm trying to do the same on mobile (Android and iOS) it doesn't work at all. On mobile the popup is never shown when I touch on them.

    Anyone know why is this happening? And how to solve it?

    Thanks

    opened by nicolasaiz173 13
  • Leaflet and Mapbox lib version confusion

    Leaflet and Mapbox lib version confusion

    What version of leaflet is mapbox.js supposed to support? package.json has 0.7.3, but calling L.version on an example page returns 0.7.2.

    Further, a page that loads V 2.1.4 of mapbox.js returns 2.1.3 when L.mapbox.VERSION is called.

    Example Page https://www.mapbox.com/mapbox.js/api/v2.1.4/

    opened by jmoe 12
  • v4 @2x handling

    v4 @2x handling

    @jfirebaugh OTOH when using the Mapbox v4 api mapbox.js can:

    • Drop all handling/logic around the autoscale flag in tilejson,
    • Leave the 256 virtual pixel (DOM) image size alone,
    • Append the @2x suffix to tile URLs when window.devicePixelRatio says so.

    The only thing that needs to change when on a retina screen is using the @2x suffix.

    cc @tmcw

    opened by yhahn 12
  • make marker popups work better

    make marker popups work better

    • Added overflow-auto and max height to popups
    • Fixed overly broad and aggressive rule intended for tiles that was interfering with image styles in popups
    • Made base type styles smaller

    From: screen shot 2014-01-28 at 3 26 18 pm

    To: screen shot 2014-01-28 at 3 26 02 pm

    opened by samanpwbb 12
  • natural earth for the web set

    natural earth for the web set

    :full_moon_with_face:

    I have a dream of a website that's like Natural Earth except it serves GeoJSON, pre-simplified to rational browser sizes. So, the basics like:

    • US States
    • Countries
    • ZCTAs
    • Congressional Districts

    So, like us-atlas except GeoJSON-focused, not TopoJSON, you don't need to run a makefile, you can just download them, properties are included, and they are simplified to rational sizes.

    Thoughts? @ajashton @mourner ?

    enhancement 
    opened by tmcw 11
  • geocode returns leading zero stripped postCode

    geocode returns leading zero stripped postCode

    I was doing some feature testing with Puerto Rican locations and found that at least one location returns a postCode of 920 rather than 00920 while several others with leading zeros return the full zip code. This was easy to handle for in our code but ideally it could be fixed in the db so that this exception doesn't surprise others.

    location tested using forward search: 1332 Avenida Franklin Delano Roosevelt San Juan, Puerto Rico

    Returned from api: buh bye 0s

    Verified zip code should be 00920: 00920

    opened by Brennaleker 0
  • request fixed/patching vulnerable CVE-2020-8203

    request fixed/patching vulnerable CVE-2020-8203

    Requesting a patch/fixed issue vulnerabilities as pull-request ๐Ÿ› in #1365

    Prototype Pollution is a vulnerability affecting JavaScript. Prototype Pollution refers to the ability to inject properties into existing JavaScript language construct prototypes, such as objects. JavaScript allows all Object attributes to be altered, including their magical attributes such as __proto__, constructor and prototype. An attacker manipulates these attributes to overwrite, or pollute, a JavaScript application object prototype of the base object by injecting other values. Properties on the Object.prototype are then inherited by all the JavaScript objects through the prototype chain. When that happens, this leads to either denial of service by triggering JavaScript exceptions, or it tampers with the application source code to force the code path that the attacker injects, thereby leading to remote code execution.

    opened by imhunterand 0
  • Prototype Pollution in lodash vulnerable CVE-2020-8203

    Prototype Pollution in lodash vulnerable CVE-2020-8203

    Describe the bugs: ๐Ÿ›

    lodash is a modern JavaScript utility library delivering modularity, performance, & extras. Affected versions of this package are vulnerable to Prototype Pollution. The function zipObjectDeep can be tricked into adding or modifying properties of the Object prototype. These properties will be present on all objects.

    Prototype Pollution is a vulnerability affecting JavaScript. Prototype Pollution refers to the ability to inject properties into existing JavaScript language construct prototypes, such as objects. JavaScript allows all Object attributes to be altered, including their magical attributes such as __proto__, constructor and prototype. An attacker manipulates these attributes to overwrite, or pollute, a JavaScript application object prototype of the base object by injecting other values. Properties on the Object.prototype are then inherited by all the JavaScript objects through the prototype chain. When that happens, this leads to either denial of service by triggering JavaScript exceptions, or it tampers with the application source code to force the code path that the attacker injects, thereby leading to remote code execution.

    PoC

    const _ = require('lodash'); _.zipObjectDeep(['__proto__.z'],[123]) console.log(z) // 123
    

    There are two main ways in which the pollution of prototypes occurs:

    • Unsafe Object recursive merge
    • Property definition by path

    Unsafe Object recursive merge The logic of a vulnerable recursive merge function follows the following high-level model:

    merge (target, source)
    foreach property of source
    
    if property exists and is an object on both the target and the source merge(target[property], source[property]) else target[property] = source[property]
    

    When the source object contains a property named __proto__ defined with Object.defineProperty() , the condition that checks if the property exists and is an object on both the target and the source passes and the merge recurses with the target, being the prototype of Object and the source of Object as defined by the attacker. Properties are then copied on the Object prototype.

    Clone operations are a special sub-class of unsafe recursive merges, which occur when a recursive merge is conducted on an empty object: merge({},source). lodash and Hoek are examples of libraries susceptible to recursive merge attacks.

    Affected environments

    • The following environments are susceptible to a Prototype Pollution attack:
    • Application server
    • Web server
    • Web browser

    CVE-2020-8203 CVSS:3.1/AV:N/AC:H/PR:N/UI:N/S:U/C:N/I:H/A:H GHSA-p6mc-m468-83gw

    opened by imhunterand 0
  • Remote code execution in Kramdown

    Remote code execution in Kramdown

    Kramdown before 2.3.1 does not restrict Rouge formatters to the Rouge::Formatters namespace, and thus arbitrary classes can be instantiated.

    CVE-2021-28834 GHSA-52p9-v744-mwjj

    opened by imhunterand 1
  • Unintended read access in kramdown gem

    Unintended read access in kramdown gem

    Descriptions Issue ๐Ÿ‘

    The kramdown gem before 2.3.0 for Ruby processes the template option inside Kramdown documents by default, which allows unintended read access (such as template="/etc/passwd") or unintended embedded Ruby code execution (such as a string that begins with template="string://<%= `). NOTE: kramdown is used in Jekyll, GitLab Pages, GitHub Pages, and Thredded Forum.

    CVE-2020-14001 9.8 / 10 CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:H

    imhunterand fix 2 alerts in Gemfile.lock

    opened by imhunterand 0
Releases(v3.3.1)
  • v3.3.1(May 5, 2020)

  • v3.3.0(Mar 20, 2020)

    • Changes default map styles (e.g. mapbox.streets) to no longer load from Legacy Maps API #1317
    • Updated relevant dependencies to @mapbox namespace #1318
    • Fix issue where logo would not appear for Mapbox layers added after map init #1324
    Source code(tar.gz)
    Source code(zip)
  • v3.2.1(Oct 17, 2019)

  • v3.2.0(Feb 27, 2019)

    • โš ๏ธ Changes FORCE_HTTPS option to true by default.
    • ๐Ÿƒ Upgrades Leaflet to v1.4.0.
    • Updates the Mapbox logo.
    • Removes deprecation warnings in the console about L.Mixin.Events.
    • Removes Bower support.
    • Adds the built files to the NPM package.
    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(Mar 30, 2016)

    • Adds autocomplete and country options to the L.mapbox.geocoder and L.mapbox.geocoderControl interfaces. These let you narrow down searched countries and enable more precise searches if you have precise input.
    • Adds an informative error if you try to use L.mapbox.tileLayer with a new style URL which will tell you to use L.mapbox.styleLayer instead.
    • Adds a notfound event to the geocoderControl interface to allow applications to listen for unsuccessful searches.
    • Re-compressed control PNGs for smaller size
    • Documentation improvements
    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Mar 30, 2016)

Owner
Mapbox
Mapbox is the location data platform for mobile and web applications. We're changing the way people move around cities and explore our world.
Mapbox
This is the leaflet plugin for GeoServer. Using this plugin user can have access to wms and wfs request easily.

Documentation leaflet-geoserver-request This is the plugin for Geoserver various kind of requests. Using this plugin, we can make WMS, WFS, getLegendG

Tek Kshetri 127 Dec 15, 2022
MERN stack travel app using mapbox API, Travel and drop pin , share reviews and rate the location

MERN-Travel-Map Travel Map Pin A single page application built with MERN Stack from scratch (MongoDB + Mongoose, Express, React & NodeJs) Table of Con

Bรนi Quแป‘c Trแปng 11 Dec 29, 2022
This map is tracking the position of ISS(international space setallite) at every 1 second. I use Nasa's "where the iss" API and "Leaflet.js" for the map.

ISS-tracking-map About This map is tracking the position of ISS(international space setallite) at every 1 second. I use Nasa's "where the iss" API and

Waz.sheeran 2 Oct 25, 2021
Draw tools for mapbox-gl-js

@mapbox/mapbox-gl-draw Adds support for drawing and editing features on mapbox-gl.js maps. See a live example here Requires mapbox-gl-js. Compatible v

Mapbox 750 Jan 2, 2023
Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Microsoft Power BI Make sense of your big & dynamic location data with the Mapbox Visual for Power BI. Quickly design high-performan

Mapbox 121 Nov 22, 2022
Vuejs 2 components for interacting with mapbox-gl-js

VueMapbox Combine powers of Vue.js and Mapbox Gl JS Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the ma

Alex 425 Dec 26, 2022
Demo of Singapore buildings 3D tiles from OneMap on Mapbox GL JS.

Singapore buildings 3D Tiles from OneMap 3D on Mapbox GL JS This is a demo of Singapore buildings 3D tiles from OneMap 3D on Mapbox GL JS. Development

Chee Aun 5 Nov 6, 2021
(IDW) Interpolated Heatmap Layer for mapbox-gl

Mapbox :: Interpolated Heatmap(s) InterpolateHeatmapLayer is a minimalist JavaScript library for rendering temperature maps (or interpolate heatmaps)

Vinayak Kulkarni 13 Dec 15, 2022
React components for Leaflet maps

React Leaflet React components for Leaflet maps. Documentation Getting started API reference Changes See the CHANGELOG file. Contributing See the CONT

Paul Le Cam 4.4k Jan 3, 2023
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Vue Leaflet 1.9k Dec 29, 2022
Add time dimension capabilities on a Leaflet map.

Leaflet TimeDimension Add time dimension capabilities on a Leaflet map. Examples and basic usage API L.Map L.TimeDimension L.TimeDimension.Layer L.Tim

SOCIB public code 379 Dec 23, 2022
AngularJS directive to embed an interact with maps managed by Leaflet library

Angular Leaflet Why the fork? While we are grateful for all the original work at tombatossals/angular-leaflet-directive. We need to be able to operate

AngularUI 313 Nov 10, 2022
Simple location picker on Leaflet map

Leaflet Location Picker Simple location picker with Leaflet map Usage: <label>Insert a Geo Location <input id="geoloc" type="text" value="" /> </lab

Stefano Cudini 37 Nov 17, 2022
Dashboards-maps is a frontend plugin that helps you in uploading custom GeoJSON to OpenSearch and communicates with the geospatial backend plugin for the same.

Welcome! Project Resources Code of Conduct License Copyright Dashboards-Maps Dashboards-maps is a frontend plugin that helps you in uploading custom G

null 9 Dec 28, 2022
jQuery plugin for zooming images on mouseover.

About Zoom A small jQuery plugin for zooming images on mouseover or mousedown. See the project page for documentation and a demonstration. Released un

Jack Moore 1.5k Dec 6, 2022
๐Ÿธ A simple plugin for image zooming without dependencies ~1.65KB gzip

ZOOOM.JS A simple plugin for image zoooming without dependencies. Only pure javascipt. Installation CDN JavaScript <script src="https://cdn.jsdelivr.n

Grzegorz Tomicki 13 Aug 30, 2022
React friendly API wrapper around MapboxGL JS

react-map-gl | Docs react-map-gl is a suite of React components designed to provide a React API for Mapbox GL JS-compatible libraries. More informatio

Vis.gl 6.9k Jan 2, 2023
Node.js REST API for PostGres Spatial Entities. AKA: SpatialServer

PGRestAPI (a.k.a. Chubbs Spatial Server) Overview Node.js REST API for PostgreSQL Spatial Tables. An introduction to PGRestAPI can be found here A few

SpatialDev 429 Dec 9, 2022
A web based data mining tool for OpenStreetMap using the Overpass API.

overpass turbo https://overpass-turbo.eu/ โ€“ stable version https://tyrasd.github.io/overpass-turbo/ โ€“ latest version This is a GUI for testing and dev

Martin Raifer 607 Dec 29, 2022